React

react 中的 key 的作用

Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。

你对虚拟 dom 和 diff 算法的理解，实现 render 函数

虚拟 DOM 本质上是 JavaScript 对象,是对真实 DOM 的抽象表现。 状态变更时，记录新树和旧树的差异 最后把差异更新到真正的 dom 中 render 函数:
根据 tagName 生成父标签,读取 props，设置属性，如果有 content，设置 innerHtml 或 innerText,
如果存在子元素，遍历子元素递归调用 render 方法，将生成的子元素依次添加到父元素中，并返回根元素。

React 组件之间通信方式

1. 父子组件，父->子用 props，子->用 callback
2. 非父子组件，用发布订阅模式的 event 模块
3. 项目负责用 redux 全局状态管理库
4. Content API

React 生命周期函数

挂在阶段

constructor->getDerivedStateFromProps->render->componentDidMount

更新阶段

getDerivedStateFromProps->shouldComponentUpdate->render->getSnapshotBeforeUpdate->componentDidUpdate

卸载阶段

componentWillUnmount

错误处理

getDerivedStateFromError
componentDidCatch

react 性能优化

1. return null 而不是 css 的属性来控制显示和隐藏，尽量减少 dom。
2. props 和 state 扁平化，减少 shouldComponentUpdate 的比较负担
3. 避免使用内敛函数
4. 去除不必要的 div，用 react.fragment 组织
5. 懒加载组件。
6. 服务端渲染

react 中绑定 this 的方式

bind 和箭头函数

对 fiber 的理解

React Fiber 是一种基于浏览器的单线程调度算法.

setState 是同步还是异步的

1. setState 只在合成事件和钩子函数中是“异步”的，在原生事件和 setTimeout 中都是同步的。
2. setState 的“异步”并不是说内部由异步代码实现，其实本身执行的过程和代码都是同步的，只是合成事件和钩子函数的调用顺序在更新之前，导致在合成事件和钩子函数中没法立马拿到更新后的值，形式了所谓的“异步”，当然可以通过第二个参数 setState(partialState, callback) 中的 callback 拿到更新后的结果。
3. setState 的批量更新优化也是建立在“异步”（合成事件、钩子函数）之上的，在原生事件和 setTimeout 中不会批量更新，在“异步”中如果对同一个值进行多次 setState ， setState 的批量更新策略会对其进行覆盖，取最后一次的执行，如果是同时 setState 多个不同的值，在更新时会对其进行合并批量更新。

为什么废除了 3 个生命周期函数。

被废弃的三个函数都是在 render 之前，因为 fiber 的出现，很可能因为高优先级任务的出现打断现有任务导致它们被执行多次。
V16.0 之后 React 更新了其渲染机制，是通过异步的方式进行渲染的，在 render 函数之前的所有函数都有可能被执行多次。

具体原因可看：https://zhuanlan.zhihu.com/p/150929928

react hook

用动画和实战打开 React Hooks（一）：useState 和 useEffecthttps://juejin.cn/post/6844904127110053895
用动画和实战打开 React Hooks（二）：自定义 Hook 和 useCallbackhttps://juejin.cn/post/6844904132164190221
用动画和实战打开 React Hooks（三）：useReducer 和 useContexthttps://juejin.cn/post/6844904149746728973

为什么不能在条件语句中写 hook

HOC 和 hook 的区别

hoc 能复用逻辑和视图，hook 只能复用逻辑。