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 =>
{/**/}

ReactDOM.render(, document.getElementById('root'))

所得的HTML代码是:


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

Component(props) = View

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

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


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 => 

{props.title}

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 (

{ this.state.counter }

) } }
总结

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

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

你可能感兴趣的:(3.组件数据)