博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【Under-the-hood-ReactJS-Part11】React源码解读
阅读量:6707 次
发布时间:2019-06-25

本文共 1231 字,大约阅读时间需要 4 分钟。

接上文,

React流程图:

更新组件

关于组件的更新,我们先看下代码里的注释:

对于已挂载组件的更新过程,React会首先调用componentWillReceiveProps和shouldComponentUpdate这两个方法。然后,在更新没有跳过的前提下,剩下的有关更新的生命周期方法会被调用,在这之后,DOM节点会被最终更新。默认情况下,DOM的更新会使用React中的虚拟DOM算法,有特殊需求的客户端可能需要覆盖相关实现。(‘Perform an update to a mounted component. The componentWillReceiveProps and shouldComponentUpdate methods are called, then (assuming the update isn’t skipped) the remaining update lifecycle methods are called and the DOM representation is updated. By default, this implements React’s rendering and reconciliation algorithm. Sophisticated clients may wish to override this.’)

看起来还是比较合理的一个过程。

以上过程中,我们做的第一件事就是检测props是否改变。技术上来说,当setState方法被调用后或者props发生改变后,updateComponent方法都会被调用。如果props真的发生了改变,那么生命周期方法componenttWilllReceiveProps就会被调用。之后,React会基于阻塞状态队列(我们之前设置的存放局部state的队列,在我们的例子里会像这个样子:[{message:"click state message"}])里的state重新计算nextState,当然,如果只是props发生了改变,那么state相关操作不会被执行。

下一步,React会设置shouldUpdate为true。这个也是为什么默认情况下我们不需要重写shouldComponentUpdate方法的原因,React中,组件就是默认更新的。之后,检测当前更新是否由forceUpdate更新引起的。 更新一个组件,除了更改state和props外,也是可以通过调用forceUpdate方法来实现的,但是,React官方文档里认为应该避免使用这个方法。这是因为,使用forcuUpdate是导致组件持久化更新,而shouldUpdate会被shouldComponentUpdate方法的返回值重新赋值。如果最终判断组件是不需要被更新的,React还是会设置props和state,但是会跳过更新流程的其他部分。

(未完待续)

转载地址:http://vzslo.baihongyu.com/

你可能感兴趣的文章
在IIS中启用net.tcp传输协议
查看>>
C#中利用emgucv的ImageBox()打开并显示一副图像(二)
查看>>
图-存储结构
查看>>
7.Deque的应用案例-回文检查
查看>>
寻找水王
查看>>
链表与顺序表
查看>>
数据类型转换(初学)
查看>>
matrix theory_basic results and techniques_exercise_1.2.2,1.2.3
查看>>
python IO编程-序列化
查看>>
HMTL5的 video 在IOS7中碰到的坑
查看>>
润乾在东方通tongweb5.0上部署手册
查看>>
ASP.NET Core2利用MassTransit集成RabbitMQ
查看>>
年月日
查看>>
Tomcat增加缓存
查看>>
JS---分解质因数
查看>>
递推DP UVA 590 Always on the run
查看>>
设备读写方式
查看>>
实验箱FPGA部分测试报告及A8与FPGA链接测试报告
查看>>
CC2640R2F&TI-RTOS 拿到 TI CC2640R2F 开发板 第一件事就是移植串口驱动,重定向 printf...
查看>>
使用docker 安装 GITLIB
查看>>