react中的this指向(React函数式组件Hook中的useState函数的详细解析)
前言
公司项目需要使用react ,而函数式组件也是官方比较推荐的!!!所以学习hooks是很重要的 。
一 、什么是函数式组件
纯函数组件有以下特点:
没有状态 没有生命周期 没有 this因存在如上特点 ,使得纯函数组件只能做UI展示的功能 , 涉及到状态的管理与切换就不得不用到类组件或者redux 。 但因为简单的页面也是用类组件 ,同时要继承一个React实例 ,使得代码会显得很重 。
以前我们可以使用class来声明一个组件 ,其实使用function也可以定义一个组件:
创建 App1.js :
备注:
在vscode中 ,如果安装过 ES7 React/Redux/GraphQL/React-Native snippets 这个插件 ,即可直接使用 rfc 快捷键敲出以下模板:
在 index.js 中调用:
二 、useState
useState让函数组件有了state状态 ,可以对状态数据进行读写操作
语法:const [变量名,修改变量的方法名] = React.useState(初始值)
修改变量的方法名(setXxx)有两种写法:
setXxx(newValue):参数为非函数值 ,直接指定新的状态值 ,内部用器覆盖原来的状态值 。
setXxx(value => newValue):参数为函数 ,接收原本的状态值,返回新的状态值 ,内部用器覆盖原来的状态值 。
现在我们改成函数式编程实现累加案例:
到此这篇关于React函数式组件Hook中的useState函数的详细解析的文章就介绍到这了,更多相关React Hook useState函数内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!
创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!