看到这个标题，大家或许已经有一种扑面而来的熟悉感了，感觉我们是不是快要结束props这个章节了，因为我们学state的时候就是简写了state之后做一个简单的总结就开始学props了。

当然了，我们到这一步说明我们学props已经过了一个阶段了，props也确实要比state简单，至于是不是要学完了，我先卖个关子。

我们上节课算是正式结束了我们的那个小案例，对props有了一定的了解，但是之前我们是不是一直都是用一种最标准的方式来写的？当然这样来写一点毛病没有，但是还是和state一样，最标准的写法往往都是最繁琐的，那么我们今天就来聊一聊如何来精简：

回顾

在开始新的内容之前，肯定还是少不了罗嗦一下上节课的内容，上节课我们学了什么啊？对props的限制：

  • 限制并不是必须的
  • 限制props必须引入prop-types
  • 限制可以避免一些不必要的错误
  • 限制有三种场景
  • 限制属性是否必须非空
  • 限制属性类型
  • 限制属性默认值
  • 限制属性类型为函数时，不能用function而要用func

注意事项

props是只读的，我们过去经常说数据的增删改查，props只允许查，其余的都不允许

简写方式

其实对props的简写很简单的，我们回头来分析一下我们的代码结构：

image-20211221143137897

为了减小截图占的篇幅我把代码折叠起来了。我们来看一下是不是可以分为这 4 个部分？

  1. 定义类组件
  2. 对props进行类型以及必要性限制
  3. 给props添加默认值
  4. 渲染组件到页面

那么我们再来思考一下1 ~ 3这三块是不是都属于定义组件相关的？我定义组件和给组件添加限制规则那都属于下定义这个行为啊，这三块肯定都算是定义组件范畴内的。

而第4部分则是对组件的使用。

那么我们这份代码从总的层面上来说，是不是就只分为两个部分？那么我们为什么不把1 ~ 3这三块给合并成一块呢？就像state一样，state的初始化放在类中来完成，事件监听的回调函数写在类里面。那么我们props的限制同样也可以写在类里面啊，那么怎么写？

我们来分析一下语法，Person.propsTypes = {...}还有Person.defaultProps = {...}这是不是就是再给Person自身加了两个属性？

看到这可能有人说，我明白了，简写state那一节学过，我直接在类里面写赋值语句就行了，对吗？我们来回忆一下，在类里直接写赋值语句是什么意思？是不是给这个类的实例对象添加属性啊？但是我们是要给类本身添加属性啊。为什么不是给实例对象添加呢？我们说了propsTypes和defaultProps是类本身的属性，react要在实例化组件之前去类本身上去查找这两个属性，然后在实例化对象，如果是给实例化对象上添加属性是不是要通过实例化之后的对象才能拿到啊？但是这一步查找实是在实例化对象之前的，都没有实例对象react上哪去拿实例对象的属性呢？所以说必须把这两个属性加在类的自身上。

但是，人嘴两张皮，反正都使得。我们上下嘴皮子一碰说要加到类本身上，那么怎么加呢？其实还是赋值语句。大家有其他语言基础的朋友可以回想一下，在类没有被实例化就可以直接通过类名就调用到的属性和方法叫什么？没错就是静态属性和静态方法。那么也就是说我们要把propsTypes和defaultProps作为Person类的静态属性。那么赋值语句前面加一个static关键字不就行了嘛。

那么就好办了，改一下代码吧：

class Person extends React.Component {
  static propTypes = {
    name: PropTypes.string.isRequired,
    gender: PropTypes.string,
    age: PropTypes.number
  };
  static defaultProps = {
    gender: "男",
    age: 18
  }

  render() {
    const { name, age, gender } = this.props;
    return (
      <ul>
        <li>姓名：{name}</li>
        <li>性别：{gender}</li>
        <li>年龄：{age + 1}</li>
      </ul>
    );
  }
}

这样是不是就比在外面写Person.propTypes={...};和Person.defaultProps = {...}看起来顺眼多了啊？

但是有已嗲要注意，一定不能写到render方法里面了啊。

image-20211221150222608

这样我们一看，代码结构是不是就显得格外清晰？我第一部分，定义一个类组件并且在类里面对props进行了限制，还加了默认值。第二部分，我渲染组件到页面，简洁明了。然后我们再渲染一下<Person age="20" />，我没有传name和gender，而且年龄传了字符串。我们看一眼页面效果：

image-20211221150847456

页面正常渲染，但是控制台打印了关于name和age的错误警告，所以说这儿个方法是有效的。

以上就是本节课关于props的简写方式

总结

  • propsTypes和defaultProps必须是组件类自身的属性，不是实例对象的属性
  • 用static关键字给类自身添加属性
  • props是只读的

Copyright statement：The articles of this site are all original if there is no special explanation, indicate the source please when you reprint.

Link of this article：https://work.lynchow.com/article/simple_props/