React知识点总结

1.keys的作用是什么？

keys是react用于追踪列表元素被修改，添加或移除的标识，我们需要保证元素的key在同级元素的唯一性，react的diff算法会根据key的值来判断该元素是新创建的还是移动的元素，减少不必要的渲染，增加性能

render(){
   return(
   this.state.list.map(item=>{
  return (
      <li key={item.id}>{item}</li>
     )
   })
   )
}

2.调用setState后，发生了什么？

setState一般用户更新数据，重新渲染dom元素。调用setState，react会将传入的参数和当前组件的状态合并，然后出发调和过程，经过调和过程，react会以高效的方式根据新的状态构建react元素树，并重新渲染界面。react构建树之后，react会计算出新树和老树的节点差异，然后根据差异进行界面最小化的渲染，

3.生命周期

• 初始化阶段
  1.getDefaultProps:获取实例的默认属性
  2.getInitialState:获取每个实例的初始状态
  3.componentWillMount:组件即将被装载，渲染页面之前
  4.render:组件生成虚拟DOM节点
  5.componentDidMount:组件真正被装载之后
• 运行中的
  1.componentWillReceiveProps:组件将要接收到新的属性调用
  2.shouldComponentUpdate:组件接受到新属性或者新状态的时候（可以返回false,接受数据后就不更新。阻止render的调用，后面的函数就不会被执行了）
  3.componentWillUpdate:组件即将更新不能修改属性和状态
  4.render：组件重新描绘
  5.componentDidUpdate:组件已更新
• 销毁阶段
  1.componentWillUnmount:组件即将销毁

4.react性能优化是那个周期函数

shouldComponentUpdate这个方法是用来判断是否需要调用render方法重新渲染dom,因为渲染dom消耗性能，如果能在shouldComponentUpdate方法中能写出优化的算法，可以提高性能。

5.虚拟DOM

虚拟dom相当于在js和真实dom中间加一个缓存，利用dom diff算法避免了不必要的dom操作，从而提高性能。用js对象结构表示dom树的结构，然后用这个树构建一个真正的dom树，插入到文档中，当状态变更时，重新构造一个新的树，然后用新的树和旧的树比较，记录两棵树的差异。然后把差异部分更新。

6.diff原理

把树形结构按照层级分解，只比较同级元素。
给列表结构的每个单元添加唯一的key属性。
react只会匹配相同的class(组件)的component
选择性子树渲染，开发人员可以重写shouldComponentUpdate提高diff的性能
合并操作。调用component的setState方法的时候，react将其标记为dirty,到每一个时间循环结束，react检查所有标记的dirty的component重新绘制

7.性能优化方案

1.重写shouldComponentUpdate来避免不必要的dom操作
2.使用production版本的react.js
3.使用key来帮助react识别列表的组件最小变化

8.refs的作用

refs是react提供给我们的安全访问dom元素或者某个组件的实例化的句柄，我们可以为元素添加ref属性然后再回调函数中接受该元素在dom树种的句柄，该值会作为回调函数的第一个参数返回

9.state和props的不同之处

state是一种数据结构，用于组价挂载时所需数据的默认值，state可能会随着时间的推移而发生冲突，但多数是作为用户事件行为的结果
props是组件的配置，是由父组件传递给子组件，就子组件而言，props是不可变得，组件自身不能改变props,但是可以把其子组件的props统一管理，props不仅仅是数据，回调函数也可以通过props传递

10.react如何发起ajax请求

在react中应该再componentDidMount发起网络请求，这个方法会在组件第一次挂载时执行，在组件的生命周期中仅会执行一次，因为你不能保证在组件挂载之前ajax请求已经完成，如果是这样，你将在一个未挂载的组件上调用setState，这将没有效果。在componentDidMount中发起一个网络请求，这就可以保证有一个组件可以更新了

11.高阶组件

高阶组件是一个以组件为参数并返回一个新组件的函数，HOC运行你重用代码、逻辑，HOC最好的方式是共享react组件之间的行为，如果你发现你在不同的地方写了大量的代码来做同一件事情，就应该考虑将代码重构为可重用的HOC

12.调用super的作用？

在super()调用之前，子类是不能使用this的，在es5中，子类必须在constructor中调用super().传递props给super()的原因则是在子类中能在constructor访问this.props

13.react三中构建组件的方式

React.createClass()
class XXX es6
无状态函数