props 是参数的传递, 从上层模块向下层模块进行拿传递; 而 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 函数返回一个每一项都是的数组, 也就是说这里其实包含了 data.length 个组件, 数据通过在组件上自定义一个参数传递. 当然, 这里想传递几个自定义参数都可以.
在中是这样的:
- 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.
比如, 我们经常会通过异步操作来获取数据, 我们需要在 didMount 阶段来执行异步操作:
- componentDidMount(){
- fetch('url')
- .then(response => response.JSON())
- .then((data) => {
- this.setState({itemList:item});
- }
- }
当数据获取完成后, 通过 this.setState 来修改数据状态.
当我们调用 this.setState 方法时, React 会更新组件的数据状态 state, 并且重新调用 render 方法, 也就是会对组件进行重新渲染.
注意: 通过 this.state = 来初始化 state, 使用 this.setState 来修改 state,constructor 是唯一能够初始化的地方.
prop 和 state 的区别
state 是组件自己管理数据, 控制自己的状态, 可变;
props 是外部传入的数据参数, 不可变;
没有 state 的叫做无状态组件, 有 state 的叫做有状态组件;
多用 props, 少用 state. 也就是多写无状态组件.
来源: https://www.cnblogs.com/lori/p/10147711.html