首页>国内 > 正文

当前资讯!浅谈 React 函数组件性能优化手段

2022-09-01 08:43:58来源:稀土掘金

刚好最近在编写一个业务需求,为了近一步对更新动作做到更优的性能优化,对组件的重渲染触发机制进行了研究和学习,接下来通过本文来介绍这一过程。


【资料图】

读完本文,你将掌握函数组件的三个层面优化:

React.memo,决定函数组件是否进行重渲染;React.useMemo,在函数组件重渲染之后,决定「变量」是否会重新计算;React.useCallback,在函数组件重渲染之后,决定「函数本身」是否会重新创建;

小彩蛋:如果想快速编写 React DEMO,你只需要一个 HTML 文件即可。

  <script crossorigin src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>  <script crossorigin src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>  <script src="http://static.runoob.com/assets/react/browser.min.js"></script>  
<script type="text/babel"> function App() { return (
App
); } ReactDOM.render(, document.querySelector("#root")); </script>
一、思考题

我们先来看一个示例,当点击 Parent/div 触发更新后,Child 组件会进行重渲染并打印 Child render! 吗?

// 示例1function Child() {  console.log("Child render!");  return 
Child
;}function Parent(props) { const [count, setCount] = React.useState(0); return (
{setCount(count + 1)}}> count:{count} {props.children}
);}function App() { return ( );}ReactDOM.render(, document.querySelector("#root"));

再看一个示例,将 ​ 组件的调用位置进行更换。当点击 Parent/div 触发更新后,Child 组件会进行重渲染并打印 Child render! 吗?

// 示例2function Child() {  console.log("Child render!");  return 
Child
;}function Parent(props) { const [count, setCount] = React.useState(0); return (
{setCount(count + 1)}}> count:{count}
);}function App() { return ;}ReactDOM.render(, document.querySelector("#root"));

两者的区别在于 Child​ 组件在 Parent 组件中使用的方式不同。而多数情况我们会使用「示例2」的方式。

答案在这里公布一下:

示例1,Parent 的每次更新,Child 组件不会进行重渲染,不会有打印输出;示例2,Parent 的每次更新,Child 组件会进行重渲染,且有打印输出。

可能你会困惑,仅仅是组件的注册位置不同,得到的结果却不相同,我们接着往下看寻找原因。

二、组件不进行重渲染的条件

在更新场景下,以「函数组件」为例,在源码层面作为一个 Fiber 节点进入 Reconciler/beginWork 阶段「查找更新」时会有两个选择:

组件不满足更新条件,进入bailoutOnAlreadyFinishedWork 复用 current Fiber 信息,组件不会进行重渲染;组件自身存在更新(内部 setState)或所依赖的 props 值发生变化等,组件进行重渲染。

对于示例1,其实就是满足 bailout 的条件,从而跳过了更新。当一个 Fiber 同时满足以下 4 个条件时,会跳过更新。

oldProps === newProps,第一个条件是最新的 newProps 要和上一次的 oldProps 相同,注意这里使用的是全等,props 结构为对象,比较的是引用地址;!hasContextChanged(),context value 没有发生变化;workInProgress.type === current.type,更新前后 Fiber 节点类型没有发生变化(如:div 没有变成 p);!includesSomeLane(renderLanes, updateLanes),当满足上面三个条件后,会判断 Fiber 本身是否存在更新(如内部 setState)。

若同时满足以上 4 个条件,组件将会跳过更新,不进行重渲染。在源码中判断逻辑如下:

function beginWork(current, workInProgress, renderLanes) {  if (current !== null) {    var oldProps = current.memoizedProps;    var newProps = workInProgress.pendingProps;    // 满足前三个条件    if (oldProps !== newProps || hasContextChanged() || (workInProgress.type !== current.type)) {      didReceiveUpdate = true;    } else if (!includesSomeLane(renderLanes, updateLanes)) {      ...      // 满足第四个条件      return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);    }  }  ...}

现在,我们对比一下两个示例的差异出现在了哪里。

示例中我们没有使用context,排除条件 2;更新前后,Child Fiber workInProgress.type​ 依旧是Child() 本身,排除条件 3;更新动作来自 Parent 中,Child 组件内部没有更新动作,所以排除条件 4;那现在可以确定,问题发生在oldProps !== newProps。

我们知道,在 React 中,JSX 语法经过 babel​ 编译后会变成 React.createElement​ 函数调用,你可以在 babel repl 在线平台​ 试一试,对于 ,编译后的结果如下:

而 React.createElement(Child, null)​ 经过执行后,会返回一个全新的具有 $$typeof: Symbol(react.element)​ 属性对象,其中 props 会被赋予一个新的对象地址,如图所示:

那么此时对于 Child 组件,尽管 props 更新前后看上去没有任何变化,但源码中使用 oldProps === newProps 比较的是对象引用地址,故无法满足这一条件。

对于示例一,Child​ 的定义在 App​ 组件中,App 组件进入了 bailout​ 没有进行重渲染,所以不会重新执行 React.createElement(Child, null) 去返回新 props 对象;

而对于示例二,Child​ 的定义在 Parent​ 组件中,Parent 本身存在更新,经过重渲染后会执行 React.createElement(Child, null)​,从而导致 Child 前后 props 不一致带来的意外重渲染。

而我们大多数情况下使用组件都采用「示例二」方式,有没有办法避免 props 未发生变化而带来的意外更新呢?React.memo 可以帮助我们解决。

三、React.memo1. 概念

React.memo 是一个高阶组件。它与 React.PureComponent 非常相似,作为「性能优化」的方式存在。但只适用于函数组件,而不适用 class 组件。

通常,父组件发生一次更新重渲染,即使子组件所依赖的 Props 没有发生变化,它仍旧会被 re-render 重渲染。

当使用 React.memo 包裹函数组件后,它默认会对 Props 进行浅层比较来跳过渲染直接复用最近一次渲染的结果。

如果你想要控制对比过程,可通过自定义比较函数 areEqual(第二个参数传入)来实现。

function MyComponent(props) {  /* 使用 props 渲染 */}function areEqual(prevProps, nextProps) {  /*  如果把 nextProps 传入 render 方法的返回结果与  将 prevProps 传入 render 方法的返回结果一致则返回 true,  否则返回 false  */}export default React.memo(MyComponent, areEqual);

注意:与 class 组件中 shouldComponentUpdate() 方法不同的是,如果 props 相等,areEqual 会返回 true;如果 props 不相等,则返回 false。这与 shouldComponentUpdate 方法的返回值相反。

下面我们从源码层面了解具体实现。

2. 函数体实现

在源码位置 react/src/ReactMemo.js 下,我们可以看到 memo 函数体代码实现。

let REACT_MEMO_TYPE = symbolFor("react.memo");export function memo(type: React$ElementType, compare?: (oldProps: Props, newProps: Props) => boolean) {  const elementType = {    $$typeof: REACT_MEMO_TYPE,    type,    compare: compare === undefined ? null : compare,  };  return elementType;}

memo 接收一个经过 JSX 编译后的函数组件 ReactElement 对象,将其保存在 type 属性上。并且它的返回值可以作为一个组件方式去使用,假如我们的示例如下:

function Child() {  console.log("child render.");  return 
Child
}const MemoChild = React.memo(Child);function App() { const [count, setCount] = React.useState(0); return (
setCount(count + 1)}>Hello World.
);}const rootEl = document.querySelector("#root");ReactDOM.render(, rootEl);

​ 经过 JSX 编译后的 ReactElement​ 对象结构如下,下文简称 MemoReactElement:

{  "$$typeof": Symbol(react.element)  "type": {    "$$typeof": Symbol(react.memo),    "compare": null,    "type": Child(),  },  "key": null,  "ref": null,  "props": {},  "_owner": null,  "_store": {}}

ReactElement​ 处理成 Fiber​ 节点的时机是在 Reconciler/beginWork​ 阶段。下面,我们分别从「初渲染」和「更新渲染」两类场景看看 React.memo​ 如何渲染 Child 组件。

3. 初渲染

memo​ 的处理主要发生在 Reconcile/beginWork 阶段,它会拿到包裹的函数组件去调用执行。

对于初渲染,首先会为 MemoReactElement​ 创建 Fiber​ 节点,并且设置 Fiber.tag 类型为 14(MemoComponent)​,然后让 Memo Fiber​ 进入 Reconcile/beginWork 去命中 case = MemoComponent​ 处理 Child 组件。

在处理过程中,先从 Fiber.type.type​ 中取出所包裹的函数组件(本例是 Child​)去执行渲染;当没有传递第二参数 compare​ 时,会将 Fiber.tag​ 标记为 15(SimpleMemoComponent)​,在更新渲染时进入 beginWork,则会命中 SimpleMemoComponent case。

// 核心代码如下:function updateMemoComponent(current, workInProgress, nextProps, updateLanes, renderLanes) {  const Component = workInProgress.type; // React.memo() 执行后返回的对象  const type = Component.type; // Child()"  workInProgress.tag = SimpleMemoComponent; // 15  workInProgress.type = type;  // 执行 Child() 函数组件  return updateFunctionComponent(current, workInProgress, type, nextProps, renderLanes);}
4. 更新阶段

在点击 span 标签在 App​ 组件内触发一次更新后,会重新进行 render 对 ​ 执行 React.createElement()​,其中 props 返回了新的引用地址,因此在 beginWork​ 中,并不会命中 bailoutOnAlreadyFinishedWork。

function beginWork(current, workInProgress, renderLanes) {  if (current !== null) {    var oldProps = current.memoizedProps;    var newProps = workInProgress.pendingProps;    if (oldProps !== newProps || hasContextChanged() || (workInProgress.type !== current.type )) {      // 命中这里      didReceiveUpdate = true;    }    ...  }  // 匹配到 case SimpleMemoComponent  switch (workInProgress.tag) {    case SimpleMemoComponent:      return updateSimpleMemoComponent(current, workInProgress, workInProgress.type, workInProgress.pendingProps, updateLanes, renderLanes);    ...  }}

虽然没有直接命中 bailout​ 去跳过更新,但是在 updateSimpleMemoComponent​ 通过 compare​ 对比 props,若 props 没有发生变化,则进入 bailout 跳过更新。

function updateSimpleMemoComponent(current, workInProgress, Component, nextProps, updateLanes, renderLanes) {  if (current !== null) {    var prevProps = current.memoizedProps;    var compare = Component.compare; // 外部传递的比较函数    compare = compare !== null ? compare : shallowEqual;    if (compare(prevProps, nextProps) && current.ref === workInProgress.ref && (workInProgress.type === current.type )) {      didReceiveUpdate = false;      if (!includesSomeLane(renderLanes, updateLanes)) {        // 若 props 之间没有变化,且组件本身没有更新,进入这里,跳过更新        workInProgress.lanes = current.lanes;        return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);      } else if ((current.flags & ForceUpdateForLegacySuspense) !== NoFlags) {        didReceiveUpdate = true;      }    }  }  // 若 props 发生变化,对 Child 进行重渲染  return updateFunctionComponent(current, workInProgress, Component, nextProps, renderLanes);}

这就是 React.memo​ 在 props​ 层面对函数组件的优化原理。默认提供的复杂对象比较函数 shallowEqual 在源码中的实现具体如下:

function shallowEqual(objA, objB) {  if (objectIs(objA, objB)) {    return true;  }  if (typeof objA !== "object" || objA === null || typeof objB !== "object" || objB === null) {    return false;  }  var keysA = Object.keys(objA);  var keysB = Object.keys(objB);  if (keysA.length !== keysB.length) {    return false;  }  for (var i = 0; i < keysA.length; i++) {    if (!hasOwnProperty$2.call(objB, keysA[i]) || !objectIs(objA[keysA[i]], objB[keysA[i]])) {      return false;    }  }  return true;}
四、React.useMemo

React.memo 优化方向是避免函数组件被重新调用;

React.useMemo 则是在函数组件被调用后,在它依赖项没有变化的情况下,不去执行复杂逻辑去计算新的变量值。

我们来看看官方文档给出的概念:

useMemo,返回一个 memoized 值。把“创建”函数和依赖项数组作为参数传入 useMemo,它仅会在某个依赖项改变时才重新计算 memoized 值。这种优化有助于避免在每次渲染时都进行高开销的计算。如果没有提供依赖项数组,useMemo 在每次渲染时都会计算新的值。

代码示例:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

useMemo 对比依赖项变化的逻辑,在源码中的实现也比较容易理解(mount 和 update 实现不同):

// mount 阶段function mountMemo(  nextCreate: () => T,  deps: Array | void | null,): T {  // 创建并返回当前hook  const hook = mountWorkInProgressHook();  const nextDeps = deps === undefined ? null : deps;  // 计算 value  const nextValue = nextCreate();  // 将 value 与 deps 保存在 hook.memoizedState(更新阶段比较差异时会使用)  hook.memoizedState = [nextValue, nextDeps];  return nextValue;}// update 阶段function updateMemo(  nextCreate: () => T,  deps: Array | void | null,): T {  // 获取当前 hook  const hook = updateWorkInProgressHook();  const nextDeps = deps === undefined ? null : deps;  const prevState = hook.memoizedState;  if (prevState !== null) {    if (nextDeps !== null) {      const prevDeps: Array | null = prevState[1];      // 判断 update 前后 deps 是否变化      if (areHookInputsEqual(nextDeps, prevDeps)) {        // 未变化        return prevState[0];      }    }  }  // 变化,重新计算 value  const nextValue = nextCreate();  hook.memoizedState = [nextValue, nextDeps];  return nextValue;}

可见,React.memo​ 和 useMemo 针对函数组件的性能优化的「方向」有所不同,按需选择两者去进行性能优化。

五、useCallback

当然,除此之外,useCallback 也是一种优化手段。

与 useMemo​ 类似,两者都接收一个 callback,唯一区别是 useCallback​ 用于优化缓存这个 callback「函数」本身,useMemo 用于优化缓存「变量」,即 callback 函数的执行结果。

const memoizedCallback = useCallback(  () => {    doSomething(a, b);  },  [a, b],);

useCallback(fn, deps)​相当于useMemo(() => fn, deps)。在源码中实现如下:

// mount 阶段function mountCallback(callback: T, deps: Array | void | null): T {  // 创建并返回当前 hook  const hook = mountWorkInProgressHook();  const nextDeps = deps === undefined ? null : deps;  // 将 callback 与 deps 保存在 hook.memoizedState  hook.memoizedState = [callback, nextDeps];  return callback;}// update 阶段function updateCallback(callback: T, deps: Array | void | null): T {  // 返回当前 hook  const hook = updateWorkInProgressHook();  const nextDeps = deps === undefined ? null : deps;  const prevState = hook.memoizedState;  if (prevState !== null) {    if (nextDeps !== null) {      const prevDeps: Array | null = prevState[1];      // 判断 update 前后 deps 是否变化      if (areHookInputsEqual(nextDeps, prevDeps)) {        // 未变化        return prevState[0];      }    }  }  // 变化,将新的 callback 作为 value  hook.memoizedState = [callback, nextDeps];  return callback;}

关键词: 发生变化 比较函数 作为一个 打印输出

相关新闻

Copyright 2015-2020   三好网  版权所有