<script type="text/babel">
  class Person extends React.Component {
    render() {
      const { name, sex, age } = this.props;
      return (
        <ul>
          <li>姓名：{name}</li>
          <li>性别：{sex}</li>
          <li>年龄：{age + 1}</li>
        </ul>
      );
    }
  }
  // 指定属性类型及设置必填项
  Person.propTypes = {
    name: PropTypes.string.isRequired,
    sex: PropTypes.string,
    age: PropTypes.number,
    speak: PropTypes.function
  };
  // 设置默认属性
  Person.defaultProps = {
    sex: "女",
    age: 18,
  };
  const p = { name: "jeery", sex: "男", age: 17 };
  function speak() {
    console.log("我说话了");
  }
  ReactDOM.render(<Person {...p} />, document.getElementById("test1"));
  ReactDOM.render(<Person name="tom" speak={speak} />, document.getElementById("test2"));
</script>

现在想改test2的name，不想叫tom，改成jack，正常来说，可以这样写

ReactDOM.render(<Person name="jack" speak={speak} />, document.getElementById("test2"));

不正常的，就会在Person类中写

class Person extends React.Component {
  render() {
    const { name, sex, age } = this.props;
    this.props.name = "jack";
    return (
      <ul>
        <li>姓名：{name}</li>
        <li>性别：{sex}</li>
        <li>年龄：{age + 1}</li>
      </ul>
    );
  }
}

控制台报错

来看一下报错信息
Inline Babel script:5 Uncaught TypeError: Cannot assign to read only property ‘name’ of object ‘#’
意思是：我不能在一个只读的属性name上，做出任何修改，也就是props是只读的属性。
我们来思考一下props的简写方式:

上图我们可以看见，定义了一个Person类，给Person类添加了propTypes和defaultProps属性，都写在Person的外面，其实是可以写在类里面的。
我们先来看一下类的基本知识。

<script>
  class Car {
    constructor(name, price) {
      this.name = name;
      this.price = price;
    }
    a = 1;
    wheel = 4;
  }
  const c1 = new Car("宝马", 100);
  console.log("c1", c1);
</script>

创建了一个汽车的实例叫做c1,名字宝马，价格100，a的意思是，给Car实例身上追加一个属性a，值为1。现在，我不想给Car实例加属性，想给Car本身加属性，比如加一个test属性，值为100，我们有可能会去这样写

class Car {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }
  a = 1;
  wheel = 4;
}
Car.test = 100;
const c1 = new Car("宝马", 100);

输入的话，就是

console.log("test", Car.test);

这里我们发现，想给类添加一个属性，是要写在类的外侧。
我们如果这样写的话，是加到Car的实例身上

class Car {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }
  a = 1;
  wheel = 4;
  test = 100;
}

加上static，这个属性就会加给Car本身。

class Car {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }
  a = 1;
  wheel = 4;
  static test = 100;
}

打开控制台，100仍然能够拿到

再回来看原来的代码

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

这样就给Person类本身加了propTypes和defaultProps属性,这样子就能让React给我们做出限制，无论是通过Person.的方式添加，还是通过static添加，都是可以达到限制目的。写static的好处就是，所有与类相关的内容，都在类里面。
最后来试验一下：

ReactDOM.render(<Person name={11} speak={speak} />,document.getElementById("test2"));

这样看上去就比较规整了