react生命周期

组件将要挂载  组件挂载完毕  组件将要更新  组件更新完毕

生命周期流程(旧)

import Children from './Children'
export default class Left extends Component {
  constructor(props) {
    super(props);
    console.log("constructor");
    this.state = {
      count: 0,
      sumChild: 0
    };
  }
  render() {
    console.log("render");
    return (
      <div>
        年龄：{this.state.count}
        <button onClick={this.handleCount}>年龄增长</button>
        <button onClick={this.handleUpdate}>强制更新</button>
        <br></br>
        <button onClick={this.handleChild}>更新父组件的数据</button>
        <Children sumChild={this.state.sumChild}></Children>
      </div>
    );
  }
  handleCount = () => {
    let { count } = this.state;
    this.setState({ count: count + 1 });
  };
  handleChild = () => {
    let { sumChild } = this.state;
    this.setState({ sumChild: sumChild + 1 });
  }
  //组件即将挂载
  componentWillMount() {
    console.log("componentWillMount");
  }

  // render() 挂载

  // 组件挂载完成
  componentDidMount() {
    console.log("componentDidMount");
  }

  //组件是否需要被更新? 相当于阀门
  shouldComponentUpdate() {
    console.log("shouldComponentUpdate");
    return true;
  }
  //组件将要被更新
  componentWillUpdate() {
    console.log("componentWillUpdate");
  }

  // render() 挂载

  // 组件更新完成
  componentDidUpdate() {
    console.log("componentDidUpdate");
  }

  handleUpdate = () => {
      this.forceUpdate() //强制更新      接连调用componentWillUpdate    render  componentDidUpdate
  }

  // 组件将要被卸载   由ReactDOM.unmountComponentAtNode()触发
  componentWillUnmount() {
    console.log('componentWillUnmount')
  }

}

 

生命周期流程图(旧)：

生命周期的三个阶段（旧）

1. 初始化阶段: 由ReactDOM.render()触发---初次渲染

　　 constructor()

　　componentWillMount()           

　　render()

　　componentDidMount() =========================================>初始化，定时器，网络请求，订阅消息

2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发

　　shouldComponentUpdate()

　　componentWillUpdate()

　　render()  ====================================================>必调的一个，初始化/更新

　　componentDidUpdate()

3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发

　　componentWillUnmount() =========================================>收尾，关闭定时器，取消订阅消息

生命周期流程图(新)

 

export default class Itemlist extends Component {
  state = { newArr: [] };
  componentDidMount() {
    setInterval(() => {
      const { newArr } = this.state;
      const arr = "新闻" + (newArr.length + 1);
      this.setState({ newArr: [arr, ...newArr] });
    }, 1000);
  }
  render() {
    const { newArr } = this.state;
    return (
      <div
        ref="Myref"
        style={{
          height: "200px",
          overflow: "auto",
          width: "200px",
          backgroundColor: "#ccc",
        }}
      >
        {newArr.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </div>
    );
  }
  getSnapshotBeforeUpdate() {
    console.log(this.refs.Myref.scrollHeight);
    return this.refs.Myref.scrollHeight;
  }
  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log(prevProps, prevState, snapshot)
    this.refs.Myref.scrollTop += this.refs.Myref.scrollHeight - snapshot
  }
}