1、调用 setState 之后发生了什么？
在代码中调用 setState 函数之后，React 会将传入的参数对象与组件当前的状态合 并，然后触发所谓的调和过程（Reconciliation）。经过调和过程，React 会以相对高效的 方式根据新的状态构建 React 元素树并且着手重新渲染整个 UI 界面。在 React 得到元素 树之后，React 会自动计算出新的树与老树的节点差异，然后根据差异对界面进行最小化重 渲染。在差异计算算法中，React 能够相对精确地知道哪些位置发生了改变以及应该如何改 变，这就保证了按需更新，而不是全部重新渲染。
2、react 生命周期函数
初始化阶段：
getDefaultProps:获取实例的默认属性
getInitialState:获取每个实例的初始化状态
componentWillMount：组件即将被装载、渲染到页面上
render:组件在这里生成虚拟的 DOM 节点
componentDidMount:组件真正在被装载之后
运行中状态：
componentWillReceiveProps:组件将要接收到属性的时候调用
shouldComponentUpdate:组件接受到新属性或者新状态的时候（可以返回 false， 接收数据后不更新，阻止 render 调用，后面的函数不会被继续执行了）
componentWillUpdate:组件即将更新不能修改属性和状态
render:组件重新描绘 componentDidUpdate:组件已经更新
销毁阶段：
componentWillUnmount:组件即将销毁
3、为什么虚拟 dom 会提高性能?
虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存，利用 dom diff 算法避免了没 有必要的 dom 操作，从而提高性能。 用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进 行比较，记录两棵树差异把 2 所记录的差异应用到步骤 1 所构建的真正的 DOM 树上，视 图就更新了。
4、react diff 原理
把树形结构按照层级分解，只比较同级元素。 给列表结构的每个单元添加唯一的 key 属性，方便比较。 React 只会匹配相同 class 的 component（这里面的 class 指的是组件的名字） 合并操作，调用 component 的 setState 方法的时候, React 将其标记为 dirty.到每一 个事件循环结束, React 检查所有标记 dirty 的 component 重新绘制. 选择性子树渲染。开发人员可以重写 shouldComponentUpdate 提高 diff 的性能。
5、React 中 refs 的作用是什么？
Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄。我们可以 为元素添加 ref 属性然后在回调函数中接受该元素在 DOM 树中的句柄，该值会作为回调函 数的第一个参数返回
6、展示组件和容器组件之间有何不同？
展示组件关心组件看起来是什么。展示专门通过 props 接受数据和回调，并且几乎不 会有自身的状态，但当展示组件拥有自身的状态时，通常也只关心 UI 状态而不是数据的状 态。 容器组件则更关心组件是如何运作的。容器组件会为展示组件或者其它容器组件提供数 据和行为(behavior)，它们会调用actions，并将其作为回调提供给展示组件。容器组件经 常是有状态的，因为它们是(其它组件的)数据源。
7、类组件和函数式组件之间有何不同？
类组件不仅允许你使用更多额外的功能，如组件自身的状态和生命周期钩子，也能使组 件直接访问 store 并维持状态 当组件仅是接收 props，并将组件自身渲染到页面时，该组件就是一个 '无状态组件 (stateless component)'，可以使用一个纯函数来创建这样的组件。这种组件也被称为哑组 件(dumb components)或展示组件
8、createElement 和 cloneElement 有什么区别？
React.createElement():JSX 语法就是用 React.createElement()来构建 React 元素 的。它接受三个参数，第一个参数可以是一个标签名。如 div、span，或者 React 组件。 第二个参数为传入的属性。第三个以及之后的参数，皆作为组件的子组件。
React.createElement(
type,
[props],
[...children]
)
React.cloneElement()与 React.createElement()相似，不同的是它传入的第一个参数 是一个 React 元素，而不是标签名或组件。新添加的属性会并入原有的属性，传入到返回 的新元素中，而旧的子元素将被替换。
React.cloneElement(
element,
[props],
[...children]
)
9、简述 flux 思想
Flux 的最大特点，就是数据的"单向流动"。 用户访问 View ，View 发出用户的 Action， Dispatcher 收到 Action，要求 Store 进行相应的更新， Store 更新后，发出一个"change"事件， View 收到"change"事件后，更新页面
10、了解 redux 么，说一下 redux
redux 是一个应用数据流框架，主要是解决了组件间状态共享的问题，原理是集中式管 理，主要有三个核心方法，action，store，reducer，工作流程是 view 调用 store 的 dispatch 接收 action 传入 store，reducer 进行 state 操作，view 通过 store 提供的 getState 获取最新的数据，flux 也是用来进行数据操作的，有四个组成部分 action， dispatch，view，store，工作流程是 view 发出一个 action，派发器接收 action，让 store 进行数据更新，更新完成以后 store 发出 change，view 接受 change 更新视图。 Redux 和 Flux 很像。主要区别在于 Flux 有多个可以改变应用状态的 store，在 Flux 中 dispatcher 被用来传递数据到注册的回调事件，但是在 redux 中只能定义一个可更新状态 的 store，redux 把 store 和 Dispatcher 合并,结构更加简单清晰
新增 state,对状态的管理更加明确，通过 redux，流程更加规范了，减少手动编码量， 提高了编码效率，同时缺点时当数据更新时有时候组件不需要，但是也要重新绘制，有些影 响效率。一般情况下，我们在构建多交互，多数据流的复杂项目应用时才会使用它们
11、什么是JSX？
JSX即JavaScript XML。一种在React组件内部构建标签的类XML语法。JSX为react.js 开发的一套语法糖，也是react.js的使用基础。React在不使用JSX的情况下一样可以工作， 然而使用JSX可以提高组件的可读性，因此推荐使用JSX。
优点：
1.允许使用熟悉的语法来定义 HTML 元素树；
2.提供更加语义化且移动的标签；
3.程序结构更容易被直观化；
4.抽象了 React Element 的创建过程；
5.可以随时掌控 HTML 标签以及生成这些标签的代码；
6.是原生的 JavaScript。
12、React Hooks是什么
Hook 是一个特殊的函数，它可以让你“钩入” React 的特性。例如，useState 是允 许你在 React 函数组件中添加 state 的 Hook。如果你在编写函数组件并意识到需要向其添 加一些 state，以前的做法是必须将其它转化为 class。现在你可以在现有的函数组件中使 用 Hook。
hooks优势：无需复杂的DOM结构，简洁易懂
他允许你在不写class的情况下操作state 和react的其他特性。hooks 只是多了一种写 组件的方法，使编写一个组件更简单更方便，同时可以自定义hook把公共的逻辑提取出 来，让逻辑在多个组件之间共享。
13、class 组件有什么不足
1.生命周期臃肿，逻辑耦合；
2.逻辑难以复用；通过继承解决，不支持多继承；通过高阶组件解决，会增加额外的组 件嵌套；通过渲染属性解决，也会增加额外组件嵌套，层级臃肿
3.class存在this指向问题；匿名函数解决，每次创建新的函数，子组件重复不必要渲 染；bind解决，需要写很多跟逻辑状态无关的代码