Question

我们知道，如果我们在useState中使用Function Component，则不会在该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>
  );
}

就像当我们在useState中有一个customHook一样（见下文）时，每次对“ useCustomHook”的调用都会产生一个新状态，这表明所有自定义挂钩只是常规功能。

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

Answer 1

您可以从下面的代码段中看到，useState调用在customHook中是持久的，就像它在常规组件中一样。您可以跟踪它甚至进行操作。 并非在每次挂接调用时都会重新创建。

From React DOCS: Custom Hooks

自定义挂钩是自然遵循的设计惯例，而不是React功能。

我是否必须以“ use”开头命名自定义挂钩？

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

两个组件是否使用相同的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>

是自定义的钩子特殊功能，例如功能组件。钩子？

1 个答案: