javascript - React Fx.render 在 Diffing 算法中的性能

Question

我正在谈论reactJS中的协调

我阅读了 React Documentation 上的这一部分，react 说 -> 当比较两棵树时，React 首先比较两个根元素。根据根元素的类型，行为会有所不同。

您可以阅读本节( https://reactjs.org/docs/reconciliation.html#the-diffing-algorithm )

现在为了检查这一点，我创建一个 codePen 并为组件中的渲染功能实现两个树节点元素，并创建一个用于在之间切换的按钮标签

一个渲染函数具有树节点根的 DIV 标记

render() { 
   return(<div> <h1> A element </h1> </div> );
 }

另一个是SPAN标签

render() { 
   return(<span> <h1> B element </h1> </span> );
 }

在这种情况下使用react(我在 React 文档中读到)，当组件更新时 ||改变 State ，React 会拆除旧树并从头开始构建新树。当拆除一棵树时，旧的 DOM 节点将被销毁此生命周期方法 fire

componentWillMount()
componentDidMount()
componentWillUnmount()

最后一种方法发生是因为拆除树并且树节点被破坏

现在我创建了这个代码笔并在这个函数触发时登录控制台我使用不同的根元素为渲染方法切换状态和更新组件，但只是触发了这个方法=> componentWillUpdate()

为什么？请告诉我，并帮助我了解此性能案例或给我一些链接或文章，谢谢

此地址中的代码。请检查控制台https://codepen.io/hamidrezanikoonia/pen/QmapEV?editors=1111

Answer 1

对于这种情况，例如，当您在渲染中有自定义组件，并且您的自定义组件用根元素包装时

<div> 
    <MyComponent />
</div>

另一个是

<span>
  <MyComponent />
</span>

现在如果你在里面设置这个生命周期方法您可以看到何时更改状态并更新您的父组件

   componentWillUnmount() 

发生