# react 的 key 值为什么那么重要，新版本 diff 是偏向算法还是策略，具体是怎么样的
参考：https://juejin.cn/post/6844903905629831176#heading-9
# react16 新特性分别有什么，起什么作用
# react 之前可以怎么进行state的监听（排除 useEffect 的依赖监听）
# react hooks 和高阶组件的理解
# 针对 react 有什么优化方案
# 除了 react 官方和 webpack 的优化，还有什么优化方案或者是注意要点
# react hooks 为什么不能在条件语句里面书写
React 为了知道每个 state 对应哪个 useState；React 通过 Hook 调用的顺序。只要 Hook 的调用顺序在多次渲染之间保持一致，React 就能正确地将内部 state 和对应的 Hook；
# react 页面为何要引入 react
本质上来说 JSX 是 React.createElement(component, props, ...children)方法的语法糖。所以我们如果使用了 JSX，我们其实就是在使用 React，所以我们就需要引入 React。
- JSX 语法的转换
如下面代码：
const title = <h1 className="title">Hello, world!</h1>
这段代码并不是合法的 js 代码，它是一种被称为 jsx 的语法扩展，通过它我们就可以很方便的在 js 代码中书写 html 片段。
本质上，jsx 是语法糖，上面这段代码会被 babel 转换成如下代码：
const title = React.createElement(
'h1',
{ className: 'title' },
'Hello, world!'
);
# setState 为何存在异步
setState 本身的执行过程是同步的，只是因为在 react 的合成事件与钩子函数中执行顺序在更新之前，所以不能直接拿到更新后的值，形成了所谓的异步；
# react 优化
# react class 组件与 function 组件之间区别
- 函数组件又太过于简陋，比如，类组件可以访问生命周期方法，函数组件不能；
- 类组件中可以定义并维护 state（状态），而函数组件不可以；
- 类组件中可以获取到实例化后的 this，并基于这个 this 做各种各样的事情，而函数组件不可以；
# React 加入 Hooks 的意义是什么？或者说一下为什么 React 要加入Hooks 这一特性？最后举例说一下 Hooks 的基本实现原理；
首先在官网中就已经明确说了引入 react hook 的的动机：
- 组件之间的逻辑状态难以复用；
虽然可以通过使用 render props 和 高阶组件来组织组件结构达到一定的复用效果；但是带来的问题也很明显，由 providers，consumers，高阶组件，render props 等其他抽象层组成的组件会形成“嵌套地狱”；Hook 使你在无需修改组件结构的情况下复用状态逻辑。
- 大型复杂的组件很难拆分；
我们的代码会经常有一些副作用；个生命周期常常包含一些不相关的逻辑。比如我们在 omponentDidMount 和 componentDidUpdate 中可能去通过 ws 去获取数据，但是需在 componentWillUnmount 中进行关闭 ws 等一些实例操作；相互关联且需要对照修改的代码被进行了拆分，而完全不相关的代码却在同一个方法中组合在一起。如此很容易产生 bug，并且导致逻辑不一致。
所以很多人就会引入状态管理库来进行将组件拆分为更小的粒度；但是，这往往会引入了很多抽象概念，需要你在不同的文件之间来回切换，使得复用变得更加困难。
- Class 语法的使用不友好；
处理 this 指向的问题；例如在元素上绑定事件，需要使用 bind 去处理 this 指向；
# hook 的基本用法
参考：https://zhuanlan.zhihu.com/p/179136243
# React 何时清除 effect？
React 会在组件卸载的时候执行清除操作。正如之前学到的，effect 在每次渲染的时候都会执行。这就是为什么 React 会在执行当前 effect 之前对上一个 effect 进行清除。 effect 的清除阶段在每次重新渲染时都会执行；