現(xiàn)有如下一個React應用：

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  constructor(...args) {
    super(...args);
    this.state = { text: "", checked: false };
  }
  render() {
    const { text, checked } = this.state;
    return (
      <div>
        <input
          type="text"
          value={text}
          onChange={e => this.setState({ text: e.target.value })}
        />
        <input
          type="checkbox"
          checked={checked}
          onChange={e => this.setState({ checked: e.target.checked })}
        />
        <ul>
          <li>{text}</li>
          <li>{checked.toString()}</li>
        </ul>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

我們看到App組件是類組件，因為這里用到了state。state對象有兩個值，一個是輸入框的text值，一個是復選框的勾選值。這個應用做的事情，就是監(jiān)控輸入框text值的變化和復選框勾選值的變化（用了ul來顯示state的變化）。

由于React引入了React Hooks，什么是Hooks？說簡單點就是可以完全不用類來寫組件了，那用什么寫？函數(shù)。函數(shù)怎么使用state？使用userState函數(shù)。下面我們看看怎么用函數(shù)實現(xiàn)上述功能。

//導入useState
import React, { useState } from "react";
import ReactDOM from "react-dom";

//函數(shù)組件
function App() {
  //useState的參數(shù)為初始狀態(tài)值，返回了一個長度為2的數(shù)組，第一個元素就是我們類組件里的state對象，第二個元素是個函數(shù)，作用相當于類組件里用的setState。這兩個元素的名字隨便是什么都可以
  const [state, setState] = useState({ text: "", checked: false });
  //此函數(shù)的參數(shù)為整個state的部分內(nèi)容，在調(diào)用setState的時候，用這個部分內(nèi)容更新對應的老的內(nèi)容
  const updateState = partialState =>
    setState(oldState => ({
      ...oldState,
      ...partialState
    }));
  return (
    <div>
      <input
        type="text"
        value={state.text}
        onChange={e =>
          updateState({
            text: e.target.value
          })
        }
      />
      <input
        type="checkbox"
        checked={state.checked}
        onChange={() => updateState({ checked: !state.checked })}
      />
      <ul>
        <li>{state.text}</li>
        <li>{state.checked.toString()}</li>
      </ul>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

至于state怎么設計，是分開一個一個處理還是像在本例中集中在一個對象管理，悉聽尊便。