面试 - 18- 浅谈 React Hooks 设计模式

审题

React 不会因为 Hooks 的出现，改变组件本身的设计模式。
Hooks 不是解决组件如何复用问题，而是解决 内部逻辑抽象复用的问题。
Hooks 整体发展时间不长（2018），举例：useRef函数生成一个ref，将 count 的上一轮 state 缓存，保证每次可获取到上一轮的 state 值，也可自定义 Hooks（usePrevious）。

破题

类组件生命周期，和 函数组件 Hooks 相互转换。

1. **React.memo**和**React.useMemo**对比

React.memo是 HOC，效果类似React.pureComponent。

function Foo() {
  let appContext = useContext(AppContext);
  const theme = appContext.theme;
  return <Child theme={theme}/>
}
export default React.memo(Foo);

如上代码，若外部更新 appContext，则 Child 组件就会触发重新渲染。
阻止（更加精细化控制）渲染方案如下：

1. 分拆组件，阻止重渲染，请参考：在你写memo()之前；

2. 使用React.useMemo精细化控制渲染，如下代码所示。

   function Foo() {
   let appContext = useContext(AppContext);
   const theme = appContext.theme;
   return React.useMemo(() => {
    return <Child theme={theme}/>
   }, [theme])
   }
   export default React.memo(Foo);
   // 注意：同时用了 memo 和 useMemo

3. 常量

常量提取到函数组件外部；
若常量函数用到组件内部状态，需用useCallback缓存函数。

1. useEffect 第二个参数的判断问题

尽量用基础数据类型，避免用引用数据类型。
浅比较，引用类型，容易判断不相等。
小技巧（不推荐）：JSON 序列化引用类型的变量，如：JSON.stringify将引用类型变量变为字符串，缺点：消耗性能。
Hooks 组合
外观模式，将业务逻辑封装到各个自定义 Hooks 中。如用户信息，获取用户、增加、删除 等操作封装到一个 Hook 中。而在组件内部不放具体业务逻辑，只调用单个自定义 Hook 暴露的接口就行。