1分钟读完《我但愿在深刻 React 以前知道这些》

我但愿在深刻 React 以前知道这些

Canberk Morelli 是 OpsGenie 的一名前端工程师，正在使用 React 构建公司内部项目。经过这篇文章可使初学者不要犯一样的错误。

一、每次调用 setState 都会引发组件的从新渲染 re-render

每次state 改变或者传入新的 props 都会调用 shouldComponentUpdate。

shouldComponentUpdate 默认返回 true，开发者能够根据本身的逻辑决定是否返回 false。

注意：

• 不正确的 shouldComponentUpdate 逻辑可能引起错误：应该渲染的时候没有渲染，或者不该该渲染的时候却渲染了
• 在 shouldComponentUpdate 进行复杂的判断容易引起性能问题，能够经过 React’s Performance Tools 来查找。

二、setState 对状态的改变是异步的

调用 setState 后，组件的 state 并不会当即改变。

一个常常犯的错误就是在 setState 后立刻使用 this.state。

setState 还有另外一种用法：setState(updater, [callback])，经过传递一个函数 updater。
第 2 个参数是修改完状态后的回调，可是不推荐在这里写业务逻辑，一个比较不错的地方是写到 componentDidUpdate 函数里。

三、组件生命周期很重要

生命周期大概分为 3 类：

挂载：组件被建立并插入到 DOM

更新：组件正在从新渲染，通常是由 props 或 state 的改变引发的

卸载：组件从 DOM 上移除

四、componentWillReceiveProps 的使用

当组件的 props 改变时须要更新 state时使用这个方法。

注意：

• 即便 props 没有改变，也会调用 componentWillReceiveProps，所以须要在函数内部比较 this.props 和 nextProps
• 在一个已挂载组件接收新 props 前，componentWillReceiveProps 被调用，所以在挂载阶段是不会调用 componentWillReceiveProps 的

五、使用 React Developer Tools

React Developer Tools 能够更方便的调试 React 应用。

六、使用 Create React App

官方推出的 Create React App 让开发者已零配置的方式快速建立 React 应用。

---

阅读原文：I wish I knew these before diving into React

讨论地址：我但愿在深刻 React 以前知道这些

若是你想参与讨论，请点击这里