React useState，useEffect ，Hook是什么？什么是副作用？

2024-05-15 13:10:44

初步接触 React 中的同学可能会对 useState，useEffect ，Hook，副作用这些命名比较陌生，一起来了解一下。

Hook是什么？

Hook 是钩子，我理解他是一个概念，在不使用class（使用函数）定义一个组件的时候，能用到一些 React 的钩子函数；React 内置了一些像 useState 这样的 Hook。你也可以创建你自己的 Hook 来复用不同组件之间的状态逻辑。

class 组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 也是钩子函数（也可以称为生命周期函数）

什么是副作用？

在 React 组件中执行数据获取、订阅或者手动修改 DOM，我们统一把这些操作称为“副作用”，或者简称为“作用”。

useState是什么，怎么使用？

（useEffect 和 userState 都可以在组件执行多次）

userState 是 React 自带的一个 Hook 函数，下面是示例代码：

代码的简单介绍：这里我定义了一个state 的变量 key 为 aaa，默认值为1，并且定义了一个函数 setAaa 可以修改 aaa变量，调用方式就是 setAaa(value)。传入一个参数，state 的 aaa的值就会改变成你传入的值。

React useState，useEffect ，Hook是什么？什么是副作用？相关推荐

React中useEffect使用
之前我们已经掌握了useState的使用,在 class 中,我们通过在构造函数中设置 this.state 为 { count: 0 } 来初始化 count state 为 0: class Ex ...
React Hooks---useState/useEffect/useContext的基本使用
useState useState是react自带的一个hook函数,它的作用就是用来声明状态变量.useState这个函数接收的参数是我们的状态初始值,它返回了一个数组,这个数组的第 [0]项是当前 ...
react hooks useEffect副作用钩子使用
react框架开发作为入门,我们首先学到的是自定义组件,然后编写相关处理逻辑,绑定事件等等.一般自定义组件,我们是通过编写一个class继承React.Component,然后编写最主要的render ...
react学习—ref Hook
ref Hook 一.ref Hook 1.useRef 2.其它使用一.ref Hook 1.useRef useRef函数: 一个参数:默认值返回一个固定的对象,{current: 值} im ...
react 使用 useEffect 及踩坑
useEffect 介绍 useEffect时reactHook中最重要,最常用的hook之一. useEffect相当于react中的什么生命周期呢? 这个问题在react官网中有过介绍,在使用的过 ...
React官网Hook API 索引模块知识点整理（五）
react版本:16.13.1 1. 概览基础 Hook useState useEffect useContext 额外的 Hook useReducer useCallback useMemo ...
html与js项目引入react框架之Hook
一.react的引入需要引入三个文件 1.react.js https://unpkg.com/react@17/umd/react.development.js https://unpkg.com ...
React Hooks - useEffect通俗易懂
一.React 使用Effect Hook 二. (1)useEffect():当每次组件数据改变,页面渲染后会执行一次 (2)useEffect(()=>{}, [ ]),当第二个参数是空数组 ...
[react] useState和this.state的区别是什么？
[react] useState和this.state的区别是什么? useState内部基于 useReducer 实现,方法返回 state 本身以及一个修改 state 的方法. 通过 setX ...
React+DvaJS 之 hook 路由权限控制
博客学院下载 GitChat TinyMind 论坛 APP 问答商城 VIP 活动招聘 ITeye 写博客发Chat 登录注册原 React+DvaJS 之 hook 路由权限控制 20 ...

最新文章

热门文章