问题
React17生命周期构造函数constructor理解正确的是?
选项
A 仅在需要初始化 state ,或者方法绑定时声明 constructor。
B 在 React 组件挂载之前,会调用它的构造函数。
C 在 constructor() 函数中可以调用 setState() 方法,也可以直接给 this.state 赋值;
D 要避免在构造函数中引入任何副作用或订阅。如遇到此场景,请将对应的操作放置在 componentDidMount 中。
答案
A、B、D
解答
如果不初始化 state 或不进行方法绑定,则不需要为 React 组件实现构造函数。通常,在 React 中,构造函数仅用于以下两种情况:
- 通过给 this.state 赋值对象来初始化内部 state。
- 为事件处理函数绑定实例。
constructor不是必填
React 中通过继承的方式定义 class 组件时,可以缺省 constructor 构造函数,由 ES6 的继承规则得知,不管子类写不写 constructor,在 new 实例的过程都会给补上 constructor。
super是必须调用的
可以不写constructor,一旦写了constructor,就必须在此函数中写super(),否则会报错:
class Example extends React.Component {
constructor() {}
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
Uncaught ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor
此时组件才有自己的this,在组件的全局中都可以使用this关键字,否则如果只是constructor 而不执行 super() 那么以后的this都是错的。
不要在组件构造函数中调用 setState() 方法
如果需要修改 state,直接在构造函数中为this.state 赋值初始即可。
class Example extends React.Component {
constructor(props) {
super(props)
this.setState({ name: "React" })
}
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
会报如下警告:
Warning: Can't call %s on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to this.state directly or define a state = {}; class property with the desired state in the %s component.%s" "setState" "Welcome"
避免派生状态
避免将 props 的值复制给 state,你可以直接使用 this.props.color。除非你是想编写 ”非受控组件“,那么此 color 属性仅做默认值使用,因此建议在 props.color 命名上优化为 ”initialColor“ 或 ”defaultColor“。
constructor(props) {
super(props);
this.state = { color: props.initialColor };
}
资源
组件的生命周期
关于react组件中的constructor和super
来源
搜索《考试竞技》微信小程序