关于前端:关于-React-Hooks

P1. 集体总结

React Hooks 是 React 团队在“复用”上最新的摸索，在 React Hooks 呈现之前，开发者个别通过 mixins，高阶组件（HOC），Render Props 等形式进行逻辑复用，但这些办法都有一些毛病：（❌示意它们没有解决的问题，分享一个我对这些复用计划的总结）

除了逻辑复用形式，React 团队在 React Conf 2018 上还提出了过后 React 存在的其余问题：

1. 当组件变得微小时，被生命周期宰割的复用逻辑变得难以追踪
2. 艰涩的 Class 语法（不仅对人，对编译器来说也是）

举个例子，在 Class Component 中加载 sdk，通常会在 componentDidMount 中做订阅操作，在 componentWillUnmount 中做勾销订阅操作：

class App extends React.Component {componentDidMount() {sdk.subscribe()
    },
    componentWillUnmount() {sdk.unsubscribe()
    }
}

但随着 sdk 的增多，这些代码就会显得十分割裂：

class App extends React.Component {componentDidMount() {sdk1.subscribe()
        sdk2.subscribe()
        sdk3.subscribe()
        // etc...
    },
    componentWillUnmount() {sdk1.unsubscribe()
        sdk2.unsubscribe()
        sdk3.unsubscribe()
        // etc...
    }
}

后续保护的过程中，无论是有某个 sdk 的用法须要改变，还是去除 sdk 相干代码，都要在不同生命周期中查找

Class Component 本身也有一些问题：

1. 必须调用 super(props)，很烦
2. 办法须要手动 bind this，更烦
3. 在编译层面，Class 在 Babel 编译后代码量剧增

因而随着 React 的倒退，React 团队更偏向于让开发者 从 Class Component 转向 Function Component，不过起初的 Function Component 不反对 state，也不反对生命周期，很难满足理论的开发需要，React Hooks 应运而生

官网对 Hooks 的介绍如下：

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. 从后半句的 without writing a class 多少能够看出 React 团队对 Function Component 的态度

Hooks 的根本用法这里不多介绍，应用 Function Component + Hooks 的组合能够辞别烦人的 super 和 this 问题，而且对于 Class Component 生命周期割裂问题，也能够通过自定义 Hook 优雅解决：

// 复用逻辑通过自定义 hook 封装
function useSDK1() {useEffect(() => {sdk1.subscribe()

        return () => sdk1.unsubscribe()
    }, [])
}

function useSDK2() {useEffect(() => {sdk2.subscribe()

        return () => sdk2.unsubscribe()
    }, [])
}

function App() {
    // use sdk
    useSDK1()
    useSDK2()}

同时对于编译器来说，函数组件都是函数，不便编译器优化

当然 React Hooks 也有毛病：

1. 只能在 Function Component 中应用
2. 只能在顶层应用 hooks
3. 对于有 deps 的 hook，比方 useEffect, useCallback 等，必须正确处理 deps，否则会呈现问题

对于 React Hooks 的毛病，Dan 在 Why Do React Hooks Rely on Call Order? 一文中示意：“Hooks 也不是完满的，但它是咱们发现的能解决这些问题的最佳折衷方案”。而且针对 React 须要手动写大量 memo 代码晋升性能的问题，React 团队在 React Conf 2021 上分享了 React Forget 我的项目，通过在编译阶段发现须要优化的中央，主动增加 memo，置信 React 团队会让 hooks 越来越好

P2. 面试相干

React 的 Fiber 和 Hooks 是面试中必考的点，diff 算法紧随其后。针对 Hooks，面试官个别会先问 Hooks 解决了那些问题，能够从两个方面答复：

1. 补救了 Function Component 相较 Class Component 短少的 state 和 lifecycle 机制
2. 代码复用方面，解决了其余复用计划存在的问题（wrapper/callback hell，生命周期割裂）
3. 不便测试也是一个点，能够提一下

如果面试官问 Hooks 有哪些毛病，能够说一下 Hooks 在应用上的限度：

1. 只能在 Function Component 中应用
2. 只能在顶层应用 hooks
   最初能够再补充一下，为什么会有这些问题，React 团队在 Hooks 设计上的思考，包含针对这些问题 React 团队的一些优化动作，这些都会是加分项

P3. 参考资料

• React 进化进化再进化
• React without memo
• React Today and Tomorrow and 90% Cleaner React With Hooks