React 类式组件中的构造器与Props

2023-12-01 22:31:46

类式组件中构造器与props。

<script type="text/babel">
  class Person extends React.Component {
    static propTypes = {
      name: PropTypes.string.isRequired,
      sex: PropTypes.string,
      age: PropTypes.number,
    };
    // 设置默认属性
    static defaultProps = {
      sex: "女",
      age: 18,
    };
    state = {};
    render() {
      const { name, sex, age } = this.props;
      // prop是只读的
      return (
        <ul>
          <li>姓名：{name}</li>
          <li>性别：{sex}</li>
          <li>年龄：{age + 1}</li>
        </ul>
      );
    }
  }
  ReactDOM.render(<Person name="tom" />, document.getElementById("test"));
</script>

我们知道构造器是可以省略的，为了讨论类式组件中的构造器与Props，我们现在写上构造器，然后按照官网的描述，构造器中会接收props，再传给super

constructor(props) {
  super(props);
}

这意味着：在外部传递的属性，都会在props中收到

可以在constructor中打印一下，由constructor传递的props的值：

constructor(props) {
  super(props);
  console.log("constructor", props);
}

这里思考一下，为什么要给super？假设不给的话：

constructor(props) {
  console.log("props", props);
  super();
}

打印发现，也能收到，甚至说，不写constructor也没关系

现在思考两个问题：

那传递给super和不传递，有什么区别呢？
类中的构造器作用是什么？

我们在官网搜索constructor，重点看红色方框里的内容。

回到当时写state的文章，可以看得到是一一对应的。

接下来理解这段话

我们来看一下，如果传递了props的效果

constructor(props) {
  super(props);
  console.log("constructor", this.props);
}

注意，我这里打印的是this.props，不是props，这里是要输出实例自身的props。

控制台可以看到，是能拿到props的。
当不接也不传的时候：

constructor() {
  super();
  console.log("constructor", this.props);
}

这就可以总结一下：
类中的构造器，是可以省略的，如果不省略构造器，那么constructor接收不接收props？super中传不传props？不接也不传（或接了不传）的影响就是，在构造器中，已经没有办法通过实例拿到props的值

constructor() {
  // 构造器是否接收props是否传递给super，取决于是否希望在构造器中通过this访问props，没有这类需求的话，就不需要写
  // 但是这种场景（通过this访问props）比较少，一般来说直接从构造器拿到props就能做一些常见的判断
  super();
  console.log("constructor", this.props);
}

最后，类中的构造器，能省略则省略，几乎是不写的。

码农公寓

类式组件中构造器与props。

相关文章