react组件的渲染流程是什么（一起学React-元素渲染和生命周期）

JSX是Javascript的语法拓展，在React中通过JSX渲染元素

const name = 'Josh Perez'; const element = <h1>Hello, {name}</h1>; ReactDOM.render( element, document.getElementById('root') );

类似模版渲染，jsx可以通过变量来定义，然后在React中渲染。

在jsx中定义一些属性是使用的小驼峰的写法，如className，tabIndex

Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。

const element = ( <h1 className="greeting"> Hello, world! </h1> ); const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' );

所以事实上jsx还是 React.createElement(component, props, …children) 的语法糖。

React中通过 ReactDOM.render 的方式渲染元素，配合上强大的jsx语法，一切皆为变量，一切在 {} 的变量都能被渲染。

function tick() { const element = ( <div> <h1>Hello, world!</h1> <h2>It is {newDate().toLocaleTimeString()}.</h2> </div> ); ReactDOM.render(element, document.getElementById('root')); } setInterval(tick, 1000);

3. React生命周期

• constructor()

执行构造函数

• render()

渲染

• componentDidMount()

在Dom树渲染完成后立即调用ComponentDidMount（）。需要DOM节点的初始化应该放在这里。如果需要从远程端点加载数据，这是实例化网络请求的好地方。

如果使用DidMount 记得要在组件使用之后取消订阅，componentWillUnmount

• shouldComponentUpdate() (比较少用)

当组件接收到新属性，或者组件的状态发生改变时触发。组件首次渲染时并不会触发

shouldComponentUpdate(newProps, newState) { if (newProps.number < 5) return true; return false } //该钩子函数可以接收到两个参数，新的属性和状态，返回true/false来控制组件是否需要更新。

一般我们通过该函数来优化性能：一个React项目需要更新一个小组件时，很可能需要父组件更新自己的状态。而一个父组件的重新更新会造成它旗下所有的子组件重新执行render()方法，形成新的虚拟DOM，再用diff算法对新旧虚拟DOM进行结构和属性的比较，决定组件是否需要重新渲染.无疑这样的操作会造成很多的性能浪费，所以我们开发者可以根据项目的业务逻辑，在shouldComponentUpdate()中加入条件判断，从而优化性能

• componentDidUpdate()

组件更新

componentDidUpdate(prevProps, prevState, snapshot)

更新发生后立即调用componentDidUpdate（）初始渲染不会调用此方法。

将此作为在更新组件时对DOM进行操作的机会。只要将当前props与之前的props进行比较（例如，如果props未更改，则可能不需要网络请求），这也是进行网络请求的好地方。

componentDidUpdate(prevProps) { // 不要忘了比较props的状态 if (this.props.userID !== prevProps.userID) { this.fetchData(this.props.userID); } }

• componentWillUnmount()

组件卸载

在卸载和销毁组件之前立即调componentWillUnmount（）在此方法中执行任何必要的清理，例如使计时器无效，取消网络请求或清除在componentDidMount（）中创建的任何订阅。

• componentDidCatch()

在渲染期间，生命周期方法或任何子组件的构造函数中发生错误时，将调用这些方法。

import React from 'react' import ReactDOM from 'react-dom'; class SubCounter extends React.Component { // 在17版本将要废弃，还是不用较好 componentWillReceiveProps() { console.log('9、子组件将要接收到新属性'); } shouldComponentUpdate(newProps, newState) { console.log('10、子组件是否需要更新'); if (newProps.number < 5) return true; return false } // 同17版本将要废弃 componentWillUpdate() { console.log('11、子组件将要更新'); } componentDidUpdate() { console.log('13、子组件更新完成'); } componentWillUnmount() { console.log('14、子组件将卸载'); } render() { console.log('12、子组件挂载中'); return ( <p>{this.props.number}</p> ) } } // 父组件 class Counter extends React.Component { static defaultProps = { //1、加载默认属性 name: 'sls', age:23 }; constructor() { super(); //2、加载默认状态 this.state = {number: 0} } // 新版本已经废弃 componentWillMount() { console.log('3、父组件挂载之前'); } componentDidMount() { console.log('5、父组件挂载完成'); } shouldComponentUpdate(newProps, newState) { console.log('6、父组件是否需要更新'); if (newState.number<15) return true; return false } // 新版本已经废弃 componentWillUpdate() { console.log('7、父组件将要更新'); } componentDidUpdate() { console.log('8、父组件更新完成'); } handleClick = () => { this.setState({ number: this.state.number 1 }) }; render() { console.log('4、render(父组件挂载)'); return ( <div> <p>{this.state.number}</p> <button onClick={this.handleClick}> </button> {this.state.number<10?<SubCounter number={this.state.number}/>:null} </div> ) } } ReactDOM.render(<Counter/>, document.getElementById('root'));

最后附上生命周期图示