react~props和state的介绍与使用

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的区别

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