React/数据流

“Props”

当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性（attributes）转换为单个对象传递给组件，这个对象被称之为 “props”。

props的只读性

组件无论是使用函数声明还是通过 class 声明，都决不能修改自身的 props。

组件可以接受任意 props，包括基本数据类型，React 元素以及函数。

---

 

“defaultProps”

defaultProps 可以为 Class 组件添加默认 props。这一般用于 props 未赋值，但又不能为 null 的情况。例如：

class CustomButton extends React.Component {
  // ...
}

CustomButton.defaultProps = {
  color: 'blue'
};

---

 

“state” 

但是 state 是私有的，并且完全受控于当前组件。“局部的”、“封装的”

 

正确的使用State

1.不要直接修改State

使用setState方法修改state而不是this.state.user=这种方式

2.State的更新可能是异步的

出于性能考虑，React 可能会把多个 setState() 调用合并成一个调用。

因为 this.props 和 this.state 可能会异步更新，所以你不要依赖他们的值来更新下一个状态。

要解决这个问题，可以让 setState() 接收一个函数而不是一个对象。这个函数用上一个 state 作为第一个参数，将此次更新被应用时的 props 做为第二个参数：

this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

3.State的更新会被合并

当你调用 setState() 的时候，React 会把你提供的对象合并到当前的 state。(浅合并)

数据是向下流动的

不管是父组件或是子组件都无法知道某个组件是有状态的还是无状态的，并且它们也并不关心它是函数组件还是 class 组件。

因为state的私有性，所以组件可以选择把它的 state 作为 props 向下传递到它的子组件中