进行拿传递;而state是提局域变量,一般在本模块内使用,props是不能改变的,而state可以通过setState去修改自身的值。
props
React的核心思想就是组件化思想,页面会被切分成一些独立的、可复用的组件。
组件从概念上看就是一个函数,可以接受一个参数作为输入值,这个参数就是props,所以可以把props理解为从外部传入组件内部的数据。由于React是单向数据流,所以props基本上也就是从服父级组件向子组件传递的数据。
用法
假设我们现在需要实现一个列表,根据React组件化思想,我们可以把列表中的行当做一个组件,也就是有这样两个组件:
先看看
import Item from "./item"; export default class ItemList extends React.Component{ const itemList = data.map(item => <Item item=item />); render(){ return ( {itemList} ) } }列表的数据我们就暂时先假设是放在一个data变量中,然后通过map函数返回一个每一项都是
在
export default class Item extends React.Component{ render(){ return ( <li>{this.props.item}</li> ) } }在render函数中可以看出,组件内部是使用this.props来获取传递到该组件的所有数据,它是一个对象,包含了所有你对这个组件的配置,现在只包含了一个item属性,所以通过this.props.item来获取即可。
defaultProps
在组件中,我们最好为props中的参数设置一个defaultProps,并且制定它的类型。比如,这样:
Item.defaultProps = { item: 'Hello Props', }; Item.propTypes = { item: PropTypes.string, };关于propTypes,可以声明为以下几种类型:
optionalArray: PropTypes.array, optionalBool: PropTypes.bool, optionalFunc: PropTypes.func, optionalNumber: PropTypes.number, optionalObject: PropTypes.object, optionalString: PropTypes.string, optionalSymbol: PropTypes.symbol, state
一个组件的显示形态可以由数据状态和外部参数所决定,外部参数也就是props,而数据状态就是state。
export default class ItemList extends React.Component{ constructor(){ super(); this.state = { itemList:'一些数据', } } render(){ return ( {this.state.itemList} ) } }首先,在组件初始化的时候,通过this.state给组件设定一个初始的state,在第一次render的时候就会用这个数据来渲染组件。
setState
state不同于props的一点是,state是可以被改变的。不过,不可以直接通过this.state=的方式来修改,而需要通过this.setState()方法来修改state。
比如,我们经常会通过异步操作
