前置知识
React.memo
const MyComponent = React.memo(function MyComponent(props) {
/* render using props */
});
React.memo 是一个高阶组件。类似于 React.PureComponent，但是这个用于函数组件而非类组件。
如果你的函数组件每次使用相同的props来渲染相同的结果，那么你应该使用React.memo来封装它，这样就可以通过记忆一些样例的结果来提高性能。意味着 React 将跳过渲染组件，而是重用最后的渲染结果。
默认情况下之后浅比较 props 对象里面的复杂对象，如果你想控制如何比较，你也可以提供一个自定义比较函数作为第二个对象。
function MyComponent(props) {
/* render using props */
}
function areEqual(prevProps, nextProps) {
/*
return true if passing nextProps to render would return
the same result as passing prevProps to render,
otherwise return false
*/
}
export default React.memo(MyComponent, areEqual);
React.memo只存在于性能优化中。不要依赖它来“阻止”渲染，因为这会导致 bug。
useWhyDidYouUpdate
这个 hook 可以很容易的看出哪个 prop 的变化导致了组件的重新渲染。如果一个函数运行起来开销特大，并且你知道它提供相同的输入一定会得到相同的结果（纯函数），那么你可以使用 React.memo 高阶组件，正如我们下面 Counter 组件所做的一样。在这种情况下，你如果仍然看到似乎没有必要的重新渲染，你可以放入 useWhyDidYouUpdate 钩子，在 console 检查哪个 prop 的变化导致了重新渲染并可以查看它们的以前/当前值。相当酷，对吧？
import React, { useState, useEffect, useRef } from 'react';
// 让我们假装这个 组件重新渲染开销很大
// 我们使用 React.memo 封装它，但是我们发现依然存在性能问题
// 因此，我们在这里添加 useWhyDidYouUpdate 并且检查我们的 console 来发现到底发生了什么。
const Counter = React.memo(props => {
useWhyDidYouUpdate('Counter', props);
return {props.count};
});
function App() {
const [count, setCount] = useState(0);
const [userId, setUserId] = useState(0);
const counterStyle = {
fontSize: '3rem',
color: 'red'
};
return (
);
}
// Hook
function useWhyDidYouUpdate(name, props) {
// 获得一个可变的 ref 对象用于存储 props，下次 hook 运行的时候可以比较
const previousProps = useRef();
useEffect(() => {
if (previousProps.current) {
// 获取到之前的和现在的 props 所有 key。
const allKeys = Object.keys({ ...previousProps.current, ...props });
// 使用这个对象追踪 props 的变化。
const changesObj = {};;
// 迭代 keys
allKeys.forEach(key => {
if (previousProps.current[key] !== props[key]) {
// 添加到 changesObj
changesObj[key] = {
from: previousProps.current[key],
to: props[key]
};
}
});
// 如果 changesObj 不为空，就输出到 console
if (Object.keys(changesObj).length) {
console.log('[why-did-you-update]', name, changesObj);
}
}
// 最后用当前的 props 更新 previousProps 用于下次 hook 调用
previousProps.current = props;
});
}
export default App;
初始化执行流程：
- const [count, setCount] = useState(0);
- const [userId, setUserId] = useState(0);
- const counterStyle = {
fontSize: '3rem',
color: 'red'
}; - return 渲染。渲染 Counter 组件的时候会执行对应的逻辑（子组件渲染）。
const Counter = React.memo(props => {
useWhyDidYouUpdate('Counter', props);
return {props.count};
});
- 执行 useWhyDidYouUpdate('Counter', props); // props 为 { style: '...', count: '0'}
- const previousProps = useRef();
- useWhyDidYouUpdate 的 useEffect 异步执行
- previousProps.current 为空，所以 previousProps.current = props;
- 初始化流程如上所示。
点击 increment 按钮的更新流程：
- click 后调用 setCount 修改对应的 count 值
- count 的改变导致 App 重新渲染。
- const [count, setCount] = useState(0); // 跳过执行（这里我猜测 useState 语句会跳过执行，因为对应的值不可能再被初始化一次）
- const [userId, setUserId] = useState(0); // 跳过执行（这里我猜测 useState 语句会跳过执行，因为对应的值不可能再被初始化一次）
- const counterStyle = {
fontSize: '3rem',
color: 'red'
}; // 这里重新赋值了，所以引用对象发生了变化 - return 重新渲染。重新渲染 Counter 组件的时候会执行对应的逻辑（子组件重新渲染）。
- 执行 useWhyDidYouUpdate hook。
- const previousProps = useRef(); // 略过执行这里我猜测 useRef 语句会跳过执行，因为对应的值不可能再被初始化一次）
- 异步执行 useEffect。previousProps.current 的值已经存在，为 { style: '...', count: 0 }。allKeys为 ['style', 'count']，循环比较之前值和现在值是否相等，如果不等就添加到 changesObj 中。
- 最后，如果 changesObj 对象存在值的话，就把它 console 显示出来。（最后 console 的结果里面有 style 和 count，style 是因为对象重新创建发生了变化，count 是因为值发生了变化）
点击 switch user 的执行流程（执行流程和点击 increment 差不多，但是在下面我稍作一点解释）：
- 点击 switch user 按说只是改变了 userId，为什么 console 中也能看到信息显示呐（显示 style 值的 from 和 to）。原因就在于更新 userId 引用 App 重新渲染。而下面这条语句会再次执行，counterStyle 虽然值没有变化，但其实它的引用已经发生了变化。所以在 useEffect 里面判断两个对象是不相等的，并最终 console 显示出来。
const counterStyle = {
fontSize: '3rem',
color: 'red'
};