이번 글은 주로 리액트 프로젝트를 개발할 때 주의해야 할 사항에 대해 이야기하고 있습니다. 알고 싶다면 지금 바로 이 글을 클릭해서 읽어보세요
对react项目开发,我大概对它的知识点进行了分类,主要由以下几个部分组成。
import React,{ Component } from 'react';import { render } from 'react-dom';import Main from './components/Main'; render(<Main />,document.getElementById('app'));
import React,{ Component } from 'react'; export default class Main extends Component{ render(){ return ( <p> 组件 </p> ) } }
父组件传给子组件靠props
import React,{ Component } from 'react'; import { render } from 'react-dom';class Main extends Component{ render(){ return ( <p> <Child title="我是父组件"/> </p> ) } }class Child extends Component{ render(){ return( <h2>{this.props.title}</h2> ) } } render(<Main />,document.getElementById('app'));
子组件传给父组件靠事件 子组件传递给父组件的过程描述,父组件传递给子组件一个函数,子组件执行这个函数,然后把子组件自己的值可以通过穿参的方式传递进去。然后父组件接受到这个值,进行相应的操作。
import React,{ Component } from 'react'; import { render } from 'react-dom';class Main extends Component{ constructor(props){ super(props); this.state = { value:'init value' } } render(){ return ( <p> <p>{this.state.value}</p> <Child onClick={(value)=>{this.setState({value:value})}}/> </p> ) } }class Child extends Component{ render(){ return( <button onClick={()=>this.props.onClick("子组件的值")}>点击传值</button> ) } } render(<Main />,document.getElementById('app'));
일반적인 웹팩 구성 파일은 다음과 같습니다.
webpack的配置一般分为这么几个部分,entry、output、plugin、devServer、module等。 entry告诉webpack入口在哪。 output告诉webpack将来把文件打包到哪。 plugin代表一些其他的操作,如打开浏览器、文件压缩等处理。 devServer代表开发的时候启动一个本地服务器 module代表各种loader用来解析你的代码。
React에서는 일반적으로 몇 가지 es6 구문을 알아야 합니다. React를 위해 es6의 몇 가지 기본 사용법과 작성 방법이 나열되어 있습니다.
import에 새로운 기능이 추가되었습니다
var webpack = require('webpack');module.exports = { entry:"./src/index.js", output:{ path:'public', filename:'bundle.js' }, devServer:{ historyApiFallback:true, hot:true, inline:true }, plugins:[ new webpack.DefinePlugin({ 'process.env.NODE.ENV': "development" }), new webpack.HotModuleReplacementPlugin(), new OpenBrowserPlugin({ url: 'http://localhost:8080' }) ], module:{ loaders:[{ test:/\.js[x]?$/, exclude:/node_modules/, loader:'babel-loader', query:{ presets:['es2015','react','stage-1'] } },{ test:/\.css$/, loaders:['style',css] },{ test:/\.(png|jpg)$/, loader:"url-loader" }] } }
"{}"를 사용하여 도입된 변수는 해당 파일에 반드시 존재해야 하는 동일한 이름을 가진 변수입니다.
"{}" 없이 도입된 변수는 해당 파일에서 기본 내보내기에 의해 던져진 변수이며, 변수 이름은 다를 수 있습니다.
내보내기가 뭔가를 던집니다.
import webpack from 'webpack';import React from 'react';import { Component } from 'react';
내보내기는 여러 번 던져서 여러 번 사용할 수 있습니다.
내보내기 기본값은 하나만 사용할 수 있으며 이는 기본적으로 발생함을 의미합니다.
클래스의 본질은 클래스를 선언하는 키워드입니다. 존재 의미는 var, let, const, function 등과 같습니다.
사용 방법:
function a(){ console.log(1); }let b = 1;export a;export b;export default a;
extends는 상속을 나타내고, 사용 방법:
class Main{}
constructor는 생성자를 나타내고, super는 상위 클래스의 속성과 메서드를 상속합니다.
class Main extends Component{}
3가지 상태로 구분
Mounting
Updating
Unmounting
마운팅 단계 – 일반적으로 이 단계의 수명 주기 기능 단계는 한 번만 실행됩니다.
constructor()
comComponentWillMount()
comComponentDidMount()
render()
업데이트 단계 – 여러 번 실행됩니다.
comComponentWillReceiveProps()
shouldComponentUpdate()
render()
comComponentD 아이디업데이트()
Unmountint 단계 – 컴포넌트 언마운트 기간
comComponentWillUnmount()
이 단계의 컴포넌트 수명주기 기능입니다. 이전에는 getDefaultProps 및 getInitialState라는 두 가지 수명 주기 함수가 있었습니다.
그러나 해당 기능은 이제 생성자로 대체되었습니다.
컴포넌트의 수명주기 사용 시나리오
constructor
이를 사용하는 일반적인 방법은 상태
class Main extends Component{ constructor(props){ super(props) } }
comComponentWillMount
일부 초기화 작업을 수행하는 것입니다. 아니면 데이터 로딩을 해보세요.
<코드> <br/>componentWillMount(){ <br/>
this.fetchData(); <br/>} <br/>
componentDidMount
常见场景就是数据请求
constructor(props){ super(props); this.state = { value:'' }}
render
一个react组件中必须包含的函数,返回jsx语法的dom元素
componentWillMount(){ this.fetchData(); }
componentWillReceiveProps
在props传递的时候,可以在render之前进行一些处理。不会触发二次setState。
只有一个参数。代表的是props对象
shouldComponentUpdate
有两个参数,分别代表props和state
必须返回一个true或者false。否则会语法报错。
在进行一些性能优化的时候非常有用
componentDidUpdate
组件加载完毕,进行某些操作
componentWillUnmount
最常见的场景,对组件附加的setInterval、setTimeout进行清除。 <br/>componentWillUnMount(){ <br/>
clearInterval(this.timer); <br/>} <br/>
comComponentWillMount(){
render(){ return ( <p>123</p> ) }
常见的使用场景是,根据传递不同的props,渲染不同的界面数据。 项目比较复杂的情况下,一个页面的值发生变化,就要导致另一个页面的值发生改变,这样需要通过props的方式来告知对方,你的值发生改变。让另外一个组件更新dom。需要使用这个周期函数进行监听接受到的props,从而根据这个props进行相应的数据处理。
true 또는 false를 반환해야 합니다. 그렇지 않으면 구문 오류가 보고됩니다.
성능 최적화를 수행할 때 매우 유용합니다
comComponentDidUpdate
구성 요소가 로드되고 일부 작업이 수행됩니다comComponentWillUnmountcomComponentWillUnMount(){
clearInterval(this.timer);}
comComponentWillReceiveProps parsing这个函数的返回值是一个布尔值。返回一个true。 返回一个false的情况下,它的的状态不会进行更新。
immutable.js
const Promise = require(`../vendor/bluebird/bluebird.js`);let get = (url,data) => { return new Promise((resolve, reject) => { if(res){ resolve(res); }else if(err){ reject(err); } })}
xhr.onReadyStateChange = ()=>{
if (xhr.readyState == 4 && xhr.status == 200) {기본 사용법은 다음과 같습니다: Promise object
fetch("http://homework.shsoapp.com:80/ttzyservice/task/getTaskSubjectList",{ method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, mode: 'cors', body: "page=1&rows=10" }).then(res =>{ console.log(res); return res.json() }).then(res => { console.log(res); })
import { BrowserRouter as Router, Link, Route,Switch} from 'react-router-dom'; export default class Main extends Component{ render(){ return( <Router> <p> <Switch> <Route path='/' component={page1}> <Route path='/home' component={page2}> <Route path='/age' component={page3}> </Switch> </p> </Router> ) } }
const ADD_TASK = "ADD_TASK";const ADD_CONTENT = "ADD_CONTENT"; export function addtask(task){ return { type: ADD_TASK, task } } export function addContent(content){ return { type: ADD_CONTENT, content } }
import { addtask,addContent } from 'actions';export function(state = '',action){ switch (action.type){ case ADD_TASK: return action.task; break; case ADD_CONTENT: return action.content; break; default: return state; } }
对react项目开发,我大概对它的知识点进行了分类,主要由以下几个部分组成。
import webpack from 'webpack';import React from 'react';import { Component } from 'react';
其中使用“{}”引入的变量是那个文件中必须存在的变量名相同的变量。
不使用“{}”引入的变量是那个文件中export default默认抛出的变量,其中变量名可以不一样。
export抛出一个东西。
function a(){ console.log(1); }let b = 1;export a;export b;export default a;
其中export可以抛出多个,多次使用。
export default只能使用一个,表示默认抛出。
class的本质是一个申明类的关键字。它存在的意义和var、let、const、function等都是一样的。
使用方式:
class Main{}
extends代表继承,使用方式:
class Main extends Component{}
constructor代表构造函数,super是从父类继承属性和方法。
class Main extends Component{ constructor(props){ super(props) } }
分三个状态
Mounting
Updating
Unmounting
Mounting阶段–一般在这个阶段生命周期函数只会执行一次
constructor()
componentWillMount()
componentDidMount()
render()
Updating阶段–会执行多次
componentWillReceiveProps()
shouldComponentUpdate()
render()
componentDidUpdate()
Unmountint阶段–组件卸载期
componentWillUnmount()
这就是现阶段的组件生命周期函数。之前还有两个生命周期函数叫 getDefaultProps 以及 getInitialState。
但是它们的功能现在被constructor代替。
组件的生命周期使用场景
constructor
常见的一个使用方式就是state的初始化
constructor(props){ super(props); this.state = { value:'' }}
componentWillMount
进行一些初始化的操作。或者进行一些数据加载。 <br/>componentWillMount(){ <br/>
this.fetchData(); <br/>} <br/>
componentDidMount
常见场景就是数据请求
componentWillMount(){ this.fetchData(); }
render
一个react组件中必须包含的函数,返回jsx语法的dom元素
render(){ return ( <p>123</p> ) }
componentWillReceiveProps
在props传递的时候,可以在render之前进行一些处理。不会触发二次setState。
只有一个参数。代表的是props对象
shouldComponentUpdate
有两个参数,分别代表props和state
必须返回一个true或者false。否则会语法报错。
在进行一些性能优化的时候非常有用
componentDidUpdate
组件加载完毕,进行某些操作
componentWillUnmount
最常见的场景,对组件附加的setInterval、setTimeout进行清除。 <br/>componentWillUnMount(){ <br/>
clearInterval(this.timer); <br/>} <br/>
常见的使用场景是,根据传递不同的props,渲染不同的界面数据。 项目比较复杂的情况下,一个页面的值发生变化,就要导致另一个页面的值发生改变,这样需要通过props的方式来告知对方,你的值发生改变。让另外一个组件更新dom。需要使用这个周期函数进行监听接受到的props,从而根据这个props进行相应的数据处理。
这个函数的返回值是一个布尔值。返回一个true。 返回一个false的情况下,它的的状态不会进行更新。
immutable.js
在react中,可以使用传统的XMLHttpRequest对象进行数据请求。
var xhr = new XMLHttpRequest();
xhr.open(type, url, true);
xhr.onReadyStateChange = ()=>{
if (xhr.readyState == 4 && xhr.status == 200) {
sucess(xhr.responseText);
}
}
promise是es6提出的数据请求方式。目前很多浏览器还没有实现。但是有promise的polyfill,如blueBird.js
基本的使用方式是:Promise对象
const Promise = require(`../vendor/bluebird/bluebird.js`);let get = (url,data) => { return new Promise((resolve, reject) => { if(res){ resolve(res); }else if(err){ reject(err); } })}
fetch的基本使用方式:
fetch("http://homework.shsoapp.com:80/ttzyservice/task/getTaskSubjectList",{ method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, mode: 'cors', body: "page=1&rows=10" }).then(res =>{ console.log(res); return res.json() }).then(res => { console.log(res); })
基本使用
import { BrowserRouter as Router, Link, Route,Switch} from 'react-router-dom'; export default class Main extends Component{ render(){ return( <Router> <p> <Switch> <Route path='/' component={page1}> <Route path='/home' component={page2}> <Route path='/age' component={page3}> </Switch> </p> </Router> ) } }
actions
const ADD_TASK = "ADD_TASK";const ADD_CONTENT = "ADD_CONTENT"; export function addtask(task){ return { type: ADD_TASK, task } } export function addContent(content){ return { type: ADD_CONTENT, content } }
reducers
import { addtask,addContent } from 'actions';export function(state = '',action){ switch (action.type){ case ADD_TASK: return action.task; break; case ADD_CONTENT: return action.content; break; default: return state; } }
위 내용은 React 프로젝트 개발에 대해 무엇을 알아야 합니까? React 프로젝트 개발에 관한 구체적인 사항(예시 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!