是自定义钩子特殊功能，如功能组件 w.r.t.钩子？

Question

我们知道，如果我们在 Function Component 中使用 useState，则不会每次都在该 Function 组件的 re-renders 上创建状态，而是使用现有状态。请参阅下面的 Example 函数组件：

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

当我们在customHook 中使用useState 时（见下文），每次调用“useCustomHook”都会创建一个新状态，这表明所有自定义挂钩都只是常规函数。

function useCustomHook() {
  const [cnt, setCnt] = useState(0);
  return [cnt, setCnt];
}

Answer 1

您可以从下面的 sn-p 中看到，useState 调用 在 customHook 中是持久的，就像它在常规组件中一样。您可以跟踪它甚至操纵它。 它不会在每次挂钩调用时重新创建。

From React DOCS: Custom Hooks

自定义 Hooks 是一种自然遵循 Hooks 设计的约定，而不是 React 功能。

我的自定义 Hooks 是否必须以“use”开头？

请做。这个约定非常重要。没有它，我们将无法自动检查是否违反 Hooks 规则，因为我们无法判断某个函数是否包含对 Hooks 内部的调用。

使用同一个 Hook 的两个组件是否共享状态？

没有。自定义 Hook 是一种重用有状态逻辑的机制（例如设置订阅并记住当前值），但每次使用自定义 Hook 时，其中的所有状态和效果都是完全隔离的。

自定义 Hook 如何获得隔离状态？

对 Hook 的每次调用都会进入隔离状态。因为我们直接调用 useFriendStatus，所以从 React 的角度来看，我们的组件只调用了 useState 和 useEffect。而且正如我们之前所了解的，我们可以在一个组件中多次调用 useState 和 useEffect ，它们将是完全独立的。

function App(){

  const [hookState,setHookState] = useSomeCustomHook();
  
  function updateHookState() {
    setHookState((prevState)=>prevState+1);
  }
  
  return(
    <React.Fragment>
      <div>Custom Hook State: {hookState}</div>
      <button onClick={updateHookState}>Count</button>
    </React.Fragment>
  );
}

function useSomeCustomHook() {
  const [hookState,setHookState] = React.useState(0);
  return ([
    hookState,
    setHookState
  ]);
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>