Skip to main content

[React] State

單向資料流 (Unidirectional Data Flow)​

  • React Component只有兩種資料型式：1. Props 2. State

  • React中資料的流向只能從父層 Component的 State/Props傳入子 Component的 Props

  • 每當 React偵測到 Props或 State有更新時，就會自動重繪整個 Component

React的更新機制：

  1. Props/State 改變
  2. 重新呼叫 render()
  3. 生成新的 virtual DOM
  4. 新舊 virtual DOM 進行 diff 演算法比對
  5. 把差異更新到真的的 DOM上

State​

  • State是 Component內部維護的的資料。

  • 不能直接對 State賦值，只能透過 setState() 來更新 state。

  • 當 state被更新時 render function會被重新呼叫。

note

在了解 hooks之前，用 Class Component比較好解釋 State，所以暫時還是先用 Class Component的程式來當範例。

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }
  componentDidMount() {
    // 啟動一個 timer 每秒鐘會自動更新時間
    this.timerID = setInterval(() => this.tick(),1000);
  }
  // 當元件要從 DOM 中被移除 (remove) 前，要手動清理監聽事件
  componentWillUnmount() {
    clearInterval(this.timerID);
  }
  tick() {
    // 用 setState() 來更新 State ，React 會自動呼叫 render() 重繪畫面
    this.setState({ date: new Date() });
  }
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

延伸閱讀​

React State

Immutable 對於 React 重要性

Stateful / Stateless Component​

Stateless Component​

（又稱 Pure Component） 是一個 pure function，props傳入什麼他就 render什麼。

const ImageList = props => {
  const images = props.images.map({ description, id, url } => {
    return <img alt={description} key={id} src={urls.regular} />
  })
  return <div>{images}</div>
}

Stateful Component​

內部有維護自身狀態 (State)的改變，通常會伴隨著事件處理或生命週期下觸發狀態的更新。早期只能用 Class Component來寫，現在可以使用 Function Component + hooks來寫。

Controlled / Uncontrolled Element​

Controlled Element​

value存放在 state

state = { term: '' }
render () {
  return (
    <input
      type="text"
      value={this.state.term}
      onChange={e => this.setState({ term: e.target.value })}
    />
  )
}

Uncontrolled Element​

value存放在 DOM裡面，必須要從 DOM取出來後才能知道 value是什麼（古早時期 jQuery的慣用寫法）

* 我們應該將所有資訊存放在 Component內而非 DOM裡面