React Hooks 前置知识分享

前端

2023-09-04 00:35:25

前言

React Hooks 是 React 16.8 版本引入的新特性，它允许我们在函数组件中使用状态、生命周期和其他功能，而无需编写类组件。这极大地简化了 React 组件的编写和维护。

React Hooks 的概念和分类

React Hooks 本质上是 React 提供的一些函数，这些函数以use开头，通过调用这些函数，函数组件可以访问 React 状态和生命周期函数等特性。React Hooks 目前有如下几个：

useState：用于声明和管理组件状态。
useEffect：用于在组件生命周期中执行副作用，例如数据请求、设置计时器等。
useContext：用于在组件之间共享数据。
useReducer：用于管理复杂的状态，例如表单数据等。
useCallback：用于创建记忆函数，避免函数在组件每次渲染时重新创建。
useMemo：用于创建记忆值，避免值在组件每次渲染时重新计算。

React Hooks 的用法

1. 使用 `useState` 声明和管理状态

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

export default MyComponent;

在这个例子中，我们使用 useState 声明了一个名为 count 的状态变量，并通过 setCount 函数来更新它的值。当点击按钮时，count 的值会增加 1。

2. 使用 `useEffect` 执行副作用

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    console.log('组件已挂载');

    return () => {
      console.log('组件已卸载');
    };
  }, []);

  return (
    <div>
      <h1>Hello World</h1>
    </div>
  );
}

export default MyComponent;

在这个例子中，我们使用 useEffect 来在组件挂载时和卸载时执行一些操作。当组件挂载时，会打印"组件已挂载"，当组件卸载时，会打印"组件已卸载"。

3. 使用 `useContext` 在组件之间共享数据

import React, { useContext } from 'react';

const MyContext = React.createContext('默认值');

function MyComponent() {
  const value = useContext(MyContext);

  return (
    <div>
      <h1>{value}</h1>
    </div>
  );
}

export default MyComponent;