React生命周期更新阶段

这个阶段在组件的 state 或者 props 改变的时候发生。
当组件被渲染的时候实际上是得到了一个 react 元素，这个元素更新了虚拟DOM，react 会拿新的虚拟DOM 和旧的虚拟DOM进行比较，这就是为何 react 不是直接更新页面，而是在内存中比较两个对象。内存中有新旧两个虚拟DOM，react 会意识到什么部分修改了，然后再有针对性的更新真实DOM.
我们在counter中新增一个生命周期函数componentDidUpdate，这个方法在组价被更新之后调用，也就是说有新的 state 或者 props 变化时。我们可以将新的 state 或者 props 与旧的比较，如果有变化，我们可以重新通过Ajax来向服务器取得数据。如果没有变化，也许就不用消耗一个Ajax访问的资源。这是进阶的技巧。

componentDidUpdate(prevProps, prevState) {

        console.log('prevProps',prevProps);
        console.log('prevState',prevState);
        if(prevProps.counter.value !=   this.props.counter.value) {
            // Ajax call and get new data from the server
        }
}

所以，我们可以这样，如果旧的 props 的 counters 的 value 的值，与现在的 props 的 counter 对象的 value 值不同，也许我们可以进行一个新的Ajax请求，从服务器获取数据。但是，如果value并没有变化，就不用向服务器再次请求了。
也许这段代码在这个购物车例子里好像没有意义，但是，使用这个钩子函数componentDidUpdate，我们可以决定何时进行 Ajax 请求。去获取针对新的 props 和 state 做出的改变。

作者：娜娜

原文地址：https://segmentfault.com/a/1190000021178678

喜欢 0