React组件的数据——prop和state

绝地灬酷狼 2022-05-25 04:07 374阅读 0赞

React组件数据分为两种，prop和state，无论prop或state改变，都可能引发组件的重新渲染，那么，设计一个组件的时候，什么时候选择用prop什么时候选择用state呢？其实原则很简单，prop是组件的对外接口，state是组件的内部状态，对外用prop，内部用state。

# 一、React中的prop #

在React中，prop是从外部传递给组件的数据，一个React组件通过定义自己能够接受的prop就定义了自己的对外公共接口。

每个React组件都是独立存在的模块，组件之外的一切都是外部世界，外部世界就是通过prop来和组件对话的。

当外部世界要传递一些数据给React组件，一个最直接的方式就是通过prop；同样，React组件要反馈数据到外部世界，也可以使用prop，因为prop的类型不限于纯数据，也可以是函数，函数类型的prop等于让父组件交给了子组件一个回调函数，子组件在恰当的时候调用函数类型的prop，可以带上必要的参数，这样就可以反过来把信息传递给外部世界。

为了演示属性的使用，我们构造一个应用包含两个组件，Counter组件和ControlPanel组件，其中ControlPanel组件是父组件，包含若干个Counter组件。

## 1、给prop赋值 ##

我们先从外部世界来看，即CounterPanel是如何用prop传递信息给Counter的，代码如下：

class ControlPanel extends Component {
          render() {
            console.log('enter ControlPanel render');
            return (
              <div style={style}>
                <Counter caption="First"/>
                <Counter caption="Second" initValue={10} />
                <Counter caption="Third" initValue={20} />
                <button onClick={ () => this.forceUpdate() }>
                  Click me to re-render!
                </button>
              </div>
            );
          }
    }

CounterPanel组件包含三个Counter组件实例，在CounterPanel的render函数中将这三个子组件实例用div包起来，因为React要求render函数只能返回一个元素。

在每个Counter组件实例中，都使用了caption和initValue两个prop。通过名为caption的prop，CounterPanel传递给Counter组件实例说明文字。通过名为initValue的prop传递给Counter组件一个初始的计数值。

## 2、读取prop ##

再来看Counter组件内部是如何接受传入的prop的，首先是构造函数，代码如下：

constructor(props) {
            console.log('enter constructor: ' + props.caption);
            super(props);
            this.onClickIncrementButton = this.onClickIncrementButton.bind(this);//绑定当前this的执行环境
            this.onClickDecrementButton = this.onClickDecrementButton.bind(this);
            this.state = {
              count: props.initValue 
            }
      }

如果一个组件需要定义自己的构造函数，一定要记得在构造函数的第一行通过super调用父类也就是React.Component的构造函数。如果在构造函数中没有调用super（props），那么组件实例被构造之后，类实例的所有成员函数就无法通过this.props访问到父组件传递过来的props值。

读取传入prop的方法：在构造函数中可以通过参数props获得传入prop值，在其他函数中则可以通过this.props访问传入prop的值。比如，在Counter组件的render函数中，就是通过this.props获得传入的caption，代码如下：

render() {
            console.log('enter render ' + this.props.caption);
            const {caption} = this.props;
            return (
              <div>
                <button style={buttonStyle} onClick={this.onClickIncrementButton}>+</button>
                <button style={buttonStyle} onClick={this.onClickDecrementButton}>-</button>
                <span>{caption} count: {this.state.count}</span>
              </div>
            );
          }

## 3、propTypes检查 ##

用来让组件声明自己的接口规范，可以根据propTypes判断外部世界是否正确地使用了组件的属性。可以规范以下方面：

*  这个组件支持哪些prop；
 *  每个prop应该是什么样的格式。

比如，对于Counter组件的propTypes定义代码如下：

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

其中，要求caption必须是string类型，initValue必须是number类型，还有一个区别就是：caption带上了isRequired，这表示使用Counter组件必须要指定caption，而initValue因为没有isRequired，表示如果没有也没关系。

注意：没有propTypes定义，组件依然能够正常工作，而且，即使在上面propTypes检查出错的情况下，组件依旧能工作。也就是说propTypes检查只是一个辅助开发的功能，并不会改变组件的行为。

# 二、React中的state #

state代表组件的内部状态，由于React组件不能修改传入的prop，所以需要记录自身数据变化，就要使用state。

在Counter组件中，最初显示初始计数，可以通过initValue这个prop来定制，在Counter已经被显示之后，用户会点击”+“和”-“按钮改变这个计数，这个变化的数据就要Counter组件自己通过state来存储了。

## 1、初始化state ##

通常在组件类的构造函数结尾处初始化state，在Counter构造函数中，通过对this.state的赋值完成对组件state的初始化：

constructor(props) {
     	   console.log('enter constructor: ' + props.caption);
               super(props);
                ……
                this.state = {
                  count: props.initValue || 0   //initValue 是可选的props，考虑到如果父组件没有指定这个props值的情况，就是用默认值0
                }
          }

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

## 2、读取和更新state ##

通过给button的onClick属性挂载点击事件处理函数，我们可以改变state，以点击”+“按钮的响应函数为例，代码如下：

onClickIncrementButton() {
      		  this.setState({count: this.state.count + 1});
     	 }

通过this.state可以读取到组件的当前state。值得注意的是，我们改变组件state必须要使用this.setState函数，而不能直接修改this.state。直接修改this.state的值，虽然事实上改变了组件的内部状态，但只是野蛮地修改了state，却没有驱动组件进行重新渲染，既然组件没有重新渲染，当然不会反应this.state值的变化；而this.setState()函数所做的事情，首先是改变this.state的值，然后驱动组件经历更新过程，这样才有机会让this.state里新的值出现在界面上。

如果直接修改state，就会出现当你连续点击”+“按钮三次，this.state中的count字段值已经被增加到了3，但是没有重新渲染，这时候点击一次”-“按钮，触发的onClickDecrementButton函数依然是用this.setState改变组件状态，这个函数调用首先把this.state中的count值从3减少为2，然后触发重新渲染，于是我们看到界面上的数字一下子从0跳跃到2.

# 三、prop和state对比 #

总结一下prop和state的区别：

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