React组件生命周期

最新推荐文章于 2024-09-25 10:46:15 发布

liangzelei

最新推荐文章于 2024-09-25 10:46:15 发布

阅读量254

点赞数 1

本文链接：https://blog.csdn.net/liangzelei/article/details/77717868

版权

NodeJS 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

React

5 篇文章 0 订阅

订阅专栏

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

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')
);

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