My App

自定义钩子

自定义钩子

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;

On this page