react入门（组件的生命周期）

引出生命周期

class Demo extends React.Component {
        state = {
          opacity: 0.1,
        };
        death = () => {
          //卸载组件
          ReactDOM.unmountComponentAtNode(document.getElementById("text"));
        };
        //组件挂载完毕
        componentDidMount() {
          console.log(1);
          this.timer = setInterval(() => {
            let { opacity } = this.state;
            opacity -= 0.1;
            console.log(opacity);
            if (opacity <= 0) {
              opacity = 1;
            }
            this.setState({
              opacity: opacity,
              // opacity,
            });
          }, 200);
        }
        //组件将要卸载时
        componentWillUnmount() {
          clearInterval(this.timer);
        }
        render() {
          return (
            <div>
              <div style={{ opacity: this.state.opacity }}>React学不会</div>
              <button onClick={this.death}>不活了</button>
            </div>
          );
        }
      }
      ReactDOM.render(<Demo />, document.getElementById("text"));

  //父组件
      class A extends React.Component {
        state = {
          carname: "奔驰",
        };
        changeCar = () => {
          this.setState({
            carname: "奥迪",
          });
        };
        render() {
          return (
            <div>
              <h2>我是父组件</h2>
              <B carName={this.state.carname}></B>
              <button onClick={this.changeCar}>换车名</button>
            </div>
          );
        }
      }
      //子组件
      class B extends React.Component {
        render() {
          return (
            <div>
              <h2>我是子组件</h2>
              <div>父组件传过来的车名是：{this.props.carName}</div>
            </div>
          );
        }
      }
      ReactDOM.render(<A />, document.getElementById("text"));

生命周期流程图（旧）

 生命周期的3个阶段

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

• constructor()
• componentWillMount()组件将要挂载的钩子
• render()
• componentDidMount()组件挂载完毕的钩子    ===>常用    一般在这做初始化的事：开启定时器，发起网络请求，订阅消息  

2更新阶段：由组件内部this.setState()或父组件重新渲染render触发

• shouldComponentUpdate()控制组件更新的阀门
• componentWillUpdate()组件将要更新的钩子
• render()  ===>必须使用的一个
• componentDidUpdate() 组件更新完毕的钩子

3卸载阶段：由ReactDOM.unmountComponentAtNode()触发

• componentWillUnmount() 组件将要卸载的钩子  ===>常用   一般在这做收尾的事：关闭定时器，取消订阅消息  

生命周期新

生命周期三个阶段（新）

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

• constructor()
• getDerivedStateFromProps
• render()
• componentDidMount() 

2更新阶段：由组件内部this.setState()或父组件重新渲染render触发

• getDerivedStateFromProps
• shouldComponentUpdate()
• render() 
• getSnapshotBeforeUpdate
• componentDidUpdate() 

3卸载阶段：由ReactDOM.unmountComponentAtNode()触发

• componentWillUnmount() 

重要的钩子

1. render：初始化渲染或者更新渲染调用
2. componentDidMount：开启监听，发送ajax请求
3. componentWillUnmount：做一些收尾工作，如：清除定时器

即将废弃的钩子

1. componentWillMount
2. componentWillReceiveProps
3. componentWillUpdate

 新版本使用会出现警告，加上UNSAFE_前缀旧能使用了，一会可能会被彻底废弃，不建议使用

getSnapshotBeforeUpdate案例

class Demo extends React.Component {
        state = {
          newArr: [],
        };
        componentDidMount() {
          setInterval(() => {
            //获取原状态
            let { newArr } = this.state;
            //模拟一条新闻
            let news = "新闻" + (newArr.length + 1);
            //更新状态
            this.setState({
              newArr: [news, ...newArr],
            });
          }, 1000);
        }
        getSnapshotBeforeUpdate() {
          return this.refs.box.scrollHeight;
        }
        componentDidUpdate(preProps, preState, height) {
          //preProps preState height 都是之前的信息
          this.refs.box.scrollTop += this.refs.box.scrollHeight - height;
        }
        render() {
          return (
            <div className="box" ref="box">
              {this.state.newArr.map((item, index) => {
                return (
                  <div key={index} className="list">
                    {item}
                  </div>
                );
              })}
            </div>
          );
        }
      }

      ReactDOM.render(<Demo />, document.getElementById("text"));