你对自定义hook的理解，模拟简易版的useState

自定义 Hook 是一种让你能够在函数组件中重用状态逻辑的方式。它是一个函数，以 "use" 开头，并且可以调用其他的 Hook。通过自定义 Hook，你可以将组件内部的状态逻辑提取出来，使得代码更加可重用和易于理解。

import { useState } from 'react';

// 自定义 Hook
function useCustomState(initialValue) {
  const [state, setState] = useState(initialValue);

  const updateState = (newValue) => {
    setState(newValue);
  };

  return [state, updateState];
}

// 使用自定义 Hook
function MyComponent() {
  const [count, setCount] = useCustomState(0);

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

在上面的代码中，我们导入了 React 的 useState Hook，并创建了一个名为 `useCustomState` 的自定义 Hook。该 Hook 接受一个初始值作为参数，并返回一个包含两个元素的数组：状态值和更新状态的函数。

使用这个自定义 Hook，你可以在函数组件中像使用 useState 一样来管理状态：

function MyComponent() {
  const [count, setCount] = useCustomState(0);

  function increment() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

在上面的代码中，我们使用 `useCustomState` 自定义 Hook 来创建了一个名为 `count` 的状态变量，并通过 `setCount` 函数来更新它。每次点击按钮时，`count` 的值会增加，并渲染到页面上。

这就是一个简易版的 useState 自定义 Hook 的模拟实现。当你在实际开发中遇到需要重用状态逻辑的情况时，可以使用自定义 Hook 来简化代码和提高可维护性。