React组件到底什么时候render啊

开发 前端
今天我们React源码交流群里有个小伙伴提出个有趣的问题,觉得自己对React运行流程理解很到位的同学,可以来看看。

 [[348658]]

今天我们React源码交流群里有个小伙伴提出个有趣的问题,觉得自己对React运行流程理解很到位的同学,可以来看看。

对于如下Demo,点击Parent组件的div,触发更新,Son组件会打印child render!么? 

  1. function Son() {  
  2.   console.log('child render!');  
  3.   return <div>Son</div> 
  4.  
  5. function Parent(props) {  
  6.   const [count, setCount] = React.useState(0);  
  7.   return (  
  8.     <div onClick={() => {setCount(count + 1)}}>  
  9.       count:{count}  
  10.       {props.children}  
  11.     </div>  
  12.   );  
  13.  
  14. function App() {  
  15.   return (  
  16.     <Parent>  
  17.       <Son/>  
  18.     </Parent>  
  19.   );  
  20.  
  21. const rootEl = document.querySelector("#root");  
  22. ReactDOM.render(<App/>, rootEl); 

在线Demo地址[1]👉

  1. 右滑显示答案:                                                                                                                                                 不会     

render需要满足的条件

React创建Fiber树时,每个组件对应的fiber都是通过如下两个逻辑之一创建的:

  •  render。即调用render函数,根据返回的JSX创建新的fiber。
  •  bailout。即满足一定条件时,React判断该组件在更新前后没有发生变化,则复用该组件在上一次更新的fiber作为本次更新的fiber。

可以看到,当命中bailout逻辑时,是不会调用render函数的。

所以,Son组件不会打印child render!是因为命中了bailout逻辑。

bailout需要满足的条件

什么情况下会进入bailout逻辑?当同时满足如下4个条件时:

1. oldProps === newProps ?

即本次更新的props(newProps)不等于上次更新的props(oldProps)。

注意这里是全等比较。

我们知道组件render会返回JSX,JSX是React.createElement的语法糖。

所以render的返回结果实际上是React.createElement的执行结果,即一个包含props属性的对象。

即使本次更新与上次更新props中每一项参数都没有变化,但是本次更新是React.createElement的执行结果,是一个全新的props引用,所以oldProps !== newProps。

如果我们使用了PureComponent或Memo,那么在判断是进入render还是bailout时,不会判断oldProps与newProps是否全等,而是会对props内每个属性进行浅比较。

2. context没有变化

即context的value没有变化。

3. workInProgress.type === current.type ?

更新前后fiber.type是否变化,比如div是否变为p。

4. !includesSomeLane(renderLanes, updateLanes) ?

当前fiber上是否存在更新,如果存在那么更新的优先级是否和本次整棵fiber树调度的优先级一致?

如果一致则进入render逻辑。

就我们的Demo来说,Parent是整棵树中唯一能触发更新的组件(通过调用setCount)。

所以Parent对应的fiber是唯一满足条件4的fiber。

Demo的详细执行逻辑

所以,Demo中Son进入bailout逻辑,一定是同时满足以上4个条件。我们一个个来看。

条件2,Demo中没有用到context,满足。

条件3,更新前后type都为Son对应的函数组件,满足。

条件4,Son本身无法触发更新,满足。

所以,重点是条件1。让我们详细来看下。

本次更新开始时,Fiber树存在如下2个fiber: 

  1. FiberRootNode  
  2.       |  
  3.   RootFiber       

其中FiberRootNode是整个应用的根节点,RootFiber是调用ReactDOM.render创建的fiber。

首先,RootFiber会进入bailout的逻辑,所以返回的App fiber和更新前是一致的。 

  1. FiberRootNode  
  2.       |  
  3.   RootFiber        
  4.       |  
  5.   App fiber 

由于App fiber是RootFiber走bailout逻辑返回的,所以对于App fiber,oldProps === newProps。并且bailout剩下3个条件也满足。

所以App fiber也会走bailout逻辑,返回Parent fiber。 

  1. FiberRootNode  
  2.       |  
  3.   RootFiber       
  4.       |  
  5.    App fiber  
  6.       |  
  7.  Parent fiber 

由于更新是Parent fiber触发的,所以他不满足条件4,会走render的逻辑。

接下来是关键

如果render返回的Son是如下形式: 

  1. <Son/> 

会编译为 

  1. React.createElement(Son, null) 

执行后返回JSX。

由于props的引用改变,oldProps !== newProps。会走render逻辑。

但是在Demo中Son是如下形式: 

  1. {props.children} 

其中,props.children是Son对应的JSX,而这里的props是App fiber走bailout逻辑后返回的。

所以Son对应的JSX与上次更新时一致,JSX中保存的props也就一致,满足条件1。

可以看到,Son满足bailout的所有条件,所以不会render。

总结

当你理解这4个条件后,对于React组件更新会有全新的认识。

不得不说,React真是太难了,打工人流下了不争气的眼泪。 

 

责任编辑:庞桂玉 来源: 前端大全
相关推荐

2020-10-25 07:49:37

React组件

2017-04-05 21:43:08

MQ互联网架构

2020-06-17 10:35:16

机器学习AI人工智能

2017-05-15 09:55:07

2020-05-12 11:25:50

MySQLES数据库

2015-07-08 15:55:01

NSStringcopystrong

2012-09-24 10:20:39

JavaScriptJS

2013-11-28 16:03:24

2021-08-26 06:54:43

Windows 11操作系统微软

2022-05-19 10:27:34

机器学习人工智能

2017-06-28 15:06:51

PythonLambda函数

2021-08-13 11:31:23

HTTP

2021-09-29 09:24:21

GCGo STW

2015-10-26 09:38:52

避免注释代码

2015-10-20 15:59:57

注释代码程序

2021-01-30 19:59:37

性能项目开源

2012-07-26 10:27:31

PHP

2015-02-01 09:45:46

2020-01-05 23:28:51

MQ消息进程

2015-03-02 14:44:48

AngularJS jQuery超越
点赞
收藏

51CTO技术栈公众号