Hooks学习笔记1：useState、useCallback + useMemo

2023-10-19 14:46:55

各位前端开发爱好者，大家好！今天，我将为大家带来第一篇Hooks学习笔记，重点介绍useState、useCallback和useMemo这三个核心Hooks。

useState是React中用于在函数组件中管理状态的Hook。它接受一个初始值作为参数，并返回一个包含当前状态值和更新状态值的数组。其基本使用方式如下：

const [state, setState] = useState(initialValue);

useCallback和useMemo都是用于优化性能的Hook。useCallback返回一个记忆化的回调函数，它在组件的生命周期内保持不变。useMemo则返回一个记忆化的值，当依赖项未发生变化时，它也会保持不变。

这三个Hooks的用法多种多样，具体如下：

useState ：用于管理组件的状态，例如表单输入、API调用结果或任何其他需要随着时间而变化的数据。
useCallback ：当需要创建一个回调函数时使用，该函数在组件的生命周期内始终保持不变，无论组件是否重新渲染。这可以提高性能，因为函数不需要在每次渲染时都重新创建。
useMemo ：当需要创建一个值时使用，该值在依赖项未发生变化时始终保持不变。这也可以提高性能，因为值不需要在每次渲染时都重新计算。

举个例子，让我们看看如何使用useState和useCallback来构建一个简单的表单：

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

const MyForm = () => {
  const [formValues, setFormValues] = useState({ name: '', email: '' });

  const handleSubmit = useCallback(() => {
    // 提交表单
  }, [formValues]);

  return (
    <form onSubmit={handleSubmit}>
      {/* 表单输入元素 */}
    </form>
  );
};