React Props and State

@octocat :+1: Props looks great - it’s ready to mount! :shipit:

#

###The data in React flows from top to down(parent to child) and store in Props and state, when flow between cpmponnets it is in Props while in the component inside it is in the component.

###Props: for a component, it can acepts some params from outside, which is so called Props(either from parents or store).

###Property of Props: props used to decrate the component, so when the component is initialed and got instance, the props is unchangable and readable only. because when the props is changed during mounting the componet, if the props is changed, the component will be unpreditable.
所以只有通过父组件渲染方式才可以把props传进去。
Example:

1
2
3
4
5
6
7
8
9
import Item from "./item";
export default class ItemList extends React.Component{
  const itemList = data.map(item => <Item item=item />);
  render(){
    return (
      {itemList}
    )
  }
}

In the child Component:

1
2
3
4
5
6
7
export default class Item extends React.Component{
  render(){
    return (
      <li>{this.props.item}</li>
    )
  }
}

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

默认参数
在组件中，我们最好为props中的参数设置一个defaultProps，并且制定它的类型。比如，这样：

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

1
2
3
4
5
6
7
Item.defaultProps = {
  item: 'Hello Props',
};

Item.propTypes = {
  item: PropTypes.string,
};

关于propTypes，可以声明为以下几种类型：

1
2
3
4
5
6
7
optionalArray: PropTypes.array,
optionalBool: PropTypes.bool,
optionalFunc: PropTypes.func,
optionalNumber: PropTypes.number,
optionalObject: PropTypes.object,
optionalString: PropTypes.string,
optionalSymbol: PropTypes.symbol,

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

###一个组件的显示形态可以由数据状态和外部参数所决定，外部参数也就是props，而数据状态就是state

1
2
3
4
5
6
7
8
9
10
11
12
13
export default class ItemList extends React.Component{
  constructor(){
    super();
    this.state = {
      itemList:'一些数据',
    }
  }
  render(){
    return (
      {this.state.itemList}
    )
  }
}

首先，在组件初始化的时候，通过this.state给组件设定一个初始的state，在第一次render的时候就会用这个数据来渲染组件。

state不同于props的一点是，state是可以被改变的。不过，不可以直接通过this.state=的方式来修改，而需要通过this.setState()方法来修改state。

比如，我们经常会通过异步操作来获取数据，我们需要在didMount阶段来执行异步操作

1
2
3
4
5
6
  fetch('url')
    .then(response => response.json())
    .then((data) => {
      this.setState({itemList:item});  
    }
}

setState接受一个对象或者函数作为第一个参数，只需要传入需要更新的部分即可，不需要传入整个对象，比如:

default class ItemList extends React.Component{
1
2
3
4
5
6
7
8
9
10
11
  constructor(){
    super();
    this.state = {
      name:'axuebin',
      age:25,
    }
  }
  componentDidMount(){
    this.setState({age:18})  
  }
}

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

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

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

##总结
state的主要作用是用于组件保存、控制以及修改自己的状态，它只能在constructor中初始化，它算是组件的私有属性，不可通过外部访问和修改，只能通过组件内部的this.setState来修改，修改state属性会导致组件的重新渲染

##Summary

###1.state是组件自己管理数据，控制自己的状态，可变；

###2.props是外部传入的数据参数，不可变；

###3.没有state的叫做无状态组件，有state的叫做有状态组件；

###4.多用props，少用state。也就是多写无状态组件。