<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"));

这样看上去就比较规整了