【React.js】之生命周期

React生命周期

生命周期函数

v16.4以前

V16.4以后

从16.4开始下面的三个生命周期已经改名，仍然可以使用旧版本周期函数，但控制台会报警告。
componentWillMount → UNSAFE_componentWillMount
componentWillReceiveProps → UNSAFE_componentWillReceiveProps
componentWillUpdate → UNSAFE_componentWillUpdate
注意： 如果使用React.StrictMode使用UNSAFT开头的也会报警告

componentWillMount

组件即将渲染时调用，在render函数之前调用，只调用一次

因为16.4开始这个生命周期函数不推荐使用，解决方案

是将状态初始化移至构造函数或属性初始化器，如下所示：

class App extends React.Component {
  state = {
		selected: this.props.selected,
    color: "red"
  };
}

将数据获取移到componentDidMount中：

class AppComponent extends React.Component {
  state = {
    data: null,
  };
  componentDidMount() {
    axios.get("http://xxx").then(
      res => {
        this.setState({data: res});
      }
    );
  }
}

componentDidMount

组件渲染完毕时调用，在render函数之后调用，只调用一次

shouldComponentUpdate

组件被更新之前自动调用, 此函数必须返回一个boolean类型, 返回true组件才会更新

如果返回true, 才能调用render渲染

如果返回false, 就不会调用render重新渲染页面

当父组件的render函数执行时，子组件的render函数也会执行，使用shouldComponentUpdate可以提升性能

shouldComponentUpdate (nextProps, nextState) {
   // 通过对比判断数据是否更改，如果没有更改返回false,否则返回true
  }

 // 组件初始化时不调用
    shouldComponentUpdate (nextProps, nextState) {
    // 这个生命周期函数有两个参数nextProps(更新完成之后的属性), nextState(更新完成之后的状态)
        if (this.props.list.length != nextProps.list.length) {
            console.log('List----shouldComponentUpdate', nextProps, this.props) // this.props是当前的属性
            return true
        } else {
            return false
        }
    }

componentWillUpdate

组件被更新之前自动调用，shouldComponentUpdate返回true才会执行

componentDidUpdate

组件被更新完成之后自动调用，在render之后执行

componentWillReceiveProps

当一个组件从父组件接收参数，初始化组件是不会执行，只要父组件的render函数被重新执行，子组件就会执行这个生命周期函数

componentWillUnmount

组件即将卸载时调用

清理定时器、自定义事件，关闭资源