React组件到底何时render啊

今天咱们React源码交流群里有个小伙伴提出个有趣的问题，以为本身对React运行流程理解很到位的同窗，能够来看看。

对于以下Demo，点击Parent组件的div，触发更新，Son组件会打印child render!么？

function Son() {
 console.log('child render!');  return <div>Son</div>; }   function Parent(props) {  const [count, setCount] = React.useState(0);   return (  <div onClick={() => {setCount(count + 1)}}>  count:{count}  {props.children}  </div>  ); }   function App() {  return (  <Parent>  <Son/>  </Parent>  ); }  const rootEl = document.querySelector("#root"); ReactDOM.render(<App/>, rootEl); 复制代码

在线Demo地址

👉右滑显示答案：                                                                                                                                                 不会    
复制代码

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：

FiberRootNode
 |  RootFiber 复制代码

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

首先，RootFiber会进入bailout的逻辑，因此返回的App fiber和更新前是一致的。

FiberRootNode
 |  RootFiber  |  App fiber 复制代码

因为App fiber是RootFiber走bailout逻辑返回的，因此对于App fiber，oldProps === newProps。而且bailout剩下3个条件也知足。

因此App fiber也会走bailout逻辑，返回Parent fiber。

FiberRootNode
 |  RootFiber  |  App fiber  |  Parent fiber 复制代码

因为更新是Parent fiber触发的，因此他不知足条件4，会走render的逻辑。

接下来是关键

若是render返回的Son是以下形式：

<Son/>
复制代码

会编译为

React.createElement(Son, null)
复制代码

执行后返回JSX。

因为props的引用改变，oldProps !== newProps。会走render逻辑。

可是在Demo中Son是以下形式：

{props.children}
复制代码

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

因此Son对应的JSX与上次更新时一致，JSX中保存的props也就一致，知足条件1。

能够看到，Son知足bailout的全部条件，因此不会render。

总结

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

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

关注公众号，进源码群，和其余前端打工人一块儿成长。