Question

很多时候我们在构造函数中发送道具但是我们从不在构造函数的任何地方使用this.props，所以为什么需要传递它以及什么时候需要这样做。

 class App extends React.Component {

      constructor(props) {
        super(props);    // When do we need to send props to the constructor
        this.state = {
           data: 'Initial data...'
        }
        this.updateState = this.updateState.bind(this);
      };

      updateState(e) {
          this.setState({data: e.target.value});
      }

      render() {
        return (
           <div>
             <input type = "text" value = {this.state.data} 
              onChange = {this.updateState} />
             <h4>{this.state.data}</h4>
          </div>
        );
      }

   }

Answer 1

React.Component构造函数实际上并不需要道具。您可以编写此代码，一切正常：

constructor() {
    super();
    this.state = {
       data: 'Initial data...'
    };
    this.updateState = this.updateState.bind(this);
  };

这是因为构造函数路径实际上并不是在标准React生命周期中分配道具的位置。 React.Component实际上并不使用道具，只会在构造函数需要使用它时设置this.props。但通常您不应该在构造函数中使用props，因为使用props to initialize your state is an anti-pattern

如果你配置了babel，你甚至不需要像这样的东西的构造函数：

class MyComponent extends React.Component {
    state = { data: "initial data" };

    updateState = (arg1, arg2) => { ... };

    // instead of:
    // updateState(arg1, arg2) { ... }

}

我什么时候需要使用super（props）将prop传递给react组件的构造函数？

1 个答案: