当你调用 SetState 的时候，发生了什么事？
答案:
将传递给 setState 的对象合并到组件的当前状态，这将启动一个和解的过程，构建一个新的 react 元素树，与上一个元素树进行对比（ diff ），从而进行最小化的重渲染
.React 项目用过什么脚手架 （本题是开放性题目)
答案:
creat-react-app Yeoman 等
解释:
原理回答用webpack loader Plugin插件可以实现
什么时候用类组件Class Component,或函数组件Functi
答案:
如果您的组件具有状态( state ) 或 生命周期方法，请使用 Class 组件。否则，使用功能组件
.React 中 Keys 的作用是什么？
答案:
Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。
render () {
return (
<ul>
{this.state.todoItems.map(({item, key}) => {
return <li key={key}>{item}</li>
})}
</ul>
)
}
- 在开发过程中，我们需要保证某个元素的 key 在其同级元素中具有唯一性。在 React Diff 算法中 React 会借助元素的 Key 值来判断该元素是新近创建的还是被移动而来的元素，从而减少不必要的元素重渲染。此外，React 还需要借助 Key 值来判断元素与本地状态的关联关系，因此我们绝不可忽视转换函数中 Key 的重要性。
React 优势
答案:
- 1、React 速度很快：它并不直接对 DOM 进行操作，引入了一个叫做虚拟 DOM 的概念，安插在 javascript 逻辑和实际的 DOM 之间，性能好。
- 2、跨浏览器兼容：虚拟 DOM 帮助我们解决了跨浏览器问题，它为我们提供了标准化的 API，甚至在 IE8 中都是没问题的。
- 3、一切都是 component：代码更加模块化，重用代码更容易，可维护性高。
- 4、单向数据流：Flux 是一个用于在 JavaScript 应用中创建单向数据层的架构，它随着 React 视图库的开发而被 Facebook 概念化。
- 5、同构、纯粹的 javascript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是 JavaScript 的执行，预渲染你的应用有助于搜索引擎优化。
- 6、兼容性好：比如使用 RequireJS 来加载和打包，而 Browserify 和 Webpack 适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。
React Diff 原理（常考，大厂必考）
答案:
- 把树形结构按照层级分解，只比较同级元素。
- 给列表结构的每个单元添加唯一的 key 属性，方便比较。
- React 只会匹配相同 class 的 component（这里面的 class 指的是组件的名字） 合并操作，调用 component 的 setState 方法的时候, React 将其标记为 dirty.
到每一个事件循环结束, React 检查所有标记 dirty 的 component 重新绘制. 选择性子树渲染。开发人员可以重写 shouldComponentUpdate 提高 diff 的性能。
React 生命周期函数
答案:
初始化阶段：
getDefaultProps: //获取实例的默认属性
getInitialState: //获取每个实例的初始化状态
componentWillMount： //组件即将被装载、渲染到页面上
render: //组件在这里生成虚拟的 DOM 节点
componentDidMount: //组件真正在被装载之后
运行中状态：
componentWillReceiveProps: //组件将要接收到属性的时候调用
shouldComponentUpdate: //组件接受到新属性或者新状态的时候
//（可以返回 false， //接收数据后不更新，阻止 render 调用，后面的函数不会被继续执行了）
componentWillUpdate: //组件即将更新不能修改属性和状态
render: //组件重新描绘
componentDidUpdate: //组件已经更新
销毁阶段：
componentWillUnmount: //组件即将销毁
.ShouldComponentUpdate 是做什么的？
答案:
shouldComponentUpdate 这个方法用来判断是否需要调用 render 方法重新描绘 dom。因为 dom 的描绘非常消耗性能，如果我们能在 shouldComponentUpdate 方法中能够写出更优化的 dom diff 算法，可以极大的提高性能。
为什么虚拟 Dom 会提高性能?(必考)
虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存，利用 dom diff 算法避免了没有必要的 dom 操作，从而提高性能。
用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异把 2 所记录的差异应用到步骤 1 所构建的真正的 DOM 树上，视图就更新了。
React 中 Refs 的作用是什么？
答案:
Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄。
我们可以为元素添加 ref 属性然后在回调函数中接受该元素在 DOM 树中的句柄，该值会作为回调函数的第一个参数返回：
class CustomForm extends Component {
handleSubmit = () => {
console.log("Input Value: ", this.input.value);
};
render() {
return (
<form onSubmit={this.handleSubmit}>
<input type="text" ref={input => (this.input = input)} />
<button type="submit">Submit</button>
</form>
);
}
}
上述代码中的 input 域包含了一个 ref 属性，该属性声明的回调函数会接收 input 对应的 DOM 元素，我们将其绑定到 this 指针以便在其他的类函数中使用。
另外值得一提的是，refs 并不是类组件的专属，函数式组件同样能够利用闭包暂存其值：
function CustomForm({ handleSubmit }) {
let inputElement;
return (
<form onSubmit={() => handleSubmit(inputElement.value)}>
<input type="text" ref={input => (inputElement = input)} />
<button type="submit">Submit</button>
</form>
);
}
SetState 和 ReplaceState 的区别
答案:
setState 是修改其中的部分状态，相当于 Object.assign，只是覆盖，
不会减少原来的状态 replaceState 是完全替换原来的状态，相当于赋值，将原来的 state 替换为另一个对象，如果新状态属性减少，那么 state 中就没有这个状态了
$React 中有三种构建组件的方式
答案:
- React.createClass()、
- ES6 class
- 无状态函数
描述事件在 React 中的处理方式
答案:
为了解决跨浏览器兼容性问题，您的 React 中的事件处理程序将传递 SyntheticEvent 的实例，它是 React 的浏览器本机事件的跨浏览器包装器。
这些 SyntheticEvent 与您习惯的原生事件具有相同的接口，除了它们在所有浏览器中都兼容。
有趣的是，React 实际上并没有将事件附加到子节点本身。
React 将使用单个事件监听器监听顶层的所有事件。
这对于性能是有好处的，这也意味着在更新 DOM 时，React 不需要担心跟踪事件监听器。
应该在 React 组件的何处发起 Ajax 请求
答案:
在 React 组件中，应该在 componentDidMount 中发起网络请求。这个方法会在组件第一次“挂载”(被添加到 DOM)时执行，在组件的生命周期中仅会执行一次。
更重要的是，你不能保证在组件挂载之前 Ajax 请求已经完成，如果是这样，也就意味着你将尝试在一个未挂载的组件上调用 setState，这将不起作用。
在 componentDidMount 中发起网络请求将保证这有一个组件可以更新了。
调用 Super(Props) 的目的是什么
答案:
在 super() 被调用之前，子类是不能使用 this 的，在 ES2015 中，子类必须在 constructor 中调用 super()。
传递 props 给 super() 的原因则是便于(在子类中)能在 constructor 访问 this.props。
除了在构造函数中绑定 This，还有其它方式吗
答案:
你可以使用属性初始值设定项(property initializers)来正确绑定回调，create-react-app 也是默认支持的。
在回调中你可以使用箭头函数，但问题是每次组件渲染时都会创建一个新的回调。
为什么SetState 的参数是一个 Callback 而不是一个对
答案:
因为 this.props 和 this.state 的更新可能是异步的，不能依赖它们的值去计算下一个 state。
在 React 当中 Element 和 Component 有何区别？
答案:
React Element 是描述屏幕上所见内容的数据结构，是对于 UI 的对象表述。
典型的 React Element 就是利用 JSX 构建的声明式代码片然后被转化为 createElement 的调用组合。
React Component 是一个函数或一个类，可以接收参数输入，并且返回某个 React Element
状态(State)和属性(Props)之间有何区别
答案:
- State 是一种数据结构，用于组件挂载时所需数据的默认值。
- State 可能会随着时间的推移而发生突变，但多数时候是作为用户事件行为的结果。
- Props(properties 的简写)则是组件的配置。props 由父组件传递给子组件，并且就子组件而言，props 是不可变的(immutable)。
- 组件不能改变自身的 props，但是可以把其子组件的 props 放在一起(统一管理)。Props 也不仅仅是数据--回调函数也可以通过 props 传递。
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]);
