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-redux实现小案例（todolist）的过程，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
这篇文章主要介绍了react如何将字符串转义成html语句问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
详解webpack + react + react-router 如何实现懒加载
这篇文章主要介绍了详解webpack + react + react-router 如何实现懒加载,具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-11-11
这篇文章主要介绍了react中使用js实现页面滚动监听,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了详解react服务端渲染（同构）的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
create-react-app使用antd按需加载的样式无效问题的解决
这篇文章主要介绍了create-react-app使用antd按需加载的样式无效问题的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
这篇文章主要为大家介绍了React错误用法习惯分析详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章主要介绍了React如何使用axios请求数据并把数据渲染到组件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
Zustand是一个为React和浏览器环境设计的轻量级状态管理库,由Vercel开发,它特点包括轻量级、易用性、灵活性、可组合性和性能优化,支持多种状态管理模式和中间件,适合中小型项目,Zustand还支持TypeScript,提供类型安全的支持2024-09-09
本篇文章主要介绍了react+redux的升级版todoList的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
最新评论