React-Hooks | 青训营

睡得好没烦恼
76 阅读6分钟

学习了青训营的 React 课程，初略的了解了 Hooks 的用法，但是 React 中 Hook 函数其实有很多，下面来对 React 中的一些常用 Hooks 做一个解析总结。

前言

React中的Hooks是一种函数式组件内部的特殊函数，它们允许在无需编写类组件的情况下，将状态管理和其他React功能引入函数式组件中。Hooks 于 React 16.8版本中引入，通过让函数式组件拥有更多类组件的功能，使得在React中编写和管理组件变得更加简洁和可维护。

useState

1. 作用

用于在函数组件中添加和管理状态。它允许你在无需编写类的情况下，在函数组件中使用状态，修改状态会让组件的更新。

2. 语法

```jsx
const [state, setState] = useState(initialState);
```

3. 示例

```jsx
import React, { useState } from 'react';

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

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}
```

4. 处理机制

useState返回一个包含当前状态值和更新状态的函数的数组。组件初始渲染时，useState会将初始状态传递给组件，并返回当前状态以及更新状态的函数。每次调用状态更新函数，组件都会重新渲染，显示新的状态。

useEffect

1. 作用

用于在函数组件中处理副作用操作，如数据获取、订阅、DOM操作等。

那么怎么理解副作用？

副作用是指在函数执行过程中，除了返回一个值（主要目的）之外，还对函数外部的状态或环境产生了影响。这些影响可能是可见的状态变化、对外部资源的访问，或者是其他与函数主要目的无关的行为。副作用是相对于函数的纯粹性（函数输入确定时，输出也确定，没有其他影响）而言的概念。

在计算机编程中，副作用可能会引入不确定性、难以追踪的bug，以及代码难以维护和测试的问题。因此，良好的编程实践通常鼓励将副作用最小化，并将其隔离在特定的模块或函数中，以便更好地管理和控制。

在React中，副作用常常与UI渲染和状态管理相关。下面是一些常见的副作用示例：

  1. 数据请求（Ajax发送）：从服务器获取数据的过程会引入网络通信等不确定性，它会改变外部的数据状态。
  2. 手动修改DOM：直接操作DOM元素可能会导致页面状态与真实DOM不同步，也会影响性能和代码可维护性。
  3. LocalStorage操作：读写浏览器的本地存储是一种副作用，因为它会持久化数据并影响外部环境。
  4. 使用定时器：设置定时器可能会导致函数在未来的某个时间点被调用，引入了时间上的不确定性。

React提供了useEffect钩子来处理函数组件中的副作用。useEffect可以在组件渲染时执行副作用代码，也可以在特定的状态依赖变化时执行。这有助于将副作用与组件的主要渲染逻辑分离开，使代码更加清晰和可维护。

2. 语法

useEffect(() => {
  // 副作用操作
  return () => {
    // 清除操作（可选）
  };
}, [dependencies]);

3. 示例

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

function Timer() {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setTime(prevTime => prevTime + 1);
    }, 1000);

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

  return <p>Time: {time}</p>;
}

上述代码 useEffect 的作用：

  • 在组件初次渲染时（由于依赖数组为空），useEffect会执行回调函数。回调函数内的逻辑包括：

    • setInterval函数创建一个定时器，每隔一秒执行一次回调函数。

    • 回调函数内使用setTime更新time状态，通过函数更新，确保基于之前的状态更新。

  • return语句它返回一个清除函数，这个函数在组件卸载或下次回调执行之前执行。这里用于清除之前创建的定时器，防止内存泄漏。

4. 处理机制

useEffect在每次组件渲染后执行副作用操作。可以通过返回一个函数来清除副作用（清除操作可选），以避免内存泄漏。

useContext

1. 作用

通过useContext，可以轻松在组件中访问跨越多层次的上下文数据，避免了props层层传递的繁琐。

2. 语法

const value = useContext(Context);

3. 示例

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

const UserContext = createContext();

function App() {
  return (
    <UserContext.Provider value="John">
      <Profile />
    </UserContext.Provider>
  );
}

function Profile() {
  const username = useContext(UserContext);
  return <p>Username: {username}</p>;
}

4. 处理机制

useContext接收一个上下文对象（通过createContext创建），并返回当前上下文的值。它会在组件树中向上查找最近的Provider，并使用提供的值。

useReducer

1. 作用

useReducer是一种用于处理复杂状态逻辑的React Hook。它可以帮助我们更好地管理具有多个可能状态转换的组件状态。与useState不同，useReducer更适合处理需要基于前一个状态进行更新的情况，尤其是当状态之间存在复杂的关系或逻辑时。通过将状态和状态更新逻辑结合在一起，useReducer可以提供更具可预测性和可维护性的状态管理。总的来说useReducer是 useState的替代品，用于处理复杂的状态逻辑。

2. 语法

其接受两个参数：reducer函数和初始状态。reducer函数接受当前状态和一个操作（通常是一个包含type属性的对象），然后根据操作返回一个新的状态。

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

3. 示例

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');
  }
}

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

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
}

4. 处理机制

useReducer的处理机制基于reducer函数。当我们调用dispatch函数并传递一个操作对象时，React会将当前状态和操作传递给reducer函数。然后，reducer函数根据操作类型来计算新的状态，并将其返回。如果reducer中没有处理传入的操作类型，可以通过default语句抛出错误，以防止未知的操作。

比如在上述示例中，点击“Increment”按钮时，会触发dispatch({ type: 'increment' })，将操作类型传递给reducer函数。reducer函数会从当前状态中提取计数值并递增它，然后返回一个新的状态对象。这个新的状态对象会触发组件的重新渲染，以显示更新后的计数值。

后记

这只是 React Hooks 中一些比较常用的 hook 。由于本人也是刚接触 React，水平有限，所以如果发现问题或者有需要补充的点欢迎大家通过评论告诉我！！！

avatar
文章
阅读
粉丝