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

2021-11-05 21:03:32 阅读：168 来源： 互联网

标签：Props log 类式 constructor 构造 React props console super

类式组件中构造器与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,log,类式,constructor,构造,React,props,console,super
来源： https://blog.csdn.net/weixin_45780818/article/details/121157533

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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

类式组件中构造器与props。