刷刷这些面试题，应该可以浅浅入门React Hook了（上）

📈「作者简介」：不知名十八线技术博主
📚「推荐主页」：阿珊和她的猫
🕐「简历必备」前后端实战项目（推荐：⭐️⭐️⭐️⭐️⭐️）

• Vue.js 和 Egg.js 开发企业级健康管理项目
• 带你从入门到实战全面掌握 uni-app

如何在函数组件中使用 useEffect Hook？它的作用是什么？

使用 React Hook 可以实现更好的错误处理。下面是一个使用 useState 和 useEffect 进行错误处理的示例代码：

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

function MyComponent() {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetchData()
      .then(response => {
        setData(response.data);
      })
      .catch(error => {
        setError(error.message);
      });
  }, []);

  if (error) {
    return <div>Error: {error}</div>;
  }

  if (!data) {
    return <div>Loading...</div>;
  }

  return <div>Data: {data}</div>;
}

export default MyComponent;

// 示例的 fetchData 函数，模拟异步请求
async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  if (!response.ok) {
    throw new Error('Network request failed');
  }
  const data = await response.json();
  return data;
}

在上面的代码中，我们使用了 useState 来管理数据和错误状态。data 存储获取到的数据，error 存储错误信息。

通过 useEffect 钩子，我们在组件挂载时进行数据的获取。如果获取成功，我们使用 setData 更新 data 的状态；如果出现错误，我们使用 setError 更新 error 的状态。

在组件的渲染逻辑中，我们根据不同的状态展示不同的内容。如果有错误，我们显示错误信息；如果数据还没有加载完成，我们显示加载状态；如果数据加载成功，我们显示数据内容。

这种方式可以帮助我们更好地处理错误，并在组件中展示错误信息。通过使用 useState 和 useEffect 结合条件渲染，我们可以根据不同的状态来呈现不同的 UI，从而实现更好的错误处理机制。

请注意，在实际开发中，还可以结合其他的错误处理方案，比如使用 try/catch 来捕获错误，使用错误边界组件来处理组件层次结构中的错误等。具体的错误处理方式取决于你的应用需求和架构设计。

React Hook 中如何处理组件的副作用（side effect）？

在 React Hook 中，可以使用 useEffect 来处理组件的副作用。

useEffect 是一个钩子函数，它接收两个参数：一个回调函数和一个可选的依赖数组。

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // 在这里执行副作用操作
    // 比如订阅事件、发送网络请求、操作 DOM 等

    // 返回一个清理函数（可选）
    return () => {
      // 在组件卸载或依赖变化时执行清理操作
      // 比如取消订阅、清除定时器等
    };
  }, []); // 依赖数组，传入空数组表示只执行一次

  return <div>My Component</div>;
}

export default MyComponent;

在上面的代码中，我们在 useEffect 的回调函数中执行副作用操作，比如订阅事件、发送网络请求、操作 DOM 等。需要注意的是，这些副作用操作应该是没有直接影响或依赖于组件渲染的数据。

如果副作用操作需要清理或在组件卸载时执行某些操作，我们可以在回调函数中返回一个清理函数。当组件卸载或依赖变化时，React 将会调用这个清理函数。

依赖数组是一个可选的参数，用于指定副作用操作依赖的变量。如果依赖数组为空，表示副作用操作只会在组件挂载和卸载时执行一次。如果依赖数组中包含某些变量，那么只有当这些变量发生变化时，副作用操作才会重新执行。

使用 useEffect 可以很方便地处理组件的副作用，并且提供了清理函数的能力，确保在组件被销毁时进行必要的清理操作，避免内存泄漏和无效的操作。

useCallback 和 useMemo Hook 的区别是什么？

useCallback 和 useMemo 都是 React Hook，用于优化函数组件性能。它们的区别在于它们的作用和用法：

1. useCallback: 用于记忆一个函数，当依赖项发生变化时才重新创建该函数。它接收两个参数：回调函数和依赖数组。返回的是一个记忆化后的函数。

import React, { useCallback } from 'react';

function MyComponent() {
  const handleClick = useCallback(() => {
    // 处理点击事件逻辑
  }, []); // 依赖数组，传入空数组表示不依赖任何变量

  return <button onClick={handleClick}>Click Me</button>;
}

export default MyComponent;

在上面的代码中，我们使用 useCallback 来记忆 handleClick 函数。该函数仅在组件首次渲染时创建，而不会在每次渲染时重新创建。这对于将函数作为 prop 传递给子组件或者使用在 useEffect 的依赖数组中时非常有用。通过指定依赖数组，可以控制 useCallback 何时重新创建函数。

2. useMemo: 用于记忆一个值，当依赖项发生变化时才重新计算该值。它接收两个参数：一个回调函数和依赖数组。返回的是一个记忆化后的值。

import React, { useMemo } from 'react';

function MyComponent() {
  const expensiveValue = useMemo(() => {
    // 计算昂贵的值
    return computeExpensiveValue();
  }, [dependency]); // 依赖项数组

  return <div>Value: {expensiveValue}</div>;
}

export default MyComponent;

在上面的代码中，我们使用 useMemo 来记忆 expensiveValue 的值。该值仅在依赖项发生变化时重新计算，而不是在每次渲染时进行。这对于计算昂贵的值或者优化计算结果的缓存非常有用。通过指定依赖数组，可以控制 useMemo 何时重新计算值。

综上所述，useCallback 主要用于记忆函数，适用于处理函数作为 prop 传递给子组件或者在依赖项变化时需要更新函数的情况。useMemo 主要用于记忆值，适用于计算昂贵的值或者优化计算结果的缓存。

useContext Hook 的作用是什么？可以举个例子说明吗？

useContext Hook 用于在函数组件中访问 React 的上下文（Context）。它可以消费一个上下文对象，并返回当前上下文的值。

使用 useContext Hook 的步骤如下：

1. 创建一个上下文对象：通过调用 React.createContext 来创建一个上下文对象，例如：const MyContext = React.createContext();
2. 在某个父组件上设置上下文的值：通过将值传递给上下文对象的 Provider 组件的 value 属性来设置上下文的值，例如：<MyContext.Provider value={myValue}>...</MyContext.Provider>
3. 在子组件中使用上下文的值：通过调用 useContext 并传入上下文对象，来获取当前上下文的值，例如：const myValue = useContext(MyContext);

下面是一个简单的示例，演示了如何使用 useContext 在不同层级的组件中共享和访问上下文的值：

import React, { useContext } from 'react';

// 创建一个上下文对象
const ThemeContext = React.createContext();

// 父组件
function App() {
  const theme = 'light';

  return (
    <ThemeContext.Provider value={theme}>
      <ParentComponent />
    </ThemeContext.Provider>
  );
}

// 子组件
function ParentComponent() {
  return (
    <div>
      <ChildComponent />
    </div>
  );
}

// 孙组件
function ChildComponent() {
  // 使用 useContext 获取上下文的值
  const theme = useContext(ThemeContext);

  return <div>Current theme: {theme}</div>;
}

export default App;

在上面的代码中，我们创建了一个名为 ThemeContext 的上下文对象，并在父组件 App 中通过 ThemeContext.Provider 设置了上下文的值为 'light'。然后，在子组件 ChildComponent 中使用 useContext(ThemeContext) 来获取当前上下文的值，并将其显示在界面上。

通过 useContext，我们可以方便地访问和共享上下文的值，而不需要通过 props 层层传递。这样可以简化组件之间的通信，使代码更加清晰和易于维护。

自定义 Hook 是什么？为什么要使用自定义 Hook？

自定义 Hook 是一种用于复用 React 组件逻辑的机制。它实际上是函数，其名称以 “use” 开头，并且可以在其中使用其他的 Hook。

使用自定义 Hook 的主要目的是在不同组件之间共享和复用状态逻辑、副作用逻辑或其他任何可复用逻辑。它可以帮助我们将重复的逻辑抽象为可独立使用的函数，并提高代码的可维护性和可重用性。

自定义 Hook 的规则很简单：

• 自定义 Hook 必须以 “use” 开头，这是为了让 React 在处理组件时能够识别它们。
• 自定义 Hook 可以调用其他的 Hook，这样就可以将其组合起来构建更复杂的逻辑。

以下是一个简单的示例，演示了如何创建和使用自定义 Hook：

import { useState, useEffect } from 'react';

// 自定义 Hook
function useCounter(initialValue, step) {
  const [count, setCount] = useState(initialValue);

  useEffect(() => {
    const timer = setInterval(() => {
      setCount((prevCount) => prevCount + step);
    }, 1000);

    return () => {
      clearInterval(timer);
    };
  }, [step]);

  return count;
}

// 使用自定义 Hook
function MyComponent() {
  const count = useCounter(0, 1);

  return <div>Count: {count}</div>;
}

在上面的代码中，我们创建了一个名为 useCounter 的自定义 Hook，该 Hook 实现了一个简单的计数器逻辑。它使用了 useState 来管理计数的状态，并使用了 useEffect 来处理副作用（定时器）。在组件中，我们通过调用 useCounter(0, 1) 来使用自定义 Hook，并获取计数器的值。

通过自定义 Hook，我们可以将通用、可复用的逻辑抽象成独立的函数，使其在多个组件中共享和复用。这样可以减少代码重复，提高开发效率，并使代码更加清晰和易于维护。同时，自定义 Hook 还能够保持组件的逻辑聚焦和简洁，让组件更关注视觉呈现和用户交互方面的逻辑。

如何在多个自定义 Hook 之间共享状态逻辑？

要在多个自定义 Hook 之间共享状态逻辑，可以使用 React 的上下文（Context）API。通过将状态和操作状态的函数包装在上下文提供者中，可以在不同的自定义 Hook 中访问和操作共享的状态。

下面是一个示例，演示了如何在多个自定义 Hook 之间共享状态逻辑：

import React, { createContext, useContext, useState } from 'react';

// 创建一个上下文对象
const StateContext = createContext();

// 状态提供者组件
function StateProvider({ children }) {
  const [count, setCount] = useState(0);

  return (
    <StateContext.Provider value={{ count, setCount }}>
      {children}
    </StateContext.Provider>
  );
}

// 自定义 Hook 1
function useCounter() {
  const { count, setCount } = useContext(StateContext);

  const increment = () => {
    setCount(count + 1);
  };

  return { count, increment };
}

// 自定义 Hook 2
function useDoubleCounter() {
  const { count, setCount } = useContext(StateContext);

  const double = () => {
    setCount(count * 2);
  };

  return { count, double };
}

// 使用自定义 Hook
function MyComponent() {
  const { count, increment } = useCounter();
  const { double } = useDoubleCounter();

  return (
    <div>
      Count: {count}<br />
      <button onClick={increment}>Increment</button>
      <button onClick={double}>Double</button>
    </div>
  );
}

// 在应用程序中使用状态提供者
function App() {
  return (
    <StateProvider>
      <MyComponent />
    </StateProvider>
  );
}

在上面的示例中，我们创建了一个名为 StateContext 的上下文对象，并在 StateProvider 组件中定义了共享的状态 count 和操作状态的函数 setCount。然后，在自定义 Hook useCounter 和 useDoubleCounter 中，我们使用 useContext(StateContext) 来获取共享的状态和操作状态的函数。最后，我们在 MyComponent 中使用了这两个自定义 Hook，并展示了当前计数的值、增加计数和将计数乘以2的按钮。

通过上下文，我们可以在多个自定义 Hook 中共享和访问状态逻辑，从而实现逻辑的复用与拆分。这种方式可以减少重复的代码，提高代码的可维护性，并使逻辑更加清晰和容易理解。

useRef Hook 的作用是什么？它与传统的 ref 属性有何不同？

useRef Hook 的作用是创建一个可持久化的引用，类似于在类组件中使用 ref 属性。使用 useRef 可以在函数组件中存储和访问 DOM 元素或其他可变值，同时避免重新渲染。

与传统的 ref 属性相比，useRef 有以下几点不同之处：

1. useRef 是针对函数组件而设计的，而 ref 属性主要用于类组件。在类组件中，ref 属性可以用于获取 DOM 元素实例、管理焦点、触发动画等。而 useRef 可以在函数组件中获取和修改状态，并进行其他可变值的操作。

2. useRef 返回一个可变的 ref 对象，该对象的 .current 属性可以存储任意值，并且在组件重新渲染时保持不变。这意味着，当我们修改 ref 的 .current 属性时，不会触发组件的重新渲染。这使得 useRef 可以用于在多个渲染之间存储数据、保存之前的状态或引用，并且在使用时不会触发不必要的副作用。

3. ref 属性是一个回调函数，它需要通过 ref 属性将引用传递给组件的特定实例。而 useRef 使用一个通用的 Hook 函数，它可以在组件中的任何地方使用，并且可以在多个组件之间共享状态。我们可以通过将 useRef 的返回值直接赋值给组件内部的变量来使用引用。

下面是一个简单的示例，演示了如何使用 useRef：

import React, { useRef } from 'react';

function MyComponent() {
  const inputRef = useRef(null);
  const previousValueRef = useRef('');

  const handleChange = () => {
    const currentValue = inputRef.current.value;
    console.log('Current value:', currentValue);

    const previousValue = previousValueRef.current;
    console.log('Previous value:', previousValue);

    previousValueRef.current = currentValue;
  };

  return (
    <div>
      <input ref={inputRef} type="text" onChange={handleChange} />
    </div>
  );
}

在上面的代码中，我们使用 useRef 创建了两个引用：inputRef 和 previousValueRef。inputRef 用于获取输入字段的当前值，而 previousValueRef 用于存储输入字段的之前的值。通过 inputRef.current，我们可以访问输入字段的当前值，而通过 previousValueRef.current，我们可以访问输入字段的之前的值。每当输入字段的值发生变化时，我们会更新 previousValueRef.current 的值。

总而言之，useRef Hook 提供了一种在函数组件中保持持久引用和可变值的方式，并且不会触发不必要的重新渲染。它在许多场景下都非常有用，包括处理表单输入、获取 DOM 元素引用、触发动画和保存之前的状态等。

useReducer Hook 的作用和用法是什么？它与 useState 有什么不同？

useReducer Hook 的作用是管理复杂的状态逻辑，它提供了一种替代 useState Hook 的方式来管理状态，并且可以更好地处理包含多个子值的状态。

useReducer 接受一个 reducer 函数和初始状态作为参数，并返回一个包含当前状态和 dispatch 函数的数组。reducer 函数接收两个参数，即当前状态和一个表示动作的对象，并根据动作类型更新状态。dispatch 函数用于触发对应动作类型的状态更新。

与 useState 相比，useReducer 在以下情况下可能更适合使用：

1. 状态逻辑较为复杂：当状态包含多个子值或需要根据之前的状态进行计算时，使用 useReducer 可以更清晰地管理和组织代码。通过定义不同的动作类型以及如何根据动作类型更新状态的 reducer 函数，可以提高代码的可读性和可维护性。

2. 多个状态之间有关联：如果多个状态之间存在依赖关系或需要同时更新，使用 useReducer 可以更容易地管理这些状态并保持它们的一致性。通过在 reducer 中进行状态更新，可以确保只有一个地方定义了状态转换逻辑。

下面是一个简单的示例，演示了如何使用 useReducer：

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error('Unsupported action type');
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  const handleIncrement = () => {
    dispatch({ type: 'increment' });
  };

  const handleDecrement = () => {
    dispatch({ type: 'decrement' });
  };

  return (
    <div>
      Count: {state.count}<br />
      <button onClick={handleIncrement}>Increment</button>
      <button onClick={handleDecrement}>Decrement</button>
    </div>
  );
}

在上面的示例中，我们定义了一个简单的计数器组件 Counter，使用 useReducer 来管理计数器的状态。初始状态为 { count: 0 }，而 reducer 函数根据动作类型来更新状态。通过 dispatch 函数可以触发对应动作类型的状态更新。

与 useState 相比，useReducer 的优势在于更适合复杂的状态逻辑和多个相关状态的管理。它能够将状态转换逻辑集中在一个地方，并提供可预测的状态更新。然而，使用 useReducer 也需要更多的代码，并且可能会增加一些复杂性。对于简单的状态管理，使用 useState 可能更简洁和方便。所以，在选择 useReducer 还是 useState 时，可以根据具体情况来决定使用哪个 Hook。

附录：「简历必备」前后端实战项目（推荐：⭐️⭐️⭐️⭐️⭐️）

Vue.js 和 Egg.js 开发企业级健康管理项目
带你从入门到实战全面掌握 uni-app