react高级知识

Posted 2022-03-30 我是格鲁特

一、React Hook要解决的问题

1.可以在函数组件中使用state和生命周期

2.解决state变更逻辑的可复用

3.解决class组件一个业务逻辑分散在不同生命周期，一个生命周期包含不同业务逻辑的问题

 

二、React性能优化关键点

减少render方法的调用,在shouldComponentUpdate里判断props或state是否发生了改变，或者继承自PureComponent

保持稳定的dom结构，尽量避免dom节点跨层级移动操作

使用css来隐藏节点，而不是真的移除或添加DOM节点

如果有多个子或孙组件需要使用同一个state,此时应使用redux,而不是将公共的state移到祖先组件中，否则组件层次太深的话，在祖先组件setState会导致无数个子孙组件的render方法再次被调用

 

三、ReactDom Diff算法

dom diff算法详解

若采用常规的树比较方法，时间复杂度是O(n^3)，React基于一些假设，将时间复杂度变为O(n)，具体来说，有两条：

1.两个不同类型的元素，生成的树肯定是不同的，当某一层级两个元素的类型不同，就直接生成该节点及子树，没有必要再递归比较了。

2.开发者可以通过指定key来告诉react，哪些子元素是稳定的。

如果直接在某个节点后新增子节点，则比较起来开销相对较小

<ul>
  <li>first</li>
  <li>second</li>
</ul>

<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ul>

React 会先匹配两个 <li>first</li> 对应的树，然后匹配第二个元素 <li>second</li> 对应的树，最后插入第三个元素的 <li>third</li> 树。

如果简单实现的话，那么在列表头部插入会很影响性能，那么更变开销会比较大。比如：

<ul>
  <li>Duke</li>
  <li>Villanova</li>
</ul>

<ul>
  <li>Connecticut</li>
  <li>Duke</li>
  <li>Villanova</li>
</ul>

React 会针对每个子元素 mutate 而不是保持相同的 <li>Duke</li> 和 <li>Villanova</li> 子树完成。这种情况下的低效可能会带来性能问题。

为了解决以上问题，React 支持 key 属性。当子元素拥有 key 时，React 使用 key 来匹配原有树上的子元素以及最新树上的子元素。以下例子在新增 key 之后使得之前的低效转换变得高效：

<ul>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>

<ul>
  <li key="2014">Connecticut</li>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>

现在 React 知道只有带着 \'2014\' key 的元素是新元素，带着 \'2015\' 以及 \'2016\' key 的元素仅仅移动了