React函数式组件Hook中的useState函数的详细解析

目录
  • 前言
  • 一、什么是函数式组件
  • 二、useState

前言

公司项目需要使用react，而函数式组件也是官方比较推荐的！！！所以学习hooks是很重要的。

一、什么是函数式组件

纯函数组件有以下特点：

  • 没有状态
  • 没有生命周期
  • 没有 this

因存在如上特点，使得纯函数组件只能做UI展示的功能， 涉及到状态的管理与切换就不得不用到类组件或者redux。 但因为简单的页面也是用类组件，同时要继承一个React实例，使得代码会显得很重。

以前我们可以使用class来声明一个组件，其实使用function也可以定义一个组件：

创建 App1.js ：

import React from 'react'
function App1(){
    return (
        <div>
            <h1>函数式组件</h1>
        </div>
    )
}
export default App1;

备注：

在vscode中，如果安装过 ES7 React/Redux/GraphQL/React-Native snippets 这个插件，即可直接使用 rfc 快捷键敲出以下模板：

import React from 'react';
const App = () => {
    return (
        <div>

        </div>
    );
}
export default App;

在 index.js 中调用：

import ReactDOM from 'react-dom'
import App from './App1'
ReactDOM.render(
    <App />,
    document.getElementById('root')
)

二、useState

useState让函数组件有了state状态，可以对状态数据进行读写操作

语法：const [变量名,修改变量的方法名] = React.useState(初始值)

修改变量的方法名(setXxx)有两种写法:

setXxx(newValue):参数为非函数值，直接指定新的状态值，内部用器覆盖原来的状态值。

setXxx(value => newValue):参数为函数，接收原本的状态值，返回新的状态值 ，内部用器覆盖原来的状态值。

现在我们改成函数式编程实现累加案例：

// useState就是hooks提供的一个api
import React, { useState } from 'react'
function App(){
  	// 这里useState(0)中的0，就是定义num的初始值，setNum是修改num的方法
    const [num, setNum] = useState(0);

    return (
        <div>
            <h2>{num}</h2>
            <button onClick={()=>{setNum(num+1)}}>点击加1</button>
        </div>
    )
}
export default App;

到此这篇关于React函数式组件Hook中的useState函数的详细解析的文章就介绍到这了,更多相关React Hook useState函数内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • React中useState的使用方法及注意事项

    React中useState的使用方法及注意事项

    目录 一.基本使用 第一个问题:setCount修改值时它是同步还是异步? 第二个问题:连续调用 setCount会发生什么? 二.注意事项 1.复杂变量的修改 2.异步操作获取更新的值 总结 一.基本使用 useState是 react 提供的一个定义响应式变量的 hook 函数,基本语法如下: const [count, setCount] = useState(initialCount) 它返回一个状态和一个修改状态的方法,状态需要通过这个方法来进行修改: initialCount 是我们

  • React18 useState何时执行更新及微任务理解

    目录 函数式组件中的useState 测试1 测试2 类组件中的setState setState在promise之前定义 setState在promise之后定义 结论 函数式组件中的useState 前言:众所周知useState是异步的,但网络上对于useState何时异步更新并没有一个共识,为了探究,做一个简单的实验,实验目的是探究useState与微任务.宏任务的先后关系 测试1 实验步骤:点击按钮触发事件,在事件中我们做三件事:修改state/定义一个宏任务setTimeout /定

  • React超详细分析useState与useReducer源码

    目录 热身准备 为什么会有hooks hooks执行时机 两套hooks hooks存储 初始化 mount useState mountWorkInProgressHook 更新update updateState updateReducer updateWorkInProgressHook 总结 热身准备 在正式讲useState,我们先热热身,了解下必备知识. 为什么会有hooks 大家都知道hooks是在函数组件的产物.之前class组件为什么没有出现hooks这种东西呢? 答案很简单,

  • React hooks useState异步问题及解决

    React hooks useState异步问题及解决

    目录 React Hooks useState异步问题 原因 解决方法 React中useState异步更新小坑 问题点 React Hooks useState异步问题 最近在开发中遇到一个问题 我接口请求回来的数据 用useState存储起来. 但是我后面 去改变这个数据的时候每次拿到都是上次的数据没办法及时更新. 原因 useState 返回的更新状态方法是异步的,要在下次重绘才能获取新值.不要试图在更改状态之后立马获取状态. 解决方法 应该使用useRef 存储这个数据,在useEffe

  • React Hook中的useState函数的详细解析

    useState => 让函数组件具有维持状态的能力useState 这个 Hook 是用来管理 state 的,它可以让函数组件具有维持状态的能力.即在一个函数组件的多次渲染之间,这个 state 是共享的. Hooks 的最大的作用就是可以让你在不编写class的情况下使用state以及其他的 React 特性 useState的详细解析 在上一篇文章中, 我用到useState来让大家体验一下hooks函数 import { memo, useState } from "react&

  • react中使用usestate踩坑及解决

    react中使用usestate踩坑及解决

    目录 usestate的常规用法 useState遇到的坑 1.useState不适合复杂对象的更改 2.useState异步回调的问题 3.根据hook的规则,使用useState的位置有限制 4.使用useState,回调函数形式更改数据 5.useState存入的值只是该值的引用(引用类型) 6.useState,如果保存引用数据,useEffect检测不到变化? 7.useState无法保存一个函数 useState实现原理 usestate的常规用法 在react框架中,不适用类组件,

  • React中hook函数与useState及useEffect的使用

    React中hook函数与useState及useEffect的使用

    目录 1. 简介 2. useState使用 3. useEffect使用 useEffect发起网络请求 1. 简介 在 React 的世界中,有容器组件和 UI 组件之分,在 React Hooks 出现之前,UI 组件我们可以使用函数组件,无状态组件来展示 UI,而对于容器组件,函数组件就显得无能为力,我们依赖于类组件来获取数据,处理数据,并向下传递参数给 UI 组件进行渲染.React在v16.8 的版本中推出了 React Hooks 新特性,Hook是一套工具函数的集合,它增强了函数

  • 关于react useState更新异步问题

    关于react useState更新异步问题

    目录 react useState更新异步 记useState异步更新小坑 问题点 react useState更新异步 当我们使用react中useState这个hook时候,如下 const [page, setPage] = useState(1); const handlerClick = (e)=>{     setPage(e.current);     console.log(page); } 当我打印page时候,此时page还是1,因为useState的更新是异步的,这和rea

  • React函数式组件Hook中的useState函数的详细解析

    目录 前言 一.什么是函数式组件 二.useState 前言 公司项目需要使用react,而函数式组件也是官方比较推荐的!!!所以学习hooks是很重要的. 一.什么是函数式组件 纯函数组件有以下特点: 没有状态 没有生命周期 没有 this 因存在如上特点,使得纯函数组件只能做UI展示的功能, 涉及到状态的管理与切换就不得不用到类组件或者redux. 但因为简单的页面也是用类组件,同时要继承一个React实例,使得代码会显得很重. 以前我们可以使用class来声明一个组件,其实使用functi

  • React函数式组件Hook中的useEffect函数的详细解析

    React函数式组件Hook中的useEffect函数的详细解析

    目录 前言 useEffect的作用 useEffect的使用? 1.class组件 2.函数式组件 总结 前言 React函数式编程没有生命周期,因此需要借助useEffect来实现. useEffect的作用 发ajax请求获取数据 设置订阅/获取定时器 手动更改真实DOM useEffect的使用? 1.class组件 在class组件中可以使用生命周期函数,知道组件触发的过程. 代码如下(示例): import React, { Component } from 'react' expo

  • React函数式组件的性能优化思路详解

    优化思路 主要优化的方向有2个: 减少重新 render 的次数.因为在 React 里最重(花时间最长)的一块就是 reconction(简单的可以理解为 diff),如果不 render,就不会 reconction. 减少计算的量.主要是减少重复计算,对于函数式组件来说,每次 render 都会重新从头开始执行函数调用. 在使用类组件的时候,使用的 React 优化 API 主要是:shouldComponentUpdate和 PureComponent 那么在函数式组件中,我们怎么做性能

  • 使用 TypeScript 开发 React 函数式组件

    目录 前言 如何使用 TypeScript 定义函数式组件 1. 使用 React.FC 2. 使用 JSX.Element 3. 直接定义完整类型 4. 使用 React.PropsWithChildren 使用过程需要注意的点 1. 函数式组件返回值不能是布尔值 2. 无法为组件使用 Array.fill() 填充 3. 支持使用泛型来创建组件 前言 在我们使用 React 开发项目时,使用最多的应该都是组件,组件又分为函数组件和类组件,我们可以这么定义: 定义函数组件: function

  • React 函数式组件和类式组件详情

    目录 前言 1. 函数式组件 2. 类式组件 前言 React 是 组件化的 的 JS 库,组件化 也是 React 的核心思想.使用 React 可以构建管理自身状态的封装组件,然后对其组合以构成复杂的 UI.那么什么是组件呢? 组件是用来实现局部功能效果的代码和资源的集合,包括 html / css / js/ image 等,组件的作用是 简化代码.复用代码.提高运行效率. React 里主要有两种类型的组件: 函数式组件 => 基于函数: 类式组件 => 基于类: 1. 函数式组件 函

  • Java中的main函数的详细介绍

    Java中的main函数的详细介绍 JAVA中的主函数是我们再熟悉不过的了,相信每个学习过JAVA语言的人都能够熟练地写出这个程序的入口函数,但对于主函数为什么这么写,其中的每个关键字分别是什么意思,可能就不是所有人都能轻松地答出来的了.我也是在学习中碰到了这个问题,通过在网上搜索资料,并加上自己的实践终于有了一点心得,不敢保留,写出来与大家分享. 主函数的一般写法如下: public static void main(String[] args){-} 下面分别解释这些关键字的作用: (1)p

  • Python中json.dumps()函数的使用解析

    json.dumps将一个Python数据结构转换为JSON import json data = { 'name' : 'myname', 'age' : 100, } json_str = json.dumps(data) json库的一些用法 方法 作用 json.dumps() 将python对象编码成Json字符串 json.loads() 将Json字符串解码成python对象 json.dump() 将python中的对象转化成json储存到文件中 json.load() 将文件中

  • Mybatis中的config.xml配置文件详细解析

    经过前面的文章,我觉得对Mybatis的正题理解已经足够了,但是对Mybatis的使用,我觉得还是会有一点的模糊,就我个人而言,我觉得掌握好Mybatis框架,主要要明白三个文件,第一个就是等下要谈论的Mybatis-comfig.xml文件,还有就是**Mapper.xml,以及我们所定义的Mapper类,理解了这三个东西,然后有sql的基础,还有java的基础的话,后面不论是使用基于xml的方法,还是基于java-based Configuration的方法,都会简单的多. 废话不多说,现在

  • React Hook中的useEffecfa函数的使用小结

    目录 useEffect的详细解析 useEffecf基本使用 清除副作用(Effect) 使用多个useEffect useEffect性能优化 useEffect的详细解析 useEffecf基本使用 书接上文, 上一篇文章我们讲解了State Hook, 我们已经可以通过这个hook在函数式组件中定义state 我们知道在类组件中是可以有生命周期函数的, 那么如何在函数组件中定义类似于生命周期这些函数呢? Effect Hook 可以让你来完成一些类似于class中生命周期的功能; 事实上

随机推荐