面试准备

1.react组件通信

父子 子父 兄弟 父后代 非关系

5种通信情况

前三种主要逻辑是state和setState传入， 都以父组件为基础修改

第四种context声明变量 createContext useContext

第五种 redux

都可以用redux

useMemo React.memo 优化性能

2.React.forwardRef(props, ref)

用于传递ref，可以在父元素控制子元素ref

a = useRef  React.createRef元素对象

a.current获取

3.HOC高阶组件

函数调用，传递一个组件，返回一个新的组件，在高阶组件中做逻辑处理

按我理解等同于vue mixin，提高复用性，但是会带来一些隐藏的问题

4.setState异步更新，如需要同步更新，setTimeout, dom原生事件中

5.类组件中setState会触发子组件更新，函数组件不一定会触发，所以需要性能优化

6.虚拟dom减少页面重绘重排，首次渲染由于多了一层虚拟dom速度比正常稍微慢点

jsx会被babel转换为React.createElement形式

首字母小写为原生标签，首字母为大写会作为组件，编译成对象

追踪都会变成ReactDom.render

8.fiber算法面试如何解答

javaScript引擎和ui引擎两个线程是互斥的 react15渲染一气呵成无法中断，如果组件太大会导致阻塞页面渲染

链表结构将渲染拆分多个可中断任务，配合优先级调度和时间切片

child sibling

底层通过双缓冲技术避免页面闪烁，链表遍历替代递归，实现可中断的深度优先搜索

1. ​Fiber 如何与浏览器渲染机制协同？​​
   • 利用 requestAnimationFrame 在浏览器重绘前提交更新，保证动画流畅。
2. ​Fiber 的优先级如何映射到浏览器事件？​​
   • 高优先级任务（如用户输入）绑定 requestAnimationFrame，低优先级任务（渲染）绑定 requestIdleCallback

9.react list key的作用，diff算法

react引入virtrual dom概念，使用diff算法对比节点信息，传统事件复杂度O(n^3)，react优化过后减少至O(n)，速度差距明显

diff算法三个层级比较

tree、componen、element

tree:只会相同层级比较，只有删除、创建操作，没有移动操作

component:同一个类组件，会继续往下diff算法运算，不是直接删除新创建

element:同一层级节点比较，每个节点对应key，插入、移动、删除

注意事项：

对于简单列表渲染不一定加了key值性能就要好，比如说简单文本遍历展示

10.react hook

react 16.8引入的新特性，

1.可以让函数组件变成有状态的组件

2.类组件this的学习成本

11.react 生命周期

在类组件中 componentDidMount componentDidUpdate componentDidUpdate

react 16.8以后 hook

useEffect

12.react渲染效率，性能优化

类组件中，父组件setState,子组件一定会改变

加入shouldComponentUpdate pureComponent React.memo(高阶组件)

1.避免使用内联函数 

onClick={(e) => {this.setState(e.xx)}} 不好

声明函数，绑定到onClick上

onClick={this.func}

2. react Fragments避免额外标记 <></>

3. 事件绑定方式

函数组件事件绑定方式

1. 直接绑定（推荐）onClilk(func) 挂载时定义，后续渲染复用；
2. 剪头函数包裹 （慎用 onClick={(e) => this.func(e, id)}）可以传递额外参数
3. ref 手动绑定 addEventListener
4. 如果需要传递参数，可以使用useCallback优化函数；但是最佳方法是使用数据属性，
   e.currentTarget.dataset.id
5. 避免render中箭头函数