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 向下传递到它的子组件中