이 글은 React Hooks에 대한 심층적인 이해를 제공할 것입니다!

React의 Hook을 아시나요? 이 글은 여러분에게 React Hooks에 대한 심층적인 이해를 제공할 것입니다. 여러분에게 도움이 되기를 바랍니다.

Preface

Hook는 클래스를 작성하지 않고도 상태 및 기타 React 기능을 사용하는 데 사용됩니다. 그렇다면 Hook이 정확히 무엇인지, 왜 Hook을 사용해야 하는지, React가 제공하는 일반적인 Hook는 무엇인지, Hook를 사용자 정의하는 방법은 다음과 같습니다. [관련 권장사항: Redis 동영상 튜토리얼]

훅이란 무엇입니까

훅은 후크로 번역됩니다. 후크는 외부 기능에 대한 연결을 담당하는 기능 구성 요소 내의 기능입니다.

React는 몇 가지 일반적인 후크를 제공하며, React는 사용자 정의 후크도 지원합니다. 이러한 후크는 함수에 외부 기능을 도입하는 데 사용됩니다.

컴포넌트에 외부 기능을 도입해야 하는 경우 React에서 제공하는 후크를 사용하거나 후크를 사용자 정의할 수 있습니다.

예를 들어 컴포넌트에 상태 관리 기능을 도입한다면 useState 함수를 사용할 수 있습니다. useState의 사용법은 아래에서 자세히 소개하겠습니다.

Hook을 사용하는 이유

Hook를 사용하는 두 가지 주요 이유는 다음과 같습니다.

• 논리 재사용을 단순화합니다.
• 복잡한 구성 요소를 더 쉽게 이해할 수 있도록 합니다.

1. 로직 재사용 단순화

Hooks가 등장하기 전에는 React가 로직 재사용을 위해 상위 컴포넌트, 렌더 소품과 같은 복잡한 디자인 패턴을 빌려야 했지만, 상위 컴포넌트는 중복된 컴포넌트 노드를 생성했습니다. , 디버깅을 더욱 복잡하게 만듭니다.

후크를 사용하면 구성 요소 구조를 수정하지 않고도 상태 로직을 재사용할 수 있습니다. 사용자 정의 후크의 사용법은 아래에서 자세히 소개됩니다.

2. 복잡한 구성 요소를 더 쉽게 이해할 수 있도록

클래스 구성 요소에서는 동일한 비즈니스 논리에 대한 코드가 구성 요소의 다양한 수명 주기 기능에 분산되어 있으며 Hooks는 동일한 비즈니스 논리에 대한 코드를 함께 집계할 수 있습니다. 비즈니스 로직이 명확하게 분리되어 있어 코드를 더 쉽게 이해하고 유지 관리할 수 있습니다.

4. 일반적으로 사용되는 Hooks

1. useState

useState는 React 함수 구성 요소에 상태를 추가할 수 있는 Hook입니다.

사용 예시는 다음과 같습니다.

import React, { useState } from 'react';

function Example() {
  // 声明一个叫 "count" 的 state 变量
  const [count, setCount] = useState(0);
  // ...

위 코드는 상태 변수 개수를 초기값 0으로 선언하고, setCount를 호출하여 현재 개수를 업데이트합니다.

2.useEffect

useEffect를 사용하면 함수 구성 요소에서 부작용 작업을 수행할 수 있습니다.

부작용은 현재 실행 결과와 관련이 없는 코드 조각을 의미합니다. 일반적인 부작용 작업에는 데이터 획득, 구독 설정 및 React 구성 요소의 DOM 수동 변경이 포함됩니다.

useEffect는 두 개의 매개변수를 받을 수 있으며 코드는 다음과 같습니다.

useEffect(callback, dependencies)

첫 번째 매개변수는 실행할 함수 콜백이고 두 번째 매개변수는 선택적 종속성 배열 종속성입니다.

종속성은 선택 사항입니다. 지정하지 않으면 각 함수 구성 요소가 실행된 후에 콜백이 실행됩니다. 지정된 경우 종속성 값이 변경될 때만 실행됩니다.

사용 예시는 다음과 같습니다.

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;

    return () => {
        // 可用于做清除，相当于 class 组件的 componentWillUnmount
    }

  }, [count]); // 指定依赖项为 count，在 count 更新时执行该副作用
  // ...

위 코드는 useEffect를 사용하여 종속성 카운트가 업데이트되고 Side Effect 함수가 실행되며 콜백 함수를 반환하여 마지막 실행 결과가 지워지는 경우를 구현합니다.

또한 useEffect는 부작용 실행을 위한 네 가지 타이밍을 제공합니다.

• 각 렌더링 후 실행: 두 번째 종속성 매개변수는 제공되지 않습니다. 예를 들어, useEffect(() => {});
• 첫 번째 렌더링 이후에만 실행됩니다: 빈 배열을 종속성으로 제공합니다. 예를 들어, useEffect(() => {}, []);
• 처음 실행되고 종속성 변경 후 실행: 종속성 배열을 제공합니다. 예를 들어, useEffect(() => {}, [deps]);
• 구성 요소를 마운트 해제한 후 실행 : 콜백 함수를 반환합니다. 예를 들어 useEffect() => { return () => {} }, []).

3. useCallback

useCallback에 의해 정의된 콜백 함수는 종속성이 변경될 때만 콜백 함수를 다시 선언하므로 구성 요소가 중복 콜백 함수 를 생성하지 않도록 합니다. 그리고 이 콜백 함수를 속성으로 받는 구성 요소는 자주 다시 렌더링할 필요가 없습니다. 사용 예는 다음과 같습니다.

const memoizedCallback = useCallback(() => {
  doSomething(a, b)
}, [a, b])

위 코드는 종속성 a와 b가 변경될 때만 콜백 함수를 다시 선언합니다.

4.useMemo

useMemo에 정의된 생성 함수는 종속성이 변경될 때만 다시 계산되므로 렌더링될 때마다

오버헤드가 높은 계산을 반복하지 않고

이 계산된 값을 받는 데 도움이 됩니다. 자주 다시 렌더링할 필요가 없습니다. 사용 예는 다음과 같습니다.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b])

위 코드는 종속성 a와 b가 변경될 때만 다시 계산됩니다.

5. useRef

useRef는 구성 요소의 수명 주기 동안 지속되는 ref 객체를 반환합니다. 그는 2가지 용도로 사용됩니다:

• 保存 DOM 节点的引用；
• 在多次渲染之间共享数据。

保存 DOM 节点的引入使用示例如下：

function TextInputWithFocusButton() {
  const inputEl = useRef(null)
  const onButtonClick = () => {
    // `current` 指向已挂载到 DOM 上的文本输入元素
    inputEl.current.focus()
  }
  return (
    <>
      <input ref={inputEl} type=&#39;text&#39; />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  )
}

以上代码通过 useRef 创建了 ref 对象，保存了 DOM 节点的引用，可以对 ref.current 做 DOM 操作。

在多次渲染之间共享数据示例如下：

import React, { useState, useCallback, useRef } from 'react'

export default function Timer() {
  // 定义 time state 用于保存计时的累积时间
  const [time, setTime] = useState(0)

  // 定义 timer 这样一个容器用于在跨组件渲染之间保存一个变量
  const timer = useRef(null)

  // 开始计时的事件处理函数
  const handleStart = useCallback(() => {
    // 使用 current 属性设置 ref 的值
    timer.current = window.setInterval(() => {
      setTime((time) => time + 1)
    }, 100)
  }, [])

  // 暂停计时的事件处理函数
  const handlePause = useCallback(() => {
    // 使用 clearInterval 来停止计时
    window.clearInterval(timer.current)
    timer.current = null
  }, [])

  return (
    <div>
      {time / 10} seconds.
      <br />
      <button onClick={handleStart}>Start</button>
      <button onClick={handlePause}>Pause</button>
    </div>
  )
}

以上代码通过 useRef 创建了一个变量名为 timer 的 ref 对象，该对象可以在跨组件渲染时调用，在开始计时时新建计时器，在暂停计时时清空计时器。

6. useContext

useContext 用于接收一个 context 对象并返回该 context 的值，可以实现跨层级的数据共享。

示例如下：

// 创建一个 context 对象
const MyContext = React.createContext(initialValue)
function App() {
  return (
    // 通过 Context.Provider 传递 context 的值
    <MyContext.Provider value=&#39;1&#39;>
      <Container />
    </MyContext.Provider>
  )
}

function Container() {
  return <Test />
}

function Test() {
  // 获取 Context 的值
  const theme = useContext(MyContext) // 1
  return <div></div>
}

以上代码通过 useContext 取得了 App 组件中定义的 Context，做到了跨层次组件的数据共享。

7. useReducer

useReducer 用来引入 Reducer 功能。

示例如下：

const [state, dispatch] = useReducer(reducer, initialState)

它接受 Reducer 函数和状态的初始值作为参数，返回一个数组。数组的第一个成员是状态的当前值，第二个成员是发送 action 的 dispatch 函数。

五、自定义 Hooks

通过自定义 Hooks，可以将组件逻辑提取到可重用的函数中。

1. 如何创建自定义 Hooks？

自定义 Hooks 就是函数，它有 2 个特征区分于普通函数：

• 名称以 “use” 开头；
• 函数内部调用其他的 Hook。

示例如下：

import { useState, useCallback } from 'react'

function useCounter() {
  // 定义 count 这个 state 用于保存当前数值
  const [count, setCount] = useState(0)
  // 实现加 1 的操作
  const increment = useCallback(() => setCount(count + 1), [count])
  // 实现减 1 的操作
  const decrement = useCallback(() => setCount(count - 1), [count])
  // 重置计数器
  const reset = useCallback(() => setCount(0), [])

  // 将业务逻辑的操作 export 出去供调用者使用
  return { count, increment, decrement, reset }
}

// 组件1
function MyComponent1() {
  const { count, increment, decrement, reset } = useCounter()
}

// 组件2
function MyComponent2() {
  const { count, increment, decrement, reset } = useCounter()
}

以上代码通过自定义 Hooks useCounter，轻松的在 MyComponent1 组件和 MyComponent2 组件之间复用业务逻辑。

2. 自定义 Hooks 库 - react-use

React 官方提供了 react-use 库，其中封装了大量可直接使用的自定义 Hooks，帮助我们简化组件内部逻辑，提高代码可读性、可维护性。

其中我们常用的自定义 Hooks 有：

• useLocation 和 useSearchParam：跟踪页面导航栏位置状态；
• useScroll：跟踪 HTML 元素的滚动位置；
• useScrolling：跟踪 HTML 元素是否正在滚动；
• useAsync, useAsyncFn, and useAsyncRetry：解析一个 async 函数；
• useTitle：设置页面的标题。

可至 react-use 官网学习使用。

六、小结

本文从 Hooks 究竟是什么，为什么要使用 Hooks，React 提供了哪些常用 Hooks，以及如何自定义 Hooks 4 个方面介绍了 React Hooks，相信大家对 React Hooks 已经有了更加深入的理解。

希望能对你有所帮助，感谢阅读～

更多编程相关知识，请访问：编程入门！！

위 내용은 이 글은 React Hooks에 대한 심층적인 이해를 제공할 것입니다!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!