时间戳

首页 > 解决方案 > 自定义钩子是像函数组件 wrt 钩子这样的特殊功能吗？

javascript - 自定义钩子是像函数组件 wrt 钩子这样的特殊功能吗？

问题描述

正如我们所知，如果我们useState在 a 中使用 a Function Component，则不会每次在re-renders该 Function 组件上创建状态，而是使用现有状态。请参阅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>
  );
}

而当我们有 a useStatein a时customHook（见下文），每次调用 " useCustomHook" 都会产生一个新状态，这表明所有自定义钩子都只是常规函数。

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

标签： javascriptreactjsstatereact-hooks

解决方案

您可以从下面的代码片段中看到，useState调用在 customHook中是持久的，就像它在常规组件中工作一样。您可以跟踪它甚至操纵它。它不会在每个钩子调用中重新创建。

来自 React DOCS：自定义 Hooks

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

我必须以“use”开头来命名我的自定义 Hooks 吗？

请做。这个约定非常重要。没有它，我们将无法自动检查是否违反 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>

推荐阅读