自定义钩子

React 支持自定义钩子。这意味着除了 React 附带的钩子，如 useState 和 useEffect ，我们可以创建自己的钩子，像 useInterval 和 useOnScroll 。

自定义钩子是 React 钩子最棒的部分。它们让整个 API 发光，老实说，我一直在焦急地等待我们达到课程的这一点，以便可以与您分享它们！

如果你一直在苦苦理解为什么人们喜欢钩子，希望这节课能让你明白！😄

并没有听起来那么可怕

首先要明白的是，我们并不是在真正发明自己的钩子。

当我第一次听到“自定义钩子”这个术语时，感觉非常吓人，就像只有最先进的高级用户才会使用的东西。使用默认钩子时，钩子已经够难了！

我意识到关键时刻是当我开始把它们视为自定义钩子组合时。

让我们来看一个例子。

这是上面视频中的代码：

import React from 'react';

import Clock from './Clock'

function App() {
  const [
    showClock,
    setShowClock
  ] = React.useState(true);
  
  return (
    <>
      {showClock && <Clock />}
      <button
        className="clock-toggle"
        onClick={() => setShowClock(!showClock)}
      >
        Toggle clock
      </button>
    </>
  );
}

export default App;

Open Sandbox

自定义钩子

并没有听起来那么可怕

视频摘要

On this page