关于React的小结

React.Component与React.PureComponent的区别

1. React.PureComponent通过props和state的浅对比来实现shouldComponentUpdate，当数据包含复杂数据结构的时候，可能会因深层的数据不一致，而产生错误判定（即，视图没有更新），一般在简单的props和state可以采取PureComponent，或当知道数据改变时强制更新视图forceUpdate。
2. 在props和state相同的情况下React.PureComponent可以减少render的次数，性能更好。也可以减少shouldComponentUpdate函数的书写，节省代码。
3. React.PureComponent的 shouldComponentUpate()会忽略整个组件的子级。请确保所有的子级组件也是Pure的。

关于函数属性

• 写法一

// 1
<MyInput onChange={e => this.props.update(e.target.value)} />
// 2
update(e) {
  this.props.update(e.target.value)
}
render() {
  return <MyInput onChange={this.update.bind(this)} />
}

上面的写法容易产生的问题：
由于每次 render 操作 MyInput 组件的 onChange 属性都会返回一个新的函数，由于引用不一样，所以父组件的 render 也会导致 MyInput 组件的 render ，即使没有任何改动，所以需要尽量避免这样的写法，采用写法二。

• 写法二

update = (e) => {
  this.props.update(e.target.value)
}
render() {
  return <MyInput onChange={this.update} />
}