React基础性总结(一)：组件的生命周期及执行顺序

时间 2020-07-06

标签 react 基础性总结组件生命周期执行顺序栏目 React 繁體版

原文原文链接

“ 关注 前端开发社区 ，回复"1"便可加入 前端技术交流群，回复 "2"便可免费领取 500G前端干货！html

做者：前端林子 https://cloud.tencent.com/developer/article关注‘前端开发社区’天天精选好文 — 做者：前端林子 https://cloud.tencent.com/developer/article
关注‘前端开发社区’天天精选好文

本文做为React总结系列的第一篇文章，会总结组件的生命周期及执行顺序，涉及内容比较基础。在后面的系列文章中则会总结React Hooks等内容。前端

1.七个可选的生命周期

说明：react

componentWillMount()

仅在render()方法前被调用一次，若是在该方法中调用了setState方法去改变组件的状态值，那么调用render()后，将会直接看到改变过了的状态值，而且不论状态值怎么改变，componentWillMount()都不会再被调用。web

componentDidMount()

仅在render()方法后被当即调用一次，相对于父组件而言，该方法在子组件中会先被调用。若是须要使用一些JaveScript框架或者相似于setInterval()这样的方法，建议在该方法内使用。ajax

shouldComponentUpdate(object nextProps, object nextState)

在首次渲染调用render()方法时不会被调用，后面在接受到新的state或者props时，在render()方法前被调用。为防止一些潜在的bug，该方法默认老是返回true。若是肯定state及props改变后不须要渲染组件，那么也能够指定返回false，须要注意的是，这样的结果会致使后面的render()、componentWillUpdate()、componentDidUpdate()都不会被调用。不过，React官方建议这个方法仅用来作优化性能，不要用这个方法来阻止渲染，由于可能会产生bug。数组

例如React内置的PureComponent的类，当咱们的组件继承于它时，组件更新时就会默认先比较新旧属性和状态，从而决定组件是否更新。值得注意的是，PureComponent进行的是浅比较，因此组件状态或属性改变时，都须要返回一个新的对象或数组babel

componentWillReceiveProps(object nextProps)

在初始渲染调用render()方法时不会被调用，当接收到一个新的props时，该方法被调用。另外，若是改变一个状态的值，则会触发render()方法。所以能够在这个方法里调用setState()方法去改变一个状态的值，当该方法接收到新的props时，setState()就能够避免一次额外的render()了。app

componentWillUpdate(object nextProps, object nextState)

在初始渲染调用render()方法时不会被调用，当接收到新的props及state时，在render()方法以前被调用。框架

不要在此方法再去更新props 或者 statedom

componentDidUpdate(object prevProps, object prevState)

在初始渲染调用render()方法时不会被调用，当组件更新被刷新到DOM以后被当即调用。

能够在这里访问，并修改 DOM

componentWillUnmount()

在组件从DOM上卸载前被调用，在这个方法里面，主要是完成一些清除操做，好比说清除掉一些过期了的定时器等。

2.执行顺序

getDefaultProps()，调用1次
getInitialState()，调用1次
componentWillMount()，调用1次
render()，调用>=1次
componentDidMount()：调用1次
componentWillReceiveProps(object nextProps)，调用>=0次
ShouldComponentUpdate(object nextProps, object nextState)，调用>=0次
componentWillUpdate(object nextProps, object nextState)，调用>=0次
render()，调用>=1次
componentDidUpdate(object prevProps, object prevState)，调用>=0次
componentWillUnmount()，调用1次

3.实例

<!DOCTYPE html>
 <html>   <head>   <script src="https://fb.me/react-15.2.0.js"></script>   <script src="https://fb.me/react-dom-15.2.0.js"></script>   <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>   </head>  <body>   <div id="app-container"></div>   <script type="text/babel">  var SubCounter = React.createClass({  componentWillReceiveProps:function() {  console.log('九、子组件将要接收到新属性');  },   shouldComponentUpdate:function(newProps, newState) {  console.log('十、子组件是否须要更新');  if (newProps.number < 5) return true;  return false  },   componentWillUpdate:function() {  console.log('十一、子组件将要更新');  },   componentDidUpdate:function() {  console.log('1三、子组件更新完成');  },   componentWillUnmount:function() {  console.log('1四、子组件将卸载');  },   render:function() {  console.log('十二、子组件挂载中');  return (  <p>{this.props.number}</p>  )  }  });   var Counter = React.createClass({   getInitialState:function(){  return(  this.state={  number:0  }  )  },   componentWillMount:function(){  console.log('三、父组件挂载以前');  },   componentDidMount:function(){  console.log('五、父组件挂载完成');  },   shouldComponentUpdate:function(newProps, newState) {  console.log('六、父组件是否须要更新');  if (newState.number<15) return true;  return false  },   componentWillUpdate:function() {  console.log('七、父组件将要更新');  },   componentDidUpdate:function() {  console.log('八、父组件更新完成');  },   handleClick : function(){  this.setState({  number: this.state.number + 1  })  },  render:function() {  console.log('四、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('app-container'));   </script>  </body>  </html> 复制代码

结果：

4. 其余

constructor(props){}

constructor(props){
 super(props);  this.state = {} } 复制代码

在React组件挂载以前，会调用它的构造函数。在为 React.Component 子类实现构造函数时，应先调用 super()，并传入参数props。构造函数中，能够经过this.state来初始化组件内部的state（注意这里不是setState()方法来设置state），还能够为事件处理函数绑定实例：

constructor(props) {
 super(props);  // 注意：不要在这里调用 this.setState()  this.state = { counter: 0 };  this.handleClick = this.handleClick.bind(this); } 复制代码

defaultProps

用于为class组件添加默认的props，示例：

class sayHello extends React.Component {
 render() {  return (  <h1>Hello,{this.props.name}</h1>  );  } }  sayHello.defaultProps = {  name:"Peter" } 复制代码

propTypes 进行类型检测

PropTypes 提供一系列验证器，可用于确保组件接收到的prop值是有效的。当传入的 prop 值类型不正确时，JavaScript 控制台将会显示警告。示例：

import PropTypes from 'prop-types';
class sayHello extends React.Component {  render() {  return (  <h1>Hello,{this.props.name}</h1>  );  } }  sayHello.propTypes = {  name: PropTypes.string }; 复制代码

render()

对于一个组件而言，render()方法是必须的，一般在这个方法里面都会返回一个元素（如：<div></div>），但一样也能够返回false或null，这意味着没有任何东西须要渲染。

若有问题，欢迎指正，若有侵权请联系小编删除~~

往期：

JS基础知识总结（十四）：模块的语法

JS基础知识总结（十三）：ES6 对象的扩展

请各位帅哥美女多多支持帅编，回复“1”便可加入前端技术交流群，回复"2"便可领取 500G 前端干货

本文使用 mdnice 排版