P1.个人总结ReactHooks是React团队在“复用”上的最新探索。在ReactHooks出现之前，开发者一般通过mixins、高阶组件（HOC）、RenderProps等方式实现逻辑复用，但是这些方法都有一些缺点：（?表示它们并没有解决问题，分享一下这些复用的总结解决方案）mixinsHOCRenderProps数据源不清晰???命名空间冲突???ES6不支持???难以扩展??-Wrapper/callbackhell???除了逻辑复用，React团队还提出了其他问题在ReactConf2018的React中：当组件变得庞大时，生命周期分隔的复杂性在逻辑变得难以跟踪的地方使用晦涩的Class语法（不仅对人来说，对编译器来说也是如此）。比如在Component类中加载sdk时，订阅操作通常在componentDidMount中进行，取消订阅操作在componentWillUnmount中进行：{sdk.unsubscribe()}}但是随着sdk的增加，这些代码会显得很零散：etc...},componentWillUnmount(){sdk1.unsubscribe()sdk2.unsubscribe()sdk3.unsubscribe()//etc...}}在后续维护的过程中，是否有需要的sdk的用法需要改动，或者sdk相关的代码被去掉，需要在不同的生命周期中搜索ClassComponent本身也存在一些问题：必须调用super(props)，烦人的方法需要手动绑定this，更烦人的是编译层面，Class被Babel编译后，代码量剧增。因此，随着React的发展，React团队更倾向于让开发者从ClassComponent转向FunctionComponent，但原有的FunctionComponent不支持state和lifecycle，很难满足实际的开发需求。ReactHooks应运而生。官网对Hooks的介绍如下：Hooks是React16.8新增的功能。它们让您无需编写类即可使用状态和其他React功能。从没有写类的后半句，可以看出React团队对FunctionComponent的态度。Hooks的基本用法这里就不介绍了。使用FunctionComponent+Hooks的组合可以告别烦人的super和this问题，ClassComponent生命周期分裂的问题也可以通过自定义Hooks优雅的解决：//复用逻辑被自定义hooks函数封装useSDK1(){useEffect(()=>{sdk1.subscribe()return()=>sdk1.unsubscribe()},[])}functionuseSDK2(){useEffect(()=>{sdk2.subscribe()return()=>sdk2.unsubscribe()},[])}functionApp(){//使用sdkuseSDK1()useSDK2()}同时对于编译器来说，函数组件都是函数，方便编译器优化。当然，ReactHooks也有缺点：它们只能在FunctionComponent中使用hooks的使用只能在顶层使用s对于有deps的hooks，比如useEffect，useCallback等，deps一定要正确处理，否则会出问题。对于ReactHooks的缺点，Dan在文章WhyDoReactHooksRelyonCallOrder?中说：“Hooks也不是完美的。但它是我们找到的解决这些问题的最佳折衷方案。”并且针对在React中需要手动编写大量memo代码来提高性能的需求，React团队在ReactConf2021上分享了ReactForget项目，通过在编译阶段发现需要优化memo的地方补充一下，相信React团队会把hooks做的P2越来越好。面试相关React的Fiber和Hooks是面试必考点，其次是diff算法。对于Hooks，面试官一般会问Hooks先解决那些问题，可以从两个方面回答：弥补了FunctionComponent相对于ClassComponent所缺乏的状态和生命周期机制代码复用，解决了其他复用存在的问题解决方案（包装器/回调地狱，拆分生命周期）方便测试也是一个重点。如果面试官问到Hooks的缺点，你可以说说Hooks在使用上的局限性：只能在FunctionComponents中使用，只能在顶层使用。在hooks的最后，我可以补充一下，为什么会出现这些问题，React团队对Hooks设计的思考，包括React团队针对这些问题的一些优化动作，这些都会是p3的bonusitems。Reactevolution进化与进化ReactwithoutmemoReactTodayandTomorrowand90%CleanerReactWithHooks
