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

更新时间：2022年10月27日 14:00:10 作者：小马_xiaoen

Hook 就是 JavaScript 函数，这个函数可以帮助你钩入(hook into) React State以及生命周期等特性，这篇文章主要介绍了React Hook 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函数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

react实现点击选中的li高亮的示例代码
本篇文章主要介绍了react实现选中的li高亮的示例代码，页面上有很多个li，要实现点击到哪个就哪个高亮。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-05-05
React拆分窗格组件的两种方法
这篇文章主要介绍了React拆分窗格组件的两种方法,使用第三方库react-split-pane适用于快速实现拆分窗格功能，并且对功能和样式的要求较为简单的场景，本文结合示例代码介绍的非常详细，需要的朋友可以参考下
2023-07-07
React深入浅出分析Hooks源码
在react类组件（class）写法中，有setState和生命周期对状态进行管理，但是在函数组件中不存在这些，故引入hooks（版本：>=16.8），使开发者在非class的情况下使用更多react特性
2022-11-11
三分钟搞懂react-hooks及实例代码
React Hooks是今年最劲爆的新特性真的毫不夸张。如果你也对react感兴趣，或者正在使用react进行项目开发，请抽出点时间阅读下此文
2022-03-03
React特征学习之Form格式示例详解
这篇文章主要为大家介绍了React特征学习之Form格式示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
React useImperativeHandle处理组件状态和生命周期用法详解
React Hooks 为我们提供了一种全新的方式来处理组件的状态和生命周期,useImperativeHandle是一个相对较少被提及的Hook,但在某些场景下,它是非常有用的,本文将深讨useImperativeHandle的用法,并通过实例来加深理解
2023-09-09
React前端解链表数据结构示例详解
这篇文章主要为大家介绍了React前端解链表数据结构示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10
react组件中过渡动画的问题解决
这篇文章主要为大家介绍了react组件中过渡动画的问题解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
react build 后打包发布总结
这篇文章主要介绍了react build 后打包发布总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-08-08
React 添加引用路径时如何使用@符号作为src文件
这篇文章主要介绍了React 添加引用路径时如何使用@符号作为src文件,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-06-06