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如何使用axios请求数据并把数据渲染到组件
这篇文章主要介绍了React如何使用axios请求数据并把数据渲染到组件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
React native ListView 增加顶部下拉刷新和底下点击刷新示例
这篇文章主要介绍了React native ListView 增加顶部下拉刷新和底下点击刷新示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-04-04
使用React hook实现remember me功能
相信大家在使用 React 写页面的时候都遇到过完成 Remember me 的需求吧！本文就将这个需求封装在一个 React hook 中以供后续的使用,觉得有用的同学可以收藏起来以备不时之需,感兴趣的小伙伴跟着小编一起来看看吧
2024-04-04
React useCallback使用教程
useCallback是react中比较重要的一个hook，useCallback 用来返回一个函数，在父子组件传参或者通用函数封装中,起到举足轻重的作用
2023-01-01
React实现点击删除列表中对应项
本文主要介绍了React 点击删除列表中对应项的方法。具有一定的参考价值，下面跟着小编一起来看下吧
2017-01-01
react字符串匹配关键字高亮问题
这篇文章主要介绍了react字符串匹配关键字高亮问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-12-12
React classnames原理及测试用例
这篇文章主要为大家介绍了React classnames原理及测试用例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
关于React状态管理的三个规则总结
随着 JavaScript 单页应用开发日趋复杂,JavaScript 需要管理比任何时候都要多的 state （状态）,这篇文章主要给大家介绍了关于React状态管理的三个规则,需要的朋友可以参考下
2021-07-07
react使用mobx封装管理用户登录的store示例详解
这篇文章主要介绍了react基于mobx封装管理用户登录的store,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-06-06
react基础知识总结
这篇文章主要介绍了react常用的基础知识总结，帮助大家更好的理解和学习使用react框架，感兴趣的朋友可以了解下
2021-04-04