初识react的diff算法

在于8月下旬，入职了一家公司，和我对接的前端有几个项目，vue倒是没啥了，因为用vue开发已经有个近两年的时间了，但是有项目是react的，本来我是想着的工作之余，不忙的时候，学习react，现在是因为工作不得不开始学习react了，算是提前开始了吧，下面是我学习react时候对于react时对diff算法的理解

什么是diff算法？

就是在react的数据变更的时候，讲新的数据渲染到页面上的方法就是diff算法
如图

旧数据里面有两个数据，新数据里面有三个数据，react在更新数据的时候，会对新旧数据进行对比，如果数据相同，则不销毁那些相同的数据，不重新渲染相同的数据，会将不同的数据（或者是在旧数据中不存在但在新的数据中存在，或者是在旧的数据存在，在新的数据中不存在的）渲染到页面上，让更新的效率更加快捷了，这种方法就是diff（difference）算法。

我根据这个算法写了一个小demo
需求：

1. 获取最新的时间状态值，获取每秒变动的数据
2. 通过声明周期钩子拿到更新前后的数据状态
3. 证明diff算法的

代码中的componentDidUpdate以及getSnapshotBeforeUpdate钩子介绍
这个是componentDidUpdate，类似于vue中的watch，可以检测数据更新前后的状态，第三个值是getSnapshotBeforeUpdate钩子发送的数据

• 这个官方文档对getSnapshotBeforeUpdate这个生命周期钩子的详细介绍：https://reactjs.org/docs/react-component.html#getsnapshotbeforeupdate，只不过这个生命周期狗子很少用
• 这个是官方文档对于componentDidupdate的详细介绍：https://reactjs.org/docs/react-component.html#componentdidupdate

代码如下

class App extends Component {
  //类似于vue中的data
  state = { date: new Date() }

  componentDidMount() {
    setInterval(() => {
      this.setState({
        date: new Date()
      })
    }, 1000)
  }

  //获取数据变动后的状态传递给componentDidUpdate
  getSnapshotBeforeUpdate(oldValue, newValue) {
    console.log(oldValue, newValue);
    return "极其罕见"
  }

  //组件更新完毕的钩子
  //prevProps是更新之前的数据，prevState是更新后的数据，snapshot是获取getSnapshotBeforeUpdate钩子传递的数据
  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log(prevProps, prevState, snapshot);
  }
  render() {
    return (
      <div className="App" >
        <h1>hello</h1>
        <input type="text" />
        <span>
          现在是：{this.state.date.toTimeString()}
          <input type="text" />
        </span>
      </div>
    );
  }
}

这个是数据更新后的状态

因为给state中的实际写的定时器，所以只有时间会发生变化，

我把hello也加进定时器中，出现的数据状态变化如下

class App extends Component {
  //类似于vue中的data
  state = {
    date: new Date(),
    hello: 'hello'
  }

  componentDidMount() {
    setInterval(() => {
      this.setState({
        date: new Date()
      })
    }, 1000)
  }

  //获取数据变动后的状态传递给componentDidUpdate
  getSnapshotBeforeUpdate(oldValue, newValue) {
    return "极其罕见"
  }

  //组件更新完毕的钩子
  //prevProps是更新之前的数据，prevState是更新后的数据，snapshot是获取getSnapshotBeforeUpdate钩子传递的数据
  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log(prevProps, prevState, snapshot);
  }
  render() {
    return (
      <div className="App" >
        <h1>{this.state.hello}</h1>
        <input type="text" />
        <span>
          现在是：{this.state.date.toTimeString()}
          <input type="text" />
        </span>
      </div>
    );
  }
}

这是我对react的初次接触，对于diff算法的认识以后会继续深入，谢谢大家观看