理解React组件的生命周期

正文

请到「今天看啥」查看全文

• componentDidCatch()

constructor

当组件被实例化时，构造函数就被会最先执行。需要注意的是constructor的第一行必须是 super(props) 语句。

DO

1. 设置组件的初始状态
2. bind function

简单解释下bind function,当类的方法作为事件处理函数时，有可能会丢失this指向，有两种常见的解决方案：

// This binding is necessary to make `this` work in the callback
this.handleClick = this.handleClick.bind(this); // 上面提到的bind function

使用箭头函数声明处理函数，个人比较推荐这种方案，代码简洁干净
handleClick = () => {}

DON’T

1. 向后台发送请求进而更新组件状态
2. 使用this.setState初始化

下图是强行在constructor中调用this.setState所发出的警告，在constructor中调用this.setState是没有任何作用的

componentWillMount

它也只会在挂载过程中被调用一次，它的作用和constructor没有太大差异。有很多人在componentWillMount中请求后台数据，认为这样可以更早的得到数据，componentWillMout是在render函数执行前执行的，虽然请求是在第一次render之前发送的，但是返回并不能保证在render之前完成。React中不推荐在componentWillMount中发送异步请求👈。

还有一点需要了解： 在componentWillMount中执行this.setState是不会触发二次渲染的。仔细思考一下，componentWillMount好像没啥卵用了。正所谓存在即合理，在服务端渲染的场景中componentDidMount是不会被执行的，因此可以在componnetWillMount中发生AJAX请求。

请到「今天看啥」查看全文