深入 React 函数组件的 re-render 原理及优化
共 7537字，需浏览 16分钟
·
2021-12-12 09:26
职业规划 高级前端 可视化低代码
点击上方 趣谈前端，关注公众号
回复进群，加入前端交流群
对于函数组件的 re-render，大致分为以下三种情况：
组件本身使用
useState或useReducer更新，引起的 re-render；父组件更新引起的 re-render；
组件本身使用了
useContext，context更新引起的 re-render。
下面我们将详细讨论这些情况。
PS：如无特殊说明，下面的组件都指函数组件。
1、组件本身使用 useState 或 useReducer 更新，引起的 re-render
1.1、常规使用
以计数组件为例，如下每次点击 add，都会打印 'counter render'，表示引起了 re-render ：
const Counter = () => {
console.log('counter render');
const [count, addCount ] = useState(0);
return (
<div className="counter">
<div className="counter-num">{count}div>
<button onClick={() => {addCount(count + 1)}}>addbutton>
div>
)
}
1.2、immutation state
下面我们将上面计数组件中的 state 值改成引用类型试试，如下，发现点击并不会引起 re-render：
const Counter = () => {
console.log("counter render");
const [count, addCount] = useState({ num: 0, time: Date.now() });
const clickHandler = () => {
count.num++;
count.time = Date.now();
addCount(count);
};
return (
<div className="counter">
<div className="counter-num">
{count.num}, {count.time}
div>
<button onClick={clickHandler}>addbutton>
div>
);
};
真实的原因在于，更新 state 的时候，会有一个新老 state 的比较，用的是 Object.is 进行比较，如果为 true 则直接返回不更新，源码如下（objectIs 会先判断 Object.is 是否支持，如果不支持则重新实现，eagerState 就是 oldState ）：
if (objectIs(eagerState, currentState)) {
return;
}
所以更新 state 时候要注意，state 为不可变数据，每次更新都需要一个新值才会有效。
1.3、强制更新
相比于类组件有个 forceUpdate 方法，函数组件是没有该方法的，但是其实也可以自己写一个，如下，由于 Object.is({}, {}) 总是 false，所以总能引起更新：
const [, forceUpdate] = useState({});
forceUpdate({})
说完 useState 的更新，其实 useReducer 就不用说了，因为源码里面 useState 的更新其实调用的就是 useReducer 的更新，如下：
function updateState(initialState) {
return updateReducer(basicStateReducer);
}
2、父组件更新引起子组件的 re-render
2.1、常规使用
现在稍微改造上面计数的组件，添加一个子组件 Hello，如下点击会发现，每次都会输出 "hello render"，也就是说，每次更新都引起了 Hello 的 re-render，但是其实 Hello 组件的属性根本就没有改变：
const Hello = ({ name }) => {
console.log("hello render");
return<div>hello {name}div>;
};
const App = () => {
console.log("app render");
const [count, addCount] = useState(0);
return (
<div className="app">
<Hello name="react" />
<div className="counter-num">{count}div>
<button
onClick={() => {
addCount(count + 1);
}}
>
add
button>
div>
);
};
对于这种不必要的 re-render，我们有手段可以优化，下面具体聊聊。
2.2、优化组件设计
2.2.1、将更新部分抽离成单独组件
如上，我们可以讲计数部分单独抽离成 Counter 组件，这样计数组件的更新就影响不到 Hello 组件了，如下：
const App = () => {
console.log("app render");
return (
<div className="app">
<Hello name="react" />
<Counter />
div>
);
};
2.2.2、将不需要 re-render 的部分抽离，以插槽形式渲染（children）
// App 组件预留 children 位
const App = ({ children }) => {
console.log("app render");
const [count, addCount] = useState(0);
return (
<div className="app">
{children}
<div className="counter-num">{count}div>
<button
onClick={() => {
addCount(count + 1);
}}
>
add
button>
div>
);
};
// 使用
<App>
<Hello name="react" />
App>除此以外，也可以以其他属性的方式传入组件，其本质就是传入的变量，所以也不会引起 re-render 。
2.3、React.memo
对于是否需要 re-render，类组件提供了两种方法：PureComponent 组件和 shouldComponentUpdate 生命周期方法。
对于函数组件来说，有一个 React.memo 方法，可以用来决定是否需要 re-render，如下我们将 Hello 组件 memo 化，这样点击更新数字的时候， Hello 组件是不会 re-render 的。除非 Hello 组件的 props 更新：
const Hello = React.memo(({ name }) => {
console.log("hello render");
return<div>hello {name}div>;
});
const App = () => {
console.log("app render");
const [count, addCount] = useState(0);
return (
<div className="app">
<Hello name="react" />
<div className="counter-num">{count}div>
<button
onClick={() => {
addCount(count + 1);
}}
>
add
button>
div>
);
};
memo 方法的源码定义简略如下：
exportfunction memo<Props>(
type: React$ElementType, // react 自定义组件
compare?: (oldProps: Props, newProps: Props) => boolean, // 可选的比对函数，决定是否 re-render
) {
...
const elementType = {
$$typeof: REACT_MEMO_TYPE,
type,
compare: compare === undefined ? null : compare,
};
...
return elementType;
}
memo 的关键比对逻辑如下，如果有传入 compare 函数则使用 compare 函数决定是否需要 re-render，否则使用浅比较 shallowEqual 决定是否需要 re-render：
var compare = Component.compare;
compare = compare !== null ? compare : shallowEqual;
if (compare(prevProps, nextProps) && current.ref === workInProgress.ref) {
return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
}
既然默认不传 compare 时，用的是浅对比，那么对于引用类的 props，就要注意了，尤其是事件处理的函数，如下，我们给 Hello 组件添加一个点击事件，这时我们发现每次点击计数，Hello 组件又开始 re-render 了：
// 新增 onClick 处理函数
const Hello = memo(({ name, onClick }) => {
console.log("hello render");
return<div onClick={onClick}>hello {name}div>;
});
const App = ({ children }) => {
console.log("counter render");
const [count, addCount] = useState(0);
// 新增处理函数
const clickHandler = () => {
console.log("hello click");
};
return (
<div className="counter">
<Hello name="react" onClick={clickHandler} />
<div className="counter-num">{count}div>
<button
onClick={() => {
addCount(count + 1);
}}
>
add
button>
div>
);
};
这是因为每次点击计数，都会重新定义 clickHandler 处理函数，这样 shallowEqual 浅比较发现 onClick 属性值不同，于是将会进行 re-render。
2.3.1、useCallback
这个时候我们可以使用 useCallback 将定义的函数缓存起来，如下就不会引起 re-render 了
// 新增处理函数，使用 useCallback 缓存起来
const clickHandler = useCallback(() => {
console.log("hello click");
}, []);
useCallback 的原理主要是在挂载的时候，将定义的 callback 函数及 deps 依赖挂载该 hook 的 memoizedState，当更新时，将依赖进行对比，如果依赖没变，则直接返回老的 callback 函数，否则则更新新的 callback 函数及依赖：
// 挂载时
function mountCallback(callback, deps) {
var hook = mountWorkInProgressHook();
var nextDeps = deps === undefined ? null : deps;
hook.memoizedState = [callback, nextDeps];
return callback;
}
// 更新时
function updateCallback(callback, deps) {
var hook = updateWorkInProgressHook();
var nextDeps = deps === undefined ? null : deps;
var prevState = hook.memoizedState;
if (prevState !== null) {
if (nextDeps !== null) {
var prevDeps = prevState[1];
// 如果依赖未变，则直接返回老的函数
if (areHookInputsEqual(nextDeps, prevDeps)) {
return prevState[0];
}
}
}
// 否则更新新的 callback 函数
hook.memoizedState = [callback, nextDeps];
return callback;
}
看起来好像是没问题了，但是如果我们在刚才 callback 函数中使用了 count 这个 state 值呢？
// 新增处理函数，使用 useCallback 缓存起来
// 在 callback 函数中使用 count
const clickHandler = useCallback(() => {
console.log("count: ", count);
}, []);
当我们点击了几次计数，然后再点击 Hello 组件时，会发现我们打印的 count 还是挂载时候的值，而不是最新的 count 值。其实，这都是是闭包惹得祸（具体解释可参考：Be Aware of Stale Closures when Using React Hooks）。所以为了让 callback 函数中可以使用最新的 state，我们还要将该 state 放入 deps 依赖，但是这样依赖更新了，callback 函数也将会更新，于是 Hello 组件又将会 re-render，这又回到了从前。
// 新增处理函数，使用 useCallback 缓存起来
// 在 callback 函数中使用 count
// 并将 count 添加进依赖
// 只要 count 更新，callback 函数又将更新，useCallback 就没什么用了
const clickHandler = useCallback(() => {
console.log("count: ", count);
}, [count]);
这样我们得出了一个结论：当 callback 函数需要使用 state 值时，如果是 state 值更新引起的更新，useCallback 其实是没有任何效果的。
2.3.2、useRef & useEffect
为了解决刚才的 useCallback 的闭包问题，我们换一个方式，引入 useRef 和 useEffect 来解决该问题：
const App = ({ children }) => {
console.log("counter render");
const [count, addCount] = useState(0);
// 1、创建一个 countRef
const countRef = useRef(count);
// 2、依赖改成 countRef
// 浅对比 countRef 时，将不会引起 callback 函数更新
// callback 函数又中可以读取到 countRef.current 值，即 count 的最新值
const clickHandler = useCallback(() => {
console.log("count: ", countRef.current);
}, [countRef]);
// 3、当 count 更新时，更新 countRef 的值
useEffect(() => {
countRef.current = count;
}, [count]);
return (
<div className="counter">
<Hello name="react" onClick={clickHandler} />
<div className="counter-num">{count}div>
<button
onClick={() => {
addCount(count + 1);
}}
>
add
button>
div>
);
};
该方案总结如下：
通过
useRef来保存变化的值；通过
useEffect来更新变化的值；通过
useCallback来返回固定的 callback。
useRef 保存值的原理如下：
// 挂载 ref
function mountRef(initialValue) {
var hook = mountWorkInProgressHook();
// 创建一个 ref 对象，将值挂在 current 属性上
var ref = {
current: initialValue
};
{
Object.seal(ref);
}
// 将 ref 挂到 hook 的 memoizedState 属性上，并返回
hook.memoizedState = ref;
return ref;
}
// 更新 ref
function updateRef(initialValue) {
var hook = updateWorkInProgressHook();
return hook.memoizedState; // 直接返回 ref
}
PS：注意不要跟 hooks API 中的 React.useMemo 搞混，这是两个完全不一样的东西。
3、context 更新，引起的 re-render
其实关于 context，我们平时都有在用，如 react-redux，react-router 都运用了 context 来进行状态管理。
其涉及内容比较多也比较复杂，一时半会也说不清，这里就直接推荐一篇文章吧：React Context 源码浅析。
参考资料
react 最新文档： managing state
紧追技术前沿，深挖专业领域
扫码关注我们吧！