React-18：组件的生命周期

 class Life extends React.Component {
      state = {
        opacity: 1
      }
      render() {
        return (
          <div>
            <h1 style={{ opacity: this.state.opacity }}>React 学不会怎么办</h1>
            <button onClick={this.death}>不活了</button>
          </div>
        )
      }
      componentDidMount() {
        this.timer = setInterval(() => {
          console.log('1');
          let { opacity } = this.state
          opacity -= 0.1
          if (opacity <= 0) {
            opacity = 1
          }
          this.setState({
            opacity: opacity  // 改了状态就会调用redder
          })
        }, 200);
      }
      componentWillUnmount() {
        // 卸载组件之前清除定时器
        clearInterval(this.timer)
      }
      death = () => {
        // 卸载组件
        ReactDOM.unmountComponentAtNode(document.querySelector('#app'))
      }
    }
    ReactDOM.render(<Life />, document.querySelector('#app'))

初始化渲染和状态更新之后

  render() {
        return (
          <div>
            <h1 style={{ opacity: this.state.opacity }}>React 学不会怎么办</h1>
            <button onClick={this.death}>不活了</button>
          </div>
        )
      }

挂载完成

  componentDidMount() {
        this.timer = setInterval(() => {
          let { opacity } = this.state
          opacity -= 0.1
          if (opacity <= 0) {
            opacity = 1
          }
          this.setState({
            opacity: opacity  // 改了状态就会调用redder
          })
        }, 200);
      }

组件将要卸载之前

   componentWillUnmount() {
        clearInterval(this.timer)
      }

卸载组件

  <button onClick={this.death}>不活了</button>
 death = () => {
ReactDOM.unmountComponentAtNode(document.querySelector('#app'))
      }

组件的生命周期（旧）

组件的生命周期（新）

新旧生命周期的区别在哪里？

在新的生命周期中，废弃了旧版本的3个带will的钩子，新提出了2个钩子。

新版本中除了componentWillUnmount之外，其余都需要加上UNSAFE_

过时生命周期：
① componentWillMount
② componentWillReceiveProps
③ componentWillUpdate

即将过时生命周期：(在新代码中我们应该避免使用它们)
① UNSAFE_componentWillMount
② UNSAFE_componentWillReceivePorps
③ UNSAFE_componentWillUpdate

新增生命周期
① getDerivedStateFromProps
② getSnapShotBeforeUpdate
③ getDerivedStateFromError
④ componentDidCatch

新增 getDerivedStateFromProps

实际工作中基本用不到他
这个函数前面应加static，因为是静态的。
通过这个钩子修改的state，state任何时候都取决于props，其他的函数无法进行修改。
只要这个钩子拦着，所有的状态都得听props的。

新增 getSnapshotBeforeUpdate生命周期例子

HTML

  <div id="app"></div>

CSS

   .list {
      width: 200px;
      height: 150px;
      background-color: skyblue;
      overflow: auto;
    }

    .news {
      height: 30px;
    }

JS

class Count extends React.Component {
      state = {
        newsArr: []
      }
      render() {
        return (
          <div className="list" ref={c => { this.list = c }}>
            {
              this.state.newsArr.map((n, value) => {
                return <div className="news" key={value}>{n}</div>
              })
            }
          </div>
        )
      }
      componentDidMount() {
        setInterval(() => {
          // 获取原数据
          const { newsArr } = this.state
          const news = '新闻' + (newsArr.length + 1)
          this.setState({
            newsArr: [news, ...newsArr]
          })
        }, 200);
      }
      getSnapshotBeforeUpdate() {
        const { list } = this
        return list.scrollHeight
      }
      componentDidUpdate(props, state, xj) {
        console.log(xj);
        this.list.scrollTop += this.list.scrollHeight - xj
      }
    }
    ReactDOM.render(<Count count={109} />, document.querySelector('#app'))

component.forceUpdate() 一个不常用的生命周期方法, 它的作用就是强制刷新

官网解释如下:

默认情况下，当组件的 state 或 props 发生变化时，组件将重新渲染。如果 render() 方法依赖于其他数据，则可以调用 forceUpdate() 强制让组件重新渲染。
调用 forceUpdate() 将致使组件调用 render() 方法，此操作会跳过该组件的 shouldComponentUpdate()。但其子组件会触发正常的生命周期方法，包括 shouldComponentUpdate() 方法。如果标记发生变化，React 仍将只更新 DOM。
通常你应该避免使用 forceUpdate()，尽量在 render() 中使用 this.props 和 this.state。

通常来说, 我们应该用 setState() 更新数据,从而驱动更新.所以用到 component.forceUpdate() 的情况并不多