用 useState 实现 state 和 setState 功能

让函数组件实现 state 和 setState

• 默认函数组件没有 state
• 函数组件是一个纯函数，执行完即销毁，无法存储 state
• 需要 State Hook，即把 state 功能“钩”到纯函数中

例子

import React, {useState} from "react";

function ClickCounter() {
  // 数组的解构
  // const arr = userState(0)
  // const count = arr[0]
  // const setCount = arr[1]
  // useState 就是一个 Hook，最基本的一个 Hook
  const [count, setCount] = useState(0)
  const [name, setName] = useState('lzw.')

  function setVal() {
    setCount(count + 1)
    setName(name + '-' + count)
  }

  return <div>
    <p>你点击了多少次 {count} 次 {name}</p>
    <button onClick={setVal}>点击</button>
  </div>
}

export default ClickCounter

useState 使用总结

• useState(0) 传入初始值，返回数组[state,setState]
• 通过 state 获取值
• 通过 setState(1) 修改值

Hooks 命名规范

• 规定所有的 Hooks 都是 use 开头，如 useXxx
• 自定义 Hook 也需要以 use 开头
• 非 Hooks 的地方，尽量不要使用 useXxx 写法