react --- React中state和props分别是什么？

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是什么呢？

State is similar to props, but it is private and fully controlled by the component.

一个组件的显示形态能够由数据状态和外部参数所决定，外部参数也就是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是惟一可以初始化的地方。

setState接受一个对象或者函数做为第一个参数，只须要传入须要更新的部分便可，不须要传入整个对象，好比：

export default class ItemList extends React.Component{
  constructor(){
    super();
    this.state = {
      name:'axuebin',
      age:25,
    }
  }
  componentDidMount(){
    this.setState({age:18})  
  }
}

在执行完setState以后的state应该是{name:'axuebin',age:18}。

setState还能够接受第二个参数，它是一个函数，会在setState调用完成而且组件开始从新渲染时被调用，能够用来监听渲染是否完成：

this.setState({
  name:'xb'
},()=>console.log('setState finished'))

总结

state的主要做用是用于组件保存、控制以及修改本身的状态，它只能在constructor中初始化，它算是组件的私有属性，不可经过外部访问和修改，只能经过组件内部的this.setState来修改，修改state属性会致使组件的从新渲染。

区别

1. state是组件本身管理数据，控制本身的状态，可变；
2. props是外部传入的数据参数，不可变；
3. 没有state的叫作无状态组件，有state的叫作有状态组件；
4. 多用props，少用state。也就是多写无状态组件。