[react] hooks基础 =＞ useState ===

最新推荐文章于 2023-07-18 15:18:58 发布
最新推荐文章于 2023-07-18 15:18:58 发布
阅读量866 收藏 1
点赞数 1
分类专栏： react 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58726419/article/details/121276524
版权

目录

hooks是什么？

Hooks 前后，组件开发模式的对比

为什么要有 Hooks?

react组件的本质

class 组件自身的问题

函数式组件的好处

hooks的使用策略

useState-基本使用

使用数组解构简化代码

useState-处理表单元素

useState-setXXX回调函数格式

useState 两种格式

setXXX的参数可以是回调

useState-组件的更新过程

useState 的初始值(参数)只会在组件第一次渲染时生效

如何为函数组件提供多个状态？

useState的使用规则

hooks是什么？

Hooks：钩子、钓钩、钩住。

是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。

是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

作用： 为函数组件提供状态、生命周期等原本 在Class 组件中才提供的功能

  • Hooks 只能在函数组件中使用

  • 可以理解为通过 Hooks 为函数组件钩入 class 组件的特性

Hooks 前后，组件开发模式的对比

  • React v16.8 以前： class 组件(提供状态) + 函数组件(展示内容)

  • React v16.8 及其以后：

    1. class 组件(提供状态) + 函数组件(展示内容)

    2. Hooks(提供状态) + 函数组件(展示内容)

    3. 混用以上两种方式：部分功能用 class 组件，部分功能用 Hooks+函数组件

为什么要有 Hooks?

两个角度：1.组件的状态逻辑复用     2.class 组件自身的问题

react组件的本质

React 是用于构建用户界面的 JavaScript 库 。

React组件是对特定功能的封装，主要用来对UI进行拆分。

React 组件的模型其实很直观，就是从 Model 到 View 的映射，这里的 Model 对应到 React 中就是 state 和 props

公式：组件（State+Props） = UI  

class 组件自身的问题

在根据状态来渲染UI这件事上，class 组件并没有发挥它最重要的功能：

  • 组件之间很少继承

  • 组件之间很少相互访问

函数式组件的好处

  1. 函数本身比较简单，更好的胜任根据状态来渲染UI这件事

  2. hooks让函数组件内部有了维护状态的能力

  3. hooks带来了组件的逻辑复用能力

hooks的使用策略

  1. react没有计划从React中移除class

  2. Hook 和现有代码可以同时工作，你可以渐进式地使用：

    1. 不推荐直接使用 Hooks 大规模重构现有组件

    2. 推荐新功能用 Hooks，复杂功能实现不了的，也可以继续用 class

    3. 找一个功能简单、非核心功能的组件开始使用 hooks

  3. class 组件相关的 API 在hooks中可以不用

    1. state与setState

    2. 钩子函数，componentDidMount、componentDidUpdate、componentWillUnmount

    3. `this 相关的用法

  4. 原来学习的内容还是要用的

    1. JSX：{}、onClick={handleClick}、条件渲染、列表渲染、样式处理等

    2. 组件：函数组件、组件通讯

    3. React 开发理念：

最低0.47元/天 解锁文章
屹洲城主
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
hooks
aijkstr
06-25 828
https://juejin.im/post/5ceb36dd51882530be7b1585 一. 对于class component : 首先state是Immutable的， setState后一定会生成一个全新的state引用。 但是class component是通过this.state的方式读取的，这导致每次代码执行都会拿到最新的state引用。 对于Function compon...
React 之 useState 详解
最新发布
subsistent的博客
08-17 5701
initialValue是初始状态。它可以是任意值。
【React Hooks】useState 用法
qq_45677671的博客
05-11 1993
文章目录useState Hook 介绍useState Hook 实例 useState Hook 介绍 useState Hook 让函数组件也可以有 state 状态，并进行读写操作 语法： const [state, setState] = React.useState(initalState) // x代表可以自定义，X代表首字母大写 const [xxx, setXxx] = React.useState(initalValue) useState()说明： 参数：第一次初始化指定的值
React-hook-useState
newbiek的博客
03-07 191
import React,{useState} from 'react' export default function App() { console.log('render') const [n,setState] = useState(0); return ( <div> <p>值：{n}</p&...
react的state和useState你了解多少？带你深入react state useState
weixin_51472145的博客
07-18 989
react的state和useState你了解多少？带你深入react state useState
如何对react hooks进行单元测试的方法
10-16
在React开发中，React Hooks是自React 16.8版本引入的一种强大的功能，它允许在函数组件中使用状态和其他React生命周期方法。然而，随着Hooks的广泛应用，单元测试成为确保代码质量的重要环节。本文将详细介绍如何对...
[过时]用于 React Hooks API 的 Ponyfill（支持 RN）
06-08
react-with-hooks 用于 React Hooks API 的 Polyfill 和 ponyfill。...const Counter = () => { const [ count, setCount ] = useState(0); useEffect(() => { document.title = "count is " + count; }) retur
基于Webpack4和React hooks搭建项目的方法
10-17
React Hooks如useState、useEffect、useContext等，使得我们可以在不使用类组件的情况下管理状态和副作用，极大地简化了代码并提高了代码复用性。 Webpack4的配置是项目构建的关键。一个基本的配置文件`webpack....
二.React 掌握组件化开发中多种实现技术 高阶组件 - HOC Hooks（>=16.8）
09-03
return <button onClick={() => setValue('new value')}>{value}</button>; } ``` 3. **组件复合（Composition）**： 组件复合是React中推荐的组织代码方式，通过将小的、具有特定功能的组件组合成更大的组件，...
React Hooks的深入理解与使用
12-12
<button onClick={() => setCount(count + 1)}> Click me </button> </div> ); } ``` 在这个例子中，`useState` Hook 接收一个初始值，返回一个状态变量`count`和一个更新状态的方法`setCount`。这样，函数...
HOOKS setState 数组，不触发更新
weixin_45253306的博客
06-09 780
hooks 使用 useState 数组时，改变值后，不触发更新的问题
React Hooks —— useState异步更新队列、闭包、浅比较深入理解
m0_46569480的博客
06-28 3001
render多次（理论上是一次，这里是因为这些操作作用的都是一个闭包中的同一个状态值x，在第一次改状态还没改成功之前，其他次操作访问的状态值仍旧是还没改的10，直到第一次改状态成功，剩余次操作不会再通过Object.is的测试。第二次flushSync，更新队列里只有一个setX，立即同步执行，使用的也是第一次Demo创建出来的EC的闭包中的state（因为这些flushSync方法都存在于第一个上下文中），也就是10。注意不是因为DOM-DIFF；，会刷新队列，也就是通知更新队列中的所有任务执行：把。
React函数组件最重要的Hook之一useState操作与原理分析
前端攻城狮Dannis
04-17 8146
State Hook State Hook是一个在函数组件中使用的函数, 该函数名字是useState, 用于在函数组件中提供状态 让React的函数组件能够像类组件一样拥有state useState函数有一个参数, 这个参数的值表示状态的默认值 在我们引入react的时候顺带先引入一下stateHook import React, { useState } from 'react'; us...
东北话版 - React Hooks 之 useState 原理解析
m0_61691857的博客
09-13 473
来自前端秃头的，Hooks UseState 实例以及原理解析
【前端 | React 】React Hook 中 useState 异步回调获取不到最新值及解决方案
04-12 1万+
预先了解 setState 的两种传参方式 1、直接传入新值 setState(options); 列如： const [state, setState] = useState(0); setState(state + 1); 2、传入回调函数 setState(callBack); 例如： const [state, setState] = useState(0); setState((prevState) => prevState + 1); // prevState 是改变之前
HashMap 源码详细分析(JDK1.8)
帅性而为1号的博客
07-24 271
https://www.imooc.com/article/30668 作者：田小波 链接：https://www.imooc.com/article/22931 来源：慕课网 本文原创发布于慕课网 ，转载请注明出处，谢谢合作
useState回调函数
热门推荐
qq_35233052的博客
04-20 2万+
在看的小朋友，新的react hook写法，官方默认setState方法移除了回调函数，推荐使用useEffect，但是改动的数据过多还是有很多问题。so，我在useState基础上扩展了回调函数功能，就可以像以前类写法一样传递回调方法啦。 话不多说上代码 import {useEffect, useState} from "react"; function useCallbackStat...
useState实现回调
m0_51578916的博客
09-17 437
b.父组件更新了子组件state,子组件想拿到最新的state调用方法。1可以使用settimeout延迟调用。马上时候调用方法传到最新的。1.在写函数组件中实现，a.自身更新state。
React 中的useState 和 setState 的执行机制
p1967914901的博客
02-07 4543
React 中的useState 和 setState 的执行机制 useState 和 setState 在React开发过程中 使用很频繁，但很多人都停留在简单的使用阶段，并没有正在了解它们的执行机制，例如：**它们是同步的还是异步的？**正因为没有理解它们，才致使开发过程中会碰到一些出乎意料的bug。本文将带大家了解它们的特性。 它们是同步的还是异步的？ setState和 useState 只在合成事件如onClick等和钩子函数包括componentDidMount、useEffect等中是“异步
React.useEffect(()=>{ setInterval(()=>{ setCount(count => count+1 ) },1000) return( ()=>{ clearInterval() } ) },[]);作为函数式组件的hooks，可以把函数名进行随意更改么？然后仍然实现更新检测
05-25
React.useEffect(() => { const intervalId = setInterval(() => { setCount(count => count + 1); }, 1000); return () => { clearInterval(intervalId); }; }, []); return count; } ``` 这个函数可以...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值