useEffect是什么？

useEffect 是 React 中的一个钩子（hook），它允许你在组件渲染到屏幕之后执行一些副作用操作。这些副作用包括数据获取、订阅事件、手动更改 DOM 等。useEffect 可以帮助你管理组件的生命周期，确保在适当的时候执行必要的操作。

用法

1. 导入

import React, { useEffect } from 'react';

2. 调用

function MyComponent() {
 useEffect(() => {
   // 在这里添加你的副作用操作
 }, [/* 依赖项数组（可选） */]);

 return (
   <div>
     {/* 组件的其他内容 */}
   </div>
 );

依赖项数组

useEffect 的第二个参数是一个依赖项数组，它允许你指定在哪些值发生变化时才执行副作用操作

类型	说明	执行时机
空	不传	组件初始渲染 + 更新时执行
[]	空数组	组件初始渲染时执行
[item]	有值的数组	组件初始渲染 + 值发生变化时执行

清除副作用

如果你的副作用操作需要在组件挂载时执行一次，并且在卸载时执行清理操作，你可以返回一个清理函数

function MyComponent() {
 useEffect(() => {
   // 初始化操作

   return () => {
     // 清理操作
   };
 }, []); // 依赖项数组为空，表示只在挂载和卸载阶段执行

 return <div>...</div>;

自定义hooks

简单的说自定义 Hooks 是一种复用逻辑的方式

创建自定义 Hooks 的步骤如下：

以 use 开头命名你的函数。
在函数内部，可以调用其他 Hooks。
可以管理自己的状态。
将可重用的逻辑放在函数内部。
如果函数有返回值，可以返回状态值或者方法等。

正常编写

我们编写一个功能，需求是点击按钮后切换组件的显隐状态

import { useState } from 'react'

const Child = () => {
    return (
        <div>
            <p>child</p>
        </div>
    )
}

const Toggle =  () => {
    const [show, setshow] = useState(false);
    return (
        <div>
            <button onClick={() => setshow(!show)}>toggle</button>
            {show && <Child />}
        </div>
    )
}

首先，导入了 React 的 useState 钩子，用于管理组件的状态。

定义了 Child 组件，它只是渲染了一段文本，作为 Toggle 组件的子组件。

定义了 Toggle 组件，它包含以下内容：

使用 useState 钩子初始化一个布尔类型的状态变量 show，默认设置为 false，表示初始时子组件隐藏。

渲染一个按钮，点击按钮时，通过 onClick 事件调用一个匿名函数，这个匿名函数会切换 show 状态，从而实现显示或隐藏子组件。

通过使用逻辑与（&&）运算符，只有当 show 状态为真时，才渲染 <Child /> 组件。这意味着当用户点击按钮切换 show 状态为真时，<Child /> 组件会显示出来。

hooks封装

import { useState } from 'react'

const Child = () => {
    return (
        <div>
            <p>child</p>
        </div>
    )
}

const useToggle = () => {
    const [show, setshow] = useState(false);
    const toggle = () => {
        setshow(!show);
    }
    return {
        show,
        toggle
    }
}

const Toggle =  () => {
    const { show, toggle } = useToggle()
    return (
        <div>
            <button onClick={toggle}>toggle</button>
            {show && <Child />}
        </div>
    )
}

上面我们将toggle的功能提取到一个useToggle函数中，这个函数就是一个hooks，我们将外面使用这个功能需要用的到state和function return出来，在内部维护state。

useToggle 函数是一个简单的状态管理器，它封装了 useState 以创建一个私有的 show 状态和对应的切换函数 toggle。这个函数可以被其他组件导入和使用，从而实现状态的共享和管理。

注意

只能在组件或其他hooks函数中调用
只能在组件的顶层调用，不能嵌套到if、for或者其他函数中使用

react基础 - useEffect和自定义hooks