【React源码 Hook 原理(概览)

React Hook 是一种在函数组件中使用 state 和其他 React 特性的方式。它们使得组件更加清晰，且可以复用一些有状态的逻辑。

React Hook 的原理是通过以下规则来实现的：

1. 仅在 React 函数组件的顶层调用 Hook。不要在循环、条件判断或者嵌套函数中调用。
2. 不要在普通的 JavaScript 函数中调用 Hook，仅在 React 的函数组件中调用。

下面是一个简单的自定义 Hook 示例，它返回一个状态值和一个用于更新这个状态值的函数：

import React, { useState } from 'react';
 
function useCounter(initialValue) {
  const [count, setCount] = useState(initialValue);
 
  return [count, setCount];
}
 
function CounterComponent() {
  const [count, setCount] = useCounter(0);
 
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </>
  );
}
 
export default CounterComponent;

在这个例子中，useCounter 是一个自定义的 Hook，它内部使用了 useState 来管理状态。CounterComponent 是一个函数组件，它使用了 useCounter 这个自定义 Hook。每次点击按钮，count 的值会增加1。