React中keys的作用是什么？
keys是react用于追踪哪些元素被修改、 被添加、被移除的辅助标示。
render(){
return(
<ul>
{
this.state.list.map(({item,key})=>{
return <li key={key}> {item} </li>
})
}
</ul>
)
}
在开发过程中，我们需要保证某个元素的key在其同级元素中具有唯一性。
在react diff算法中react会借助元素的key来判断元素是新创建的还是被移动而来的元素，从而减少不必要的元素重新渲染。此外，react还需要借助key值来判断元素与本地状态的关联关系，因此我们绝不可忽视转换函数中key的重要性。
当调用setState的时候，发生了什么？
将传递给setState的对象合并到组件的当前状态，这将启动一个和解的过程，构建一个新的react元素树，与上一个元素树进行对比（diff），进而最小化的重渲染。
为什么setState的参数是一个callback？
因为this.props和this.state的更新是异步的，不能依赖它们的值去计算下一个state
状态state和属性props之间有什么区别？
- state是一种数据结构，用于组件挂载时需要数据的默认值。
- state可能会随着时间的推移而发生突变，但多数时候是作为用户事件行为的结果。
- props则是组件的配置。props由父组件传递给子组件，并且就子组件而言，props是不可变的。
- 组件不能改变自身的props，但是可以把子组件的props放在一起，统一管理。props也不仅仅是数据，回调函数也可以通过props传递。
应该在React组件的何处发起Ajax请求？
在React组件中，应该在componentDidMount中发起网络请求。这个方法会在组件第一次“挂载”时执行，在组件的生命周期中仅会执行一次。
更重要的是，不能保证在组件挂载之间Ajax请求已经完成，如果是这样，也就以为在将尝试在一个为挂载的组件上调用setState，这不会起任何作用。
所有在componentDidMount中发起网络请求就保证了这一个组件可以更新了。
React中的三种组件构建的方式？
React.createClass() 、ES6 Class 、无状态函数
React中的refs的作用是什么？
Refs是<span></span> 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指针以便在其他的类函数中使用。
描述react diff的原理？
把树形结构按层级分解，只比较同级元素。
给列表结构的每一个单元添加唯一的key属性，方便比较。
react只会匹配相同的class的component合并操作，调用component的setState的时候，react将其标记为dirty，到每一个事件循环结束，react检查所有标记dirty的component重新绘制，选择性子树渲染。
开发人员可以重写shouldComponentUpdate提高diff的性能。
说说React的优势？
- react速度很快：它并不直接对DOM进行操作，引入了一个叫做虚拟DOM的概念，安插在JavaScript逻辑和实际DOM直接，性能好。
- 跨浏览器兼容：虚拟DOM帮助我们解决了跨浏览器问题，为我们提供了标准化的API，甚至在IE8中都是没问题的。
- 一切都是component：代码更加模块化，重用代码更容易，可维护性高。
- 单向数据流，Flux树一个用于在JavaScript应用中创建单向数据层的结构，它随着React视图库的开放而被Facebook概念化。
- 同构、纯粹的JavaScript：因为搜索引擎的爬虫程序依赖的是服务端相应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。
- 兼容性好：比如使用RequireJS来加载和打包，而Broeserify和Webpack适用于构建大型应用。
react生命周期函数有哪些？
- getDefaultProps：获取实例的默认属性
- getInitialState：获取每个实例的初始化状态
- componentWillMount：组件即将被装载、渲染在页面上
- render：组件在这里生成虚拟DOM节点
- componentDidMount：组件真正的被装载之后运行中状态
- componentWillReceiveProps：组件将要接收到属性的时候调用
- shouldComponentUpdate：组件接受到新属性或者新状态的时候
- componentWillUpdate：组件即将更新不能修改属性和状态
- render：组件重新描绘
- componentDidUpdate：组件已更新
- componetWillUnmount：组件即将销毁
|