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 做出的改变。

原文链接:segmentfault.com

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

相关推荐

  • 🆘 一次理解清楚,为什么使用 React useEffect 中使用 setInterval 获取的值不是最新的

    Intro 这篇文章将通过一个使用 React Hook 常遇到的问题(stale state)入手,尝试理解 Hook 的内部运行逻辑。 废话不多说,直接看示例Sandbox。

    5 天前
  • 高频数据交换下Flutter与ReactNative的对比

    (标题图片来自网络,侵删) 后端使用go写的socketio服务模拟期货行情数据,每10ms推送10条行情数据 ReactNative已经尽力优化了。 Flutter由于没fluttersock...

    2 年前
  • 高性能迷你React框架 anu1.3.0 发布

    anujs1.3.0是一款高性能Reactlike框架,是目前世界上对React16兼容最好的迷你库。 自React16起,相继推出createContext,createPortal, creat...

    2 年前
  • 高德地图 react-amap 实战

    clipboard.png(https://img.javascriptcn.com/5a33946ad8c0ea8ee7870f74f331d0c0 "clipboard.png") reacta...

    10 个月前
  • 高品质 React UI 组件

    (https://img.javascriptcn.com/cca319311c2ea59a2b5cdaa63b997828)(https://link.funteas.com?target=http...

    2 年前
  • 骚操作!在react中使用vuex

    原文地址(https://github.com/zyl1314/blog/issues/12) 前言 笔者最近在学习使用,提到react就绕不过去。redux是一个状态管理架构,被广泛用于rea...

    2 年前
  • 题目分享(持续更新)

    写出结果,并解释原因 解析知识点:点的优先级大于等号的优先级;等号从右向左执行 第一步:a=b, 所以a和b指向同一个内存地址第二步:根据知识点,点号优先级高于,所以先执行a.x,即a和b...

    2 个月前
  • 项目文档说明:react + Ant Design 的 blog-react-admin

    效果图(https://img.javascriptcn.com/734ce56fe3a37ab11e9744473f56bae1 "效果图") 前言 此 blogreactadmin 项目是基...

    2 年前
  • 项目中常用js封装(持续更新)

    我们日常开发中经常会碰到各种各样的需求,但很多需求都是重复的,因此我就把平时开发中遇到的一些常见方法做了个总结和归纳。 1、金额的格式化 比如2.00,1,222,2.00像这样格式的数据在很多电商...

    1 年前
  • 面试题:Hooks 与 React 生命周期的关系

    React 生命周期很多人都了解,但通常我们所了解的都是 单个组件 的生命周期,但针对 Hooks 组件、多个关联组件(父子组件和兄弟组件) 的生命周期又是怎么样的喃?你有思考和了解过吗,接下来我们将...

    1 年前

官方社区

扫码加入 JavaScript 社区