React篇

React中的key时什么。有什么作用

• 同级组件之间的信息传递：通过状态提升，将信息共同报讯在父组件中，在通过回调函数更改信息之后再用props船体给子组件；
• 跨层级组件通信：利用高级API-content上下文的方式
• Redux.React-redux等状态管理库结合异步请求处理redux-thunk,redux-saga

React合成事件机制

• React中有自己的事件系统模式，通常被称为React合成事件。之所以采用这种自己定义的合成事件，一方面时为了抹平事件再不同平台体现出来的差异性，这使得React开发者不需要自己再去关注浏览器事件兼容性问题；另一方面是为了统一管理事件，提高性能，这主要体现在React内部实现事件委托，并且记录当前事件发生的状态上；
• 事件委托，也就是我们通常提到的事件代理机制，这种机制不会把事件函数直接绑定在真实的结点上，而是把所有的事件绑定到结构的最外层，使用统一的事件监听和处理函数。
• 当组件挂载或者卸载时，只是在这个统一的事件监听器上插入或者删除一些对象；
• 当事件放生时，首先被这个统一的事件监听器处理，然后再映射表里找到真正的事件处理函数并调用。这样做简化了事件处理和回收机制。效率也有恨到的提升。
• 记录当前事件发生的状态，即记录事件执行的上下文，这便于React来处理不同事件的优先级，达到谁优先级高先处理谁的目的，这里也就实现了React的增量渲染思想，可以预防掉帧，同事达到页面更加顺滑的目的，提升用户体样。

细读setState

• setState(updater,[callback])
• class组件有什么弊端，为什么要引入hook
• 在组件之间复用逻辑很难
• 复杂组件变得难以理解
• 难以理解的class
• 引入了hook之后的函数组件发生了哪些变化
• 函数组件可以存储和改变状态值（useState, useReducer),可以执行副作用（useEffect,useLayoutEffect),还可以服用状态逻辑（自定义hook）
• 函数组件与class组件如何选择
• 出现以上缺点的情况下都适合使用函数组件，函数组件与class组件无缝对接

React性能优化方案

• 减少不惜要渲染，如用shouldCoponentUpdate,PureComponent,React.memo实现
• 数据缓存：
• useMomo缓存参数，useCallback缓存函数
• 函数，对象尽量不要使用内联形式（如context的value object,refs function)
• Route中的内联函数渲染时候使用render或者children，不要使用component，当你用compnent的时候，Router会用指定的组件和React.createElement创建一个新的[React elemet]。这意味着当你提供的是一个内联函数的时候，每次创建render都会创建。