React中useEffect的简单使用

最新推荐文章于 2025-06-17 10:37:19 发布

虚幻私塾

最新推荐文章于 2025-06-17 10:37:19 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： python 文章标签： react.js flask 前端计算机

本文链接：https://blog.csdn.net/u013190417/article/details/125839908

本文探讨了React Hooks中的useEffect，讲解如何在函数组件中使用useState更改状态，以及如何正确处理副作用。文章通过实例展示了如何在数组中添加元素，创建增删功能，并强调了使用useEffect时声明依赖的重要性，指出不正确声明依赖会导致预期之外的行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

🚀 优质资源分享 🚀

学习路线指引（点击解锁）	知识定位	人群定位
🧡 Python实战微信订餐小程序 🧡	进阶级	本课程是python flask+微信小程序的完美结合，从项目搭建到腾讯云部署上线，打造一个全栈订餐系统。
💛Python量化交易实战💛	入门级	手把手带你打造一个易扩展、更安全、效率更高的量化交易系统

学习hooks

在 React 的世界中，
组件有函数组件和类组件
UI 组件我们可以使用函数，用函数组件来展示 UI。
而对于容器组件，函数组件就显得无能为力。
我们依赖于类组件来获取数据，处理数据。
React 在 v16.8 的版本中推出了 React Hooks 新特性。
以前我们更改数据都是通过setState。
现在我们可以使用 useState

在函数组件中用useState更改数据状态

import { useState } from "react";
export default function Funcom() {
    // setName可以去改变name的值
    const [name, setName] = useState('紫川')
    // 改变name的值
    function changeValue() {
        setName('今天在追剧,爽歪歪')
    }
    return (
        <div>
 <button onClick={changeValue}>改变值button>
            <div>显示的值--{name}div>
        div>
    )
}