React组件生命周期

来源：互联网发布：债券投资知乎编辑：程序博客网时间：2024/06/04 19:10

组件的生命周期可以分成三个状态：

Mounting：已插入真实 DOM

Updating：正在被重新渲染

Unmounting：已移出真实 DOM

生命周期的方法有：

componentWillMount 在渲染前调用,在客户端也在服务端。

componentDidMount 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。

componentWillReceiveProps 在组件接收到一个新的prop时被调用。这个方法在初始化render时不会被调用。

shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。可以在你确认不需要更新组件时使用。

componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。

componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。

componentWillUnmount在组件从 DOM 中移除的时候立刻被调用。

React的生命周期如下图：

以下是一个关于生命周期的例子：

import React, { Component } from 'react';import ReactDOM from 'react-dom';class Body extends Component {  constructor(props){    super(props);    console.log('Initial render');    console.log('constructor');    this.state = {      tmp : 'Hello World'    }  }  setStateTest(){    let s = 'Hello World';    if ( this.state.tmp == s ) {      s = 'HELLO WORLD';    }    this.setState({      tmp : s    });  }  forceUpdateTest(){    this.forceUpdate();  }  componentWillMount(){    console.log('componentWillMount');  }  componentDidMount(){    console.log('componentDidMount');  }  componentWillReceiveProps(nextProps){    console.log('componentWillReciveProps');  }  shouldComponentUpdate(){    console.log('shouldComponentUpdate');    return true;   // 必须有返回值 true  }  componentWillUpdate(){    console.log('componentWillUpdate');  }  componentDidUpdate(){    console.log('componentDidUpdate');  }  componentWillUnmount(){    console.log('componentWillUnmount');  }  render(){    console.log('render');    return(      <div>        <div style={{ fontSize:40 }}>Props:{this.props.tmp}</div>        <div style={{ fontSize:40 }}>State:{this.state.tmp}</div>      </div>    )  }}class Index extends Component {  constructor(props) {      super(props);      this.state = {          tmp : Math.random() * 1000      };  }  propsChangeTest() {      this.setState({          tmp : Math.random() * 1000      });  }  setBodyState() {      this.refs.rBody.setStateTest();  }  forceBodyUpdate() {      this.refs.rBody.forceUpdateTest();  }  unmountBody() {      // 这里卸载父组件也会导致卸载子组件      ReactDOM.unmountComponentAtNode(document.getElementById("container"));  }  parentForceUpdateTest() {      this.forceUpdate();  }  render(){    console.log('render');    return (        <div>            <Body ref="rBody" tmp={parseInt(this.state.tmp)}></Body>            <div onClick={this.propsChangeTest.bind(this)}>propsChangeTest</div>            <div onClick={this.setBodyState.bind(this)}>setState</div>            <div onClick={this.forceBodyUpdate.bind(this)}>forceUpdate</div>            <div onClick={this.unmountBody.bind(this)}>unmount</div>            <div onClick={this.parentForceUpdateTest.bind(this)}>parentForceUpdateWithoutChange</div>        </div>    )  }}ReactDOM.render(  <Index/>,  document.getElementById('container'));

上面的例子的执行顺序可参考下图：

阅读全文

1 0