[React Hooks] 样例学习---useWhyDidYo

前置知识

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';

// 让我们假装这个 <Counter> 组件重新渲染开销很大
// 我们使用 React.memo 封装它，但是我们发现依然存在性能问题
// 因此，我们在这里添加 useWhyDidYouUpdate 并且检查我们的 console 来发现到底发生了什么。
const Counter = React.memo(props => {
    useWhyDidYouUpdate('Counter', props);
    return <div style={props.style}>{props.count}</div>;
});

function App() {
    const [count, setCount] = useState(0);
    const [userId, setUserId] = useState(0);

    const counterStyle = {
        fontSize: '3rem',
        color: 'red'
    };

    return (
        <div>
            <div className="counter">
                <Counter count={count} style={counterStyle} />
                <button onClick={() => setCount(count + 1)}>Increment</button>
            </div>
            <div className="user">
                <img src={`http://i.pravatar.cc/80?img=${userId}`} />
                <button onClick={() => setUserId(userId + 1)}>Switch User</button>
            </div>
        </div>
    );
}

// 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;

初始化执行流程：

1. const [count, setCount] = useState(0);
2. const [userId, setUserId] = useState(0);
3. const counterStyle = {
   fontSize: '3rem',
   color: 'red'
   };
4. return 渲染。渲染 Counter 组件的时候会执行对应的逻辑（子组件渲染）。

const Counter = React.memo(props => {
  useWhyDidYouUpdate('Counter', props);
  return <div style={props.style}>{props.count}</div>;
});

5. 执行 useWhyDidYouUpdate('Counter', props); // props 为 { style: '...', count: '0'}
6. const previousProps = useRef();
7. useWhyDidYouUpdate 的 useEffect 异步执行
8. previousProps.current 为空，所以 previousProps.current = props;
9. 初始化流程如上所示。

点击 increment 按钮的更新流程：

1. click 后调用 setCount 修改对应的 count 值

<button onClick={() => setCount(count + 1)}>Increment</button>

2. count 的改变导致 App 重新渲染。
3. const [count, setCount] = useState(0); // 跳过执行（这里我猜测 useState 语句会跳过执行，因为对应的值不可能再被初始化一次）
4. const [userId, setUserId] = useState(0); // 跳过执行（这里我猜测 useState 语句会跳过执行，因为对应的值不可能再被初始化一次）
5. const counterStyle = {
   fontSize: '3rem',
   color: 'red'
   }; // 这里重新赋值了，所以引用对象发生了变化
6. return 重新渲染。重新渲染 Counter 组件的时候会执行对应的逻辑（子组件重新渲染）。
7. 执行 useWhyDidYouUpdate hook。
8. const previousProps = useRef(); // 略过执行这里我猜测 useRef 语句会跳过执行，因为对应的值不可能再被初始化一次）
9. 异步执行 useEffect。previousProps.current 的值已经存在，为 { style: '...', count: 0 }。allKeys为 ['style', 'count']，循环比较之前值和现在值是否相等，如果不等就添加到 changesObj 中。
10. 最后，如果 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'
  };