React Hooks摘要

2 年 ago

韵, 科

2 minutes

首先

我是一名新入职的工程师。这篇文章是为了达到一个目的而开始写的，那就是为了能随时回顾学习中的React功能之一——Hooks，并希望能够成为一个有用的参考。

React Hooks总结第一卷

首先，关于React的情况如下。

React是用于Web和本地用户界面的库，可以使用组件来创建用户界面。

1. Hooks 是什么？

React Hooks是一种功能，它允许我们在React中处理状态并实现与生命周期相关的操作，而无需使用类。利用React Hooks，我们可以编写简洁易读的代码。

2. 使用 useState 钩子

useState钩子用于在函数组件内引入状态。

useState可以持有独立的值，因此可以在一个组件中管理多个状态。此外，还可以处理复杂数据，如数组和对象。每个useState都会创建一个独立的状态，因此可以多次调用useState来保持不同的值。

下面是useState的基本使用示例。

import React, { useState } from 'react';

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

  return (
    <div>
      <p>現在のカウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>カウントを増やす</button>
    </div>
  );
}

通过使用useState，在上述代码中，每次点击按钮都会加1。

实际操作情况

3. useEffect钩子

useEffect钩子用于处理组件的副作用（例如API调用、订阅、数据更改等）。

使用useEffect可以将函数的执行时机推迟到React渲染后。在useEffect中，我们可以在组件卸载时解除在组件挂载时进行的处理。副作用函数是在每次渲染时都会执行的机制。

以下是`useEffect`的基本使用示例。

import React, { useState, useEffect } from 'react';

function DataFetchingComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // データの取得ロジック
    const fetchData = async () => {
      try {
        const result = await fetch('https://jsonplaceholder.typicode.com/todos/1');
        const jsonData = await result.json();
        setData(jsonData);
      } catch (error) {
        console.error('データの取得に失敗しました:', error);
      }
    };
    
    fetchData();// 依存配列が空の場合、マウント時にのみ実行

  return (
    <div>
      <p>取得したデータ: {data ? JSON.stringify(data) : 'データなし'}</p>
    </div>
  );
}

上述的代码具有以下的结构。

函数组件的定义

function DataFetchingComponent() {
  // ...
}

这段代码定义了一个名为DataFetchingComponent的React函数组件。

国家的设置

const [data, setData] = useState(null);

使用useState钩子来管理组件的状态。data存储获取到的数据，setData是用来更新数据的函数。初始值设置为null。

使用 useEffect 钩子

useEffect(() => {
  // ...
}, []); // 依存配列が空の場合、マウント時にのみ実行

在这种情况下，包含了数据获取逻辑。
useEffect 钩子函数被用于在 React 组件渲染后执行异步或有副作用的操作。第二个参数指定了 useEffect 钩子函数依赖的值的数组。当这些值发生变化时，useEffect 将再次执行。然而，如果数组为空，useEffect 将只在初始渲染时执行一次，并在后续重新渲染时不再执行。

获取数据的逻辑 de

const fetchData = async () => {
  try {
    const result = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    const jsonData = await result.json();
    setData(jsonData);
  } catch (error) {
    console.error('データの取得に失敗しました:', error);
  }
};

fetchData();

・const fetchData = async () => { … }: fetchData函数被声明为异步函数。其中包含获取数据的逻辑。
通过使用async关键字，可以暂停执行下一行代码，直到Promise被解析为止。在上面的例子中，fetch函数返回一个Promise，所以在该结果被解析之前，该处理将等待，并随后执行下一行代码。

使用try-catch块进行错误处理：如果成功获取数据，则使用setData将获取的数据设置为组件的状态。如果发生错误，则将错误消息输出到控制台。

・fetchData();：fetchData函数将在组件挂载时执行。

组件的渲染

Copy code
return (
  <div>
    <p>取得したデータ: {data ? JSON.stringify(data) : 'データなし'}</p>
  </div>
);

最后，组件将返回JSX以显示获取到的数据。如果数据存在，则将其转换为JSON字符串进行显示；如果数据不存在，则显示”无数据”。

实际操作

4. 使用useContext钩子

useContext钩子是用于通过React上下文在组件树中传递值的。

为了与React组件树中被视为“全局”的数据进行交互而设计。
由于它使得组件的重复利用更加困难，因此必须谨慎使用。
通过上下文，不再需要将数据在每个层级传递，而是可以直接访问嵌入在上下文中的数据，无需进行props传递的一系列操作。

以下是useContext的基本用法示例。

import React, { useContext } from 'react';

const ThemeContext = React.createContext();

function ThemedComponent() {
  const theme = useContext(ThemeContext);

  return (
    <div style={{ background: theme.background, color: theme.color}}>
      テーマに基づくコンポーネント
    </div>
  );
}

创建语境

const ThemeContext = createContext();

使用createContext方法创建一个新的上下文对象。这个上下文对象提供了在ThemedComponent内部使用的主题信息。

主题化组件

function ThemedComponent() {
  const theme = useContext(ThemeContext);

  return (
    <div style={{ background: theme.background, color: theme.text }}>
      テーマに基づくコンポーネント
    </div>
  );
}

ThemedComponent使用useContext钩子从ThemeContext获取主题信息。useContext是用于在React组件内访问上下文值的钩子。

useContext函数接受一个参数作为目标上下文对象，并返回该上下文提供的值。在这种情况下，将ThemeContext提供的主题信息存储在theme变量中。

最终，ThemedComponent会渲染一个div元素，并根据theme.background和theme.color来设置其样式。这将显示一个应用了基于主题的样式的组件。

使用上下文

ThemedComponent需要在父组件中使用ThemeContext.Provider来设置上下文的值。例如，可以按照以下方式完成。

function App() {
  const themeValue = { background: 'lightblue', text: 'darkblue' };

  return (
    <ThemeContext.Provider value={themeValue}>
      <ThemedComponent />
    </ThemeContext.Provider>
  );
}

通过在父组件中使用ThemeContext.Provider来提供上下文的值，这样ThemedComponent组件就可以使用useContext来访问这个值。