淘先锋技术网

首页 1 2 3 4 5 6 7

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

组件即将卸载时调用

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