react中state和props的区别有哪些？-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

区别：props是传递给组件的（类似于函数的形参），而state是在组件内部被组件自己管理的（类似于在一个函数内声明的变量）。state是组件自己管理数据，控制自己的状态，可变；props是外部传入的数据参数，不可变。

本教程操作环境：windows10系统、react16，本文适用于所有品牌的电脑。

相关推荐：《React视频教程》

props

React的核心思想就是组件化思想，页面会被切分成一些独立的、可复用的组件。

组件从概念上看就是一个函数，可以接受一个参数作为输入值，这个参数就是props，所以可以把props理解为从外部传入组件内部的数据。由于React是单向数据流，所以props基本上也就是从服父级组件向子组件传递的数据。

用法

假设我们现在需要实现一个列表，根据React组件化思想，我们可以把列表中的行当做一个组件，也就是有这样两个组件：<ItemList/>和<Item/>。

先看看<ItemList/>

import Item from "./item";
export default class ItemList extends React.Component{
  const itemList = data.map(item => <Item item=item />);
  render(){
    return (
      {itemList}
    )
  }
}

列表的数据我们就暂时先假设是放在一个data变量中，然后通过map函数返回一个每一项都是<Item item='数据'/>的数组，也就是说这里其实包含了data.length个<Item/>组件，数据通过在组件上自定义一个参数传递。当然，这里想传递几个自定义参数都可以。

在<Item />中是这样的：

export default class Item extends React.Component{
  render(){
    return (
      <li>{this.props.item}</li>
    )
  }
}

在render函数中可以看出，组件内部是使用this.props来获取传递到该组件的所有数据，它是一个对象，包含了所有你对这个组件的配置，现在只包含了一个item属性，所以通过this.props.item来获取即可。

只读性

props经常被用作渲染组件和初始化状态，当一个组件被实例化之后，它的props是只读的，不可改变的。如果props在渲染过程中可以被改变，会导致这个组件显示的形态变得不可预测。只有通过父组件重新渲染的方式才可以把新的props传入组件中。

默认参数

在组件中，我们最好为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,

总结

props是一个从外部传进组件的参数，主要作为就是从父组件向子组件传递数据，它具有可读性和不变性，只能通过外部组件主动传入新的props来重新渲染子组件，否则子组件的props以及展现形式不会改变。

state

state是什么呢？