用 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 写法

用 useState 实现 state 和 setState 功能 ​

用 useState 实现 state 和 setState 功能