构建器是从类创建对象时自动调用的一种方法. 它可以处理初始设置的内容,例如默认对象的一些属性,或审查被传递的论点。
在 React 中,构造器没有什么不同. 它可以用来将事件处理器绑定到组件和/或初始化组件的本地状态. 在组件安装前启动constructor()方法,像 React 中的大多数东西一样,有几个规则,您在使用它们时应该遵循。
在使用this.props之前拨打super(props)
由于构建者的性质,直接出入门,这个props对象不可用,可能导致错误。
1constructor() {
2 console.log(this.props);
3}
相反,我们从constructor()中取出一个props值,并将其传递到super()方法:
1constructor(props) {
2 super(props);
3 console.log(this.props);
4}
当您调用super()方法时,它会调用React.Component在 React 组件中是React.Component的母类构件。
永遠不要在「constructor()」內呼叫「setState()」
您的组件构造器是设置组件的初始状态的完美场所,而不是像您在类中的其他方法一样使用setState(),您需要直接设置初始状态:
1constructor(props) {
2 super(props);
3
4 this.state = {
5 reptile: 'alligator',
6 color: '#008f68',
7 };
8}
构建器是您应该直接分配本地状态的唯一地方,我们组件中的任何其他地方,您应该依赖setState()。
避免将值从this.props分配到this.state
当您在构建程序中设置初始组件状态时,应尝试避免从属性中设置值。
当你做这样的事情时:
1constructor(props) {
2 super(props);
3
4 this.state = {
5 reptile: props.reptile,
6 };
7}
您将失去在以后运行setState()并更新属性的能力。
而不是直接将属性分配给州,您可以通过拨打this.props.reptile来直接在代码中引用该属性。
将所有事件连接到一个地方
不是真正的规则或Gotcha,但值得注意的是,您可以在构建器中轻松连接您的事件处理器:
1constructor(props) {
2 super(props);
3
4 this.state = {
5 // Sets that initial state
6 };
7
8 // Our event handlers
9 this.onClick = this.onClick.bind(this);
10 this.onKeyUp = this.onKeyUp.bind(this);
11 // et cetera...
12}
避免在「constructor()」中使用副作用或订阅
我得到它,你刚刚构建了一个新组件,你想要它从API中提取数据,并让它将值设置为状态。
错了!
对于会更新状态和其他副作用的订阅等事情,您应该在componentDidMount()中放出逻辑,该逻辑将在组件安装后立即启动,如果您更新组件内部的状态,则不会给你任何麻烦。
你甚至需要一个建设者吗?
构建器非常方便,但有时它只是太多了. 如果您没有计划保持组件的状态,并且没有绑定任何事件处理器,您根本不需要定义构建器。
事实上,如果你不需要状态或事件处理器,你可能根本不需要一个基于类的组件,你可以节省自己一些额外的打字,然后简单地使用一个 功能组件。