React中的key的作用是什么

用于diff算法判断列表中哪些元素被修改，删除或者添加，列表元素具有唯一的key可以较少不必要的重复渲染。

setState同步还是异步

在合成事件和生命周期中调用是异步，如：

  1. componentDidMount() {
  2.     this.setState({
  3.       name: 'wstreet
  4.   })
  5. }
  7. <div onClick={this.onClick}>{this.state.name}<div>
  9. onClick = () => {}

在原生事件和setTimeout中调用是同步，如：

  1. componentDidMount() {
  2.     this.divRef.addEventlistner('click', this.onClick)
  3. }
  5. <div ref={ref => this.divRef = ref}>{this.state.name}<div>
  7. onClick = () => {}

原因分析：// TODO

React的生命周期

v15：

  1. 挂载阶段：
  2. getDefaultProps  // 设置默认props
  3. getInitialState  // 设置初始的state
  4. constructor
  5. componentWillMount
  6. render
  7. componentDidMount
  9. 更新阶段：
  10. componentWillReceiveProps
  11. shouldComponentUpdate   // 可以用来优化应用
  12. componentWillUpdate
  13. render
  14. componentDidUpdate
  16. 卸载阶段：
  17. componentWillUnmount

React16版本中不推荐使用componentWillMount、componentWillReceiveProps、componentWillUpdate三个生命周期，原因： // TODO

https://github.com/reactjs/rfcs/blob/master/text/0006-static-lifecycle-methods.md#common-problems

v16：

  1. 挂载阶段
  2. constructor
  3. static getDerivedStateFromProps // 它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。
  4. render
  5. componentDidMount
  7. 更新阶段
  8. static getDerivedStateFromProps // 从props中派生出state，代替v15版本componentWillReceiveProps
  9. shouldComponentUpdate
  10. render
  11. // 在最近一次渲染输出（提交到 DOM 节点）之前调用，可以在DOM更新之前获取一些信息（比如滚动位置），
  12. // 将返回结果传递给componentDidUpdate，应返回 snapshot 的值（或 null）
  13. getSnapshotBeforeUpdate // 返回值会传递给componentDidUpdate第三个参数
  14. componentDidUpdate 
  16. 卸载阶段
  17. componentWillUnMount  // 卸载组件，可以在此生命周期中删除事件监听
  19. 错误捕获
  20. componentDidCatch

React废弃了哪些生命周期钩子

componentWillMount
componentWillUpdate
componentWillReceiveProps

为什么会被废弃：
经常被误解和滥用，比如在componentWillMount中初始化state， 在componentWillUpdate中调用外部方法
并且在异步可中断渲染模式下，组件渲染可能会被高优先级任务中断，所以可能会被执行多次