-
React组件的数据分为两种，prop和state，无论prop或者state改变，都可能引发组件的重新渲染。 -
prop是组件对外接口，state是组件的内部状态，对外用prop，对内用state。
（如果你熟悉Vue，React中的prop就相当于Vue组件的data() { return {} }里的数据，React的state就相当于Vue中的prop） - 组件不应该改变
prop的值，而state存在的目的就是让组件来改变。
一、prop
在React中，prop（propety的简写）是从外部传递给组件的数据，一个组件通过定义自己能够接受的prop就定义了自己对外公共接口。
1.给prop赋值
// 一段JSX代码中：
<SampleButton id="sample" borderWidth={2} onClick={onButtonClick} style={{ color: "red" }} />
- 在例子中，创建了名字为
SampleButton的组件实例，id、borderWidth、onClick、style四个prop。 -
HTML中的属性，只支持字符串类型，而React组件，除了支持字符串，还支持数字（2），函数（onButtonClick），对象（{ color: "red" }）。 - 只要prop值不是字符串类型，就必须要用
{}把prop值括住。所以对象变量会有两层{{}}。
2.读取prop的值
class Counter extends Component {
constructor(props) {
super(props)
this.onClickIncrementButton = this.onClickIncrementButton.bind(this)
this.onClickDecrementButton = this.onClickDecrementButton.bind(this)
this.state = {
count: props.initValue || 0
}
}
}
-
如果一个组件需要定义自己的构造函数，一定要记得在构造函数的第一行通过
super调用父类也就是React.Component的构造函数。 -
如果在构造函数中没用调用
super(props)，那么组件实例被构造之后，类实例的所有成员就无法通过this.props访问到父组件传递过来的props值。 -
很明显，给
this.props赋值是React.Component构造函数的工作之一。 -
在
Counter的构造函数中还给两个成员版定了当前this的执行环境，因为ES6的构造方法创造的React组件类并不自动给我们绑定this到当前实例对象。 -
在构造函数中，可以通过参数
props获得传入的prop值。 -
其他函数中，通过
this.props获得传入的prop值，还可以使用ES6的结构赋值：（const { test } = this.props相当于const test = this.props.test）
3.propTypes检查
在ES6方法定义的组件类中，可以通过增加类的propTypes属性来定义prop的规格，这不只是声明，还是一种限制。在运行时和静态代码检查时，都可以根据propTypes 判断外部世界是否正确地使用了组件。
Counter.propTypes = {
caption: PropTypes.string.isRequiered,
initValue: PropTypes.number
}
- 其中要求
caption必须是string类型 - 其中要求
initValue必须是number类型 - 其中要求
caption必需
propTypes虽然能够在开发阶段发现代码中的问题，但是放在产品环境不合适，会占用一些代码空间，消耗CPU计算资源。所以在开发阶段使用，当部署到环境产品时应该去掉。
babel-react-optimize就有这个功能，通过npm来安装，但是应该确保只在发布产品代码时使用它。
二、state
state表示组件的内部状态。由于React组件不能修改传入的prop，所以需要记录自身数据变化，就要用到state。
1.初始化state
通常都会在组件类的构造函数的结尾处初始化state。
constructor(props) {
...
this.state = {
count: props.initValue || 0
}
}
- 通过对
this.state的赋值完成了对组件state的初始化 - 组件的
state，必须是一个JavaScript对象 - 如果在
propTypes声明中有用isRequired要求必须有值的prop，则需要在代码中判断所给prop值是否存在，如果不存在，就给一个默认的初始值。
可以用React的defaultProps：
Counter.defaultProps = {
initValue: 0
}
这样，Counter构造函数中的this.state初始化中可以省去判断条件，代码可以简化为：
constructor(props) {
...
this.state = {
count: props.initValue
}
}
如果实例中即使没有指定count属性的initValue，实例组件中的count属性也能收到一个默认的属性值0。
2.读取和更新state
通过给button的onClick属性挂载点击事件处理函数，我们可以改变组件的state，以点击按钮给count加1的响应事件为例：
onClickIncrementButton() {
this.setState({ count: this.state.count + 1 })
}
- 在事件中，由于绑定了
this，就能通过this.state读取到组件的当前state。 - 改变组件
state必须要试用this.setState函数，而不能直接去修改this.state。 - 直接修改
this.state值，虽然改变了组件的内部状态，但不会驱动组件进行重新渲染，就不会实时反应this.state的值的变化。 - 而
this.setState函数所做的事情，首先是改变this.state的值，然后驱动组件经历更新过程，这样this.state才会以新的值出现在界面上。
网友评论