Re: 新手让网页 act 起来: Day10 - React Hooks 之 useState (1)

前言

React hooks 是在 React 16.8 版本才加进来的功能。那到底什麽是 Hooks 呢？它其实就是 React 提供的内建函式，能让我们在 Function component 中使用 State 及生命周期的功能。

当我们使用 Hooks 时，有一些规则须遵守，如下：

Class component 无法使用，只能在 Function component 使用。

// Class component
class Foo extends React.Component {
  render() {
    return <h1>Hello</h1>
  }
}

// Function component
function Boo() {
  return <h1>Hello</h1>
}

只在元件或是自定义的 Hook 最上层呼叫 Hook，不要在条件式、回圈、巢状 function 呼叫。这样子能够确保每一次 component 渲染的时候，这些 Hooks 被呼叫的顺序都是一致的。

function Foo() {
  const [state, setState] = useState() //正确的

    // 以下错误示范
  if(true){
    const [state, setState] = useState() 
  }
    
  for(let i = 0; i < 5; i++){
    const [state, setState] = useState() 
  }
    
  function boo(){
    const [state, setState] = useState() 
  }
}

useState()

useState 它是用来管理状态的函式，基本的使用方式如下：

const [state, setState] ＝ useState(initialValue)

当 useState 函式被呼叫时，会回传含有两个值的阵列，第一个值是状态，第二个值是修改状态的函式（命名惯例上会是 set + 前面 state 的名称）。

所以想要变更 state 的值时，就使用 setState 这个函式，一旦 state 的值改变了，就会触发 re-render，接着 state 就会更新。

例如：

const [count, setCount] = useState(0) // 建立一个初始值为 0 的计数状态

setCount(count + 1) //利用 setCount 更改 count 的值

现在就让我们运用上面的基础概念，实作个简单的计数器，来练习使用 useState 吧！

<html lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
  <div id='root'></div>
  <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
  <script src="https://unpkg.com/@babel/[email protected]/babel.js"></script>

  <script type='text/babel'>
    const Counter = () => {
      const [count, setCount] = React.useState(0)
      //使用 useState 建立 Count 状态，并将 0 设为初始状态

      const increaseHandler = () => {
        setCount(count + 1)
        // 点击 plus 按钮，将 count 加 1 ，并使用 setCount 改变 Count 状态
      }

      const decreaseHandler = () => {
        if (count === 0) return

        setCount(count - 1)
        // 点击 minus 按钮，将 count 减 1 ，并使用 setCount 改变 Count 状态
      }

      return (
        <div>
          <button onClick={decreaseHandler}>-</button>
          <span>{count}</span>
          <button onClick={increaseHandler}>+</button>
        </div>
      )
    };

    ReactDOM.render(<Counter />, document.getElementById('root'))

  </script>
</body>

</html>