2018-12-04-react小书记录

• 这些 on* 的事件监听只能用在普通的 HTML 的标签上，而不能用在组件标签上。
• 在使用 React.js 的时候，并不需要担心多次进行 setState 会带来性能问题。
• state倾向于管理自己内部的状态，props更倾向于由外部组件传递状态
• 使用map(data, index)中的index作为key标签是不好的做法，这只是掩耳盗铃（具体原因大家可以自己思考一下）。记住一点：在实际项目当中，如果你的数据顺序可能发生变化，标准做法是最好是后台数据返回的 id 作为列表元素的 key。（思考：如果仅仅是静态展示的内容，则直接使用index没有什么大的问题，但是如果是动态渲染的就会出现key与顺序不一致的问题，而且key的值要唯一稳定）
  一个可用实践

在不能使用random随机生成key时，我们可以像下面这样用一个全局的localCounter变量来添加稳定唯一的key值。

var localCounter = 1;
this.data.forEach(el=>{
    el.id = localCounter++;
});
//向数组中动态添加元素时，
function createUser(user) {
    return {
        ...user,
        id: localCounter++
    }
}

• 一个状态被多个组件使用依赖的时候就要考虑状态提升了，但是如果提升的层级过高，这时就需要考虑状态管理工具的使用了，比如redux/mobx

• 日常出现的错误，要及时清除定时器，并且不能在已经unmount的组件上调用包含setState操作的方法，否则会出现下列图片出现的错误

  
  image.png
• 我们一般会把组件的state 的初始化工作放在constructor里面去做；在componentWillMount进行组件的启动工作，例如 Ajax 数据拉取、定时器的启动组件从页面上销毁的时候，有时候需要一些数据的清理，例如定时器的清理，就会放在componentWillUnmount 里面去做。

示例

class Post extends Component {
  constructor () {
    super()
    this.state = { content: '' }
  }
  
  componentWillMount () {
    // 在componentWillMount中拉取数据
    this._loadData()
  }
  
  async _loadData () {
    this.setState({ content: '数据加载中...' })
    const content = await getPostData()
    this.setState({ content })
  }
  
  render () {
    return (
      <div>
        <div className='post-content'>{this.state.content}</div>
        <button onClick={() => {
          this._loadData()
        }}>刷新</button>
      </div>
    )
  }
}

• diff算法参考资料