生命周期 #

import React, { Component } from "react";
export default class Lifecycle extends Component {
  constructor(props) {
    super(props);
    // 常用于初始化状态
    console.log("1.组件构造函数执行");
  }

  //获取初始props
  static defaultProps = {
    msg:'omg'
  }

  //初始props的type
  static propTypes = {
		msg: PropTypes.string // 设置数据类型，必填
  }

  componentWillMount() { // ❌废弃
    // 此时可以访问状态和属性,可进行api调用等
    console.log("2.组件将要挂载");
  }

  componentDidMount() {
    // 组件已挂载，可进行状态更新操作
    console.log("3.组件已经渲染完毕");
  }

  //props或者state改变
  componentWillReceiveProps() { // ❌废弃
    // 父组件传递的属性变化，做相应响应
    console.log("4.将要接收属性传递");
  }

  //是否渲染
  shouldComponentUpdate() {
    // 组件是否需要更新，需要返回布尔值结果，优化点
    console.log("组件是否需要更新?");
  }

	//更新前
  componentWillUpdate(){ // ❌废弃
  }

  //更新后
  componentDidUpdate(){
  }

  //卸载组件
  componentWillUnmount(){
  }

  render() {
    console.log("组件渲染");
    return <div>生命周期探究</div>;
  }
}

import React from 'react';
import ReactDOM from 'react-dom';
class Counter extends React.Component{
    static defaultProps = {
      name:'珠峰架构'
    };
    constructor(props){
      super();
      this.state = {number:0}
    }

    handleClick=()=>{
      this.setState({number:this.state.number+1});
    };

    render(){
      console.log('3.render');
      return (
        <div>
          <p>{this.state.number}</p>
          <ChildCounter number={this.state.number}/>
          <button onClick={this.handleClick}>+</button>
        </div>
      )
    }
  }
  class ChildCounter extends React.Component{
      constructor(){
          super();
          this.state = {number:0};
      }
    static getDerivedStateFromProps(nextProps, prevState) {
        const {number} = nextProps;
        // 当传入的type发生变化的时候，更新state
        if (number%2==0) {
            return { number:number*2};
        }else{
            return { number:number*3};
        }
        // 否则，对于state不进行任何操作
        return null;
    }
    render(){
      console.log('child-render',this.state)
      return (<div>
        {this.state.number}
      </div>)
    }

  }

ReactDOM.render(
    <Counter />,
    document.getElementById('root')
);

import React from 'react';
import ReactDOM from 'react-dom';
class ScrollingList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {messages: []}
        this.wrapper = React.createRef();
    }

    addMessage() {
        this.setState(state => ({
            messages: [`${state.messages.length}`, ...state.messages],
        }))
    }
    componentDidMount() {
        this.timeID = window.setInterval(() => {//设置定时器
            this.addMessage();
        }, 1000)
    }
    componentWillUnmount() {//清除定时器
        window.clearInterval(this.timeID);
    }
    getSnapshotBeforeUpdate() {//很关键的，我们获取当前rootNode的scrollHeight，传到componentDidUpdate 的参数perScrollHeight
        return this.wrapper.current.scrollHeight;
    }
    componentDidUpdate(perProps, perState, prevScrollHeight) {
        const curScrollTop = this.wrapper.current.scrollTop;//当前向上卷去的高度
        //当前向上卷去的高度加上增加的内容高度
        this.wrapper.current.scrollTop = curScrollTop + (this.wrapper.current.scrollHeight - prevScrollHeight);
    }
    render() {
        let style = {
            height: '100px',
            width: '200px',
            border: '1px solid red',
            overflow: 'auto'
        }
        return (
            <div style={style} ref={this.wrapper} >
                {this.state.messages.map((message, index) => (
                    <div key={index}>{message} </div>
                ))}
            </div>
        );
    }
}

ReactDOM.render(
    <ScrollingList />,
    document.getElementById('root')
);