【Day05】Data Flow 与 State

Data Flow

中文直译为资料流，
React 中文圈通常说法是
单向资料流／单一资料流，
如字面所述，表示 React 中
所有资料数据只能单向传递的机制。

State

state 在 react 中的角色是保存资料
在资料处理中与 props 各分其职。

state 与 props 的差异：

• props：是父元件传给子元件的参数，不可更改（资料源头是父元件）
• state：封装在元件内部，只处理元件内部的资料（资料源头是元件内部）

state 的特性：

• 任何 state 总是由某个特定的元件所拥有
• 父或子元件都不会知道该元件的 state 状态
• 任何 state 只能影响自身节点「以下」的元件，因此又被称为「local state」

依照以上的逻辑，
被传到某个元件内的 props 如果要更改内容，
应该将其转换成 state，
变成单独属於该元件的 state 後，
按照「单向资料流」的规则来更改 state。

而如果将自己的 state 传给子元件，
则该 state 会成为子元件的 props。

使用 State 的注意事项

1. 不可以直接修改 State，而是使用 setState

唯一可以指定 this.state 值的地方，仅有 class component 的 constructor

2. State 的更新可能是非同步的
3. State 更新的 Object 会被 Merge

setState笔记

• 移除 State 某项值时，setState 中「存在但没有被写到的state」不会被移除，要移除的话，可以把该 state 指定为 undefined。
• 使用 setState 的时候如果新值和旧值相关，内容应传入一个 function 而非表达式，让原始 state 成为计算参数，以免非同步的关系不是取到最新的资料。
• setState 的第一个参数是原始 state，第二个参数则是每次 render 时更新的 props

set State 范例

// 错误
this.setState({
  counter: this.state.counter + this.props.increment,
});

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

参考资料

• React 官网-State 和生命周期
• I Want To Know React - 初探提升 state