首页 ›  文章

React生命周期更新阶段

2019-12-03

这个阶段在组件的 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 做出的改变。

原文链接:segmentfault.com

上一篇:Vue数据响应式原理代码剖析
下一篇:React setState 这样用,开发直呼内行!
相关文章

首次访问,人机识别验证

扫描下方二维码回复 1024 获取验证码,验证完毕后 永久 无须验证

操作步骤:[打开微信]->[扫描上侧二维码]->[关注 FedJavaScript 的微信] 输入 1024 获取验证码

验证码有误,请重新输入