1分钟读完《我希望在深入 React 之前知道这些》

我希望在深入 React 之前知道这些

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

1、每次调用 setState 都会引起组件的重新渲染 re-render

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

shouldComponentUpdate 认返回 true,开发者可以根据自己的逻辑决定是否返回 false

注意:

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

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

调用 setState 后,组件的 state不会立即改变。

一个经常犯的错误就是在 setState 后马上使用 this.state

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

3、组件生命周期很重要

生命周期大概分为 3 类:

挂载:组件被创建并插入到 DOM

更新:组件正在重新渲染,一般是由 props 或 state 的改变引起的

卸载:组件从 DOM 上移除

4、componentwillReceiveProps 的使用

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

注意:

  • 即使 props 没有改变,也会调用 componentwillReceiveProps,因此需要在函数内部比较 this.propsnextProps
  • 一个已挂载组件接收新 props 前,componentwillReceiveProps调用,因此在挂载阶段是不会调用 componentwillReceiveProps

5、使用 React Developer Tools

React Developer Tools 可以更方便的调试 React 应用。

6、使用 Create React App

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

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

讨论地址:我希望在深入 React 之前知道这些

如果你想参与讨论,请点击这里

相关文章

一、前言 在组件方面react和Vue一样的,核心思想玩的就是组件...
前言: 前段时间学习完react后,刚好就接到公司一个react项目...
前言: 最近收到组长通知我们项目组后面新开的项目准备统一技...
react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...