首页IT科技react中的this指向(React函数式组件Hook中的useState函数的详细解析)

react中的this指向(React函数式组件Hook中的useState函数的详细解析)

时间2025-07-30 14:22:12分类IT科技浏览4795
导读:前言 公司项目需要使用react,而函数式组件也是官方比较推荐的!!!所以学习hooks是很重要的。...

前言

公司项目需要使用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函数内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!

声明:本站所有文章            ,如无特殊说明或标注                     ,均为本站原创发布            。任何个人或组织        ,在未征得本站同意时         ,禁止复制      、盗用           、采集                     、发布本站内容到任何网站         、书籍等各类媒体平台      。如若本站内容侵犯了原著者的合法权益                    ,可联系我们进行处理                   。

创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
如何制定有效的网站推广计划(从目标客户到内容策略,解析) 高青seo优化的方法(高青seo技巧诀窍)