3.组件数据

React的组件数据主要分为两种：

• prop
• state

那么怎么选择数据的类型呢？其实选择的原则很简单，prop是组件的对外接口，state是组件的内部状态，对外用prop，内部用state。

prop（property）

React 中，prop是从外部传递给组件的数据，一个 React 组件通过定义自己能够接受的prop就定义了自己的对外公共接口。每个 React 组件都是一个独立的模块，组件之外的一切都时外部世界，外部世界就是通过prop来和组件对话的。

在形式上，prop之于JSX就相当于attributes之于HTML。从写法上来看呢，我们为组件传入
props就像为HTML标签添加属性一样：

const SimpleButton = props =>
{/*<button style={{ color: props.color }}>click</button>*/}
<button className={props.color}>click</button>
ReactDOM.render(<SimpleButton color="red" />, document.getElementById('root'))

所得的HTML代码是：

<button class="red">click</button>

在概念上，props对于组件就相当于JS中参数之于函数。我们可以抽象出这样一个函数来解释：

Component(props) = View

组件函数通过接受props进而来显现视图的内容。

值得注意的是 React 组件的prop搜能支持的类型十分丰富，JS所支持的数据类型它都支持。但当prop的类型不是字符串类型是。在JSX中必须用花括号{}把prop值包住。如下：

<SampleButton
    id="sample" borderWidth={2} onClick={onButtonClick}
    style={{color: "red"}}
/>

style属性有两个花括号，外层的花括号代表的是JSX的语法，内层的花括号代表这是一个对象常量。

prop是只读的

在React中，prop都是自上而下的，从父组件传递到子组件。并且prop是读的，也就是说我们不能在组件中直接修改prop的内容。组件只能通过传入的prop来进行对页面的渲染，不能去显式的更改prop。

prop数据类型检查

由于prop是组件的对外接口，那么应该对传入的prop数据进行检查。对此在ES6方法定义组件类中，可以通过增加类的propTypes属性来定义prop规格，这不是一种声明而是一种限制。

Counter.propTypes = {
    caption: PropTypes.string.isRequired;
    initValue: PropTypes.number
};

在上面的代码中我们队caption与InitValue都进行了限制。其中caption要求是字符串与一定需要被指定的；而intivalue则要求是数字。

还有一个要注意的是定义类的propTypes属性一般只用于开发阶段，不用于产品阶段。因为定义时会占用一些代码空间，而且propTypes检查也需要消耗CPU进行计算。因此最佳实践就是在开发时使用propTypes属性，以避免出现错误，但在发布产品时使用自动的方法去掉。

prop默认值

由于prop是只读的，我们不能直接为prop赋值。React专门准备了一个方法定义prop的默认值，那就是使用defaultProps。

import React from 'react'
import PropTypes from 'prop-types'
const Title = props => <h1>{props.title}</h1>
Title.defaultProps = {
title: 'Wait for parent to pass props.'
}
Title.propTypes = {
title: PropTypes.string.isRequired
}

state

驱动React组件来渲染组件的除了prop，还有state,如果要翻译state的话可以翻译为状态，而state也代表了组件的内部状态，由于组件不能直接修改传入的prop，因此需要记录自身的数据变化的时候需要使用state。

一般而言都是在constructor对组件state进行初始化。之后就可以在组件中通过this.state来访问它，既然是state那么肯定涉及到数据的改变，因此我们还需额外定义一个负责处理state变化的函数，这样的函数中一般都会包含this.setState这
个方法。

要注意的是组件的state必须是一个javascript对象，不能是string或者number这样简单的数据类型。

class Counter extends React.Component {
constructor(props) {
super(props)
this.state = {
counter: 0
}
}
addOne() {
this.setState((prevState) =>({
counter: prevState.counter + 1
}))
}
render() {
return (
<div>
<p>{ this.state.counter }</p>
<button
onClick={() => this.addOne()}>
Increment
</button>
</div>
)
}
}

总结

react被称为一个单向数据流的状态机，所以说在整个react的学习中，state是贯穿全程的，理解state是写好react的基础。好像提到state就要与props联系起来似的，其实他们是两个完全不同的东西，props在于数据的传递，state在于当前组件的状态。他们主要有以下的区别：

• prop用于定义外部接口，state用于记录内部状态。
• prop的赋值在外部世界使用组件时，state的赋值在组件内部。
• 组件不应该改变prop的值，而state存在的目的就是让组件来改变。