Question

我了解C ++等OOP语言中的构造函数的概念。但是，我不完全确定何时在REACT中使用构造函数。我确实知道JavaScript是面向对象的，但是我不确定构造器实际上是在“构造”。

渲染子组件时，子组件中是否需要构造函数？例如：

class App extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         items: [],
         error: null
      }
    }
    render () {
       return (
          <React.Fragment>
             <ChildComponent data={this.state.items}></ChildComponent>
          </React.Fragment>
       )
    }
}

为简洁起见，我将简短示例。但是，为什么需要构造函数？而且您需要在子组件中使用一个构造函数来构造道具吗？

我的ES6知识可能还没有完全解决。

Answer 1

如果您不初始化状态并且不绑定方法，则无需为React组件实现构造函数。

React组件的构造函数在挂载之前被调用。在为React.Component子类实现构造函数时，应在其他任何语句之前调用super（props）。否则，this.props将在构造函数中未定义，这可能会导致错误。

通常，在React中，构造函数仅用于两个目的：

通过将一个对象分配给this.state来初始化本地状态。
将事件处理程序方法绑定到实例。

https://reactjs.org/docs/react-component.html#constructor

Answer 2

完全不需要构造函数。

状态初始化可以直接在类的主体中完成，并且可以按如下所述将函数分配给属性，

从技术上讲，这些被称为类属性，它可能很快就会在本机javascript中出现，但是因为几乎我们所有人都将Babel transpiler用于React项目，所以我们可以使用该语法

class Comp extends React.Component {
/* 
 * generally we do not need to put the props in state, but even if we need to.
 * then it is accessible in this.props as shown below 
**/
state={ first: 1, second: this.props.second } 

handler= (token) => {
 this.setState(prevState => ({first: prevState.first+1}));
}

render() {
 return <div onClick={this.handler}>{this.state.first} and {this.state.second } </div>
}
}

在此处阅读有关类属性和从react类组件中删除构造函数的更多详细信息。 https://hackernoon.com/the-constructor-is-dead-long-live-the-constructor-c10871bea599

Answer 3

示例中的链接，当您需要初始化状态或绑定某些事件监听器功能时，使用构造函数很有用

<element onClick={this.handler} />
this.handler = this.bind.handler(this);在构造函数内部

什么时候在REACT中使用构造函数合适？

3 个答案: