为什么要使用React Hooks?(5分钟实例)

前言

React Hooks在React v16.8正式稳定版中加入。

Hooks是什么?

  1. React Hooks 就是让你不必写class组件就可以用state和其他的React特性;
  2. 你也可以编写自己的hooks在不同的组件之间复用;

最近很多人都在谈论 React Hooks。当使用React类组件那么久,使用React hooks需要一些观念转变。React官方团队明确表示他们将会据需支持类组件,那为什么还要使用React Hooks呢?

接下来是一个5分钟的例子将你带入hooks,让我们一起了解吧。

例子

我们的例子是 一个按钮带有是否激活状态,当点击的时候切换颜色。

开始

我们有一个简单的按钮组件,我们想让他变的简单,所以写了一个功能函数:

const Button = props => {return (<div className="button" onClick={props.onClick} >{props.text}</div>)
}
复制代码

我们可以传递自定义的 onClick 事件 和 text属性。

但是,如果我们想要当按钮激活改变其颜色要怎么办? 假如,我们已经有100个组件用了这个按钮,我们不想再加其他属性,颜色属性让按钮自己控制也足够简单。

转换到类

唯一的问题是我们将会需要一些状态。假设现在在hooks出现之前,我们只能将其转换成class,才能控制state。

class ButtonWithClass extends React.Component {state = {active: false};render() {return (<div className={this.state.active ? "active-button" : "default-button"}>onClick={() => { this.setState({active: !this.state.active}); this.props.onClick();}}>{this.props.text}</div>)}
}
复制代码

我们有一个完全重写的组件,加了2倍的代码行,我们想要的只是一点状态。你的代 码 PR 校验人会看到很多红色和绿色的git修改明细。没有人会喜欢圣诞主题的红绿色Pull Request。

Hooks将会拯救你!

添加Hooks

当我们用React Hooks执行完全相同的操作时会发生什么:

    import React, {useState} from 'react';const ButtonWithHooks = props => {const [active, setActive] = useState(false); // ***return (<div className={active ? "active-button" : "default-button"} //*onClick={() => {setActive(!active); // ***props.onClick();}}>{props.text}</div>)};
复制代码

这个组件,我们没有重写任何东西。我们做的就是添加了一点行数 并更新了 onCLick 函数,我们得到了与class版本相同的结果。我们的PR 查看者会开心,添加state只需下面这一行: const [active setActive] = useState(fasle);

重构

但是等等,为什么按钮控制自己的状态?我们改变下,我们想让那个组件简单让我们看起来聪明。 我们让 active 变成一个被父组件控制的prop。没问题,用React Hooks 仅移处带**的两行 和 带号的那一行的一部分。

如此简单,但是class装换成function会更复杂。

当你把组件装换成函数时,你可能很受挫。查看你代码的人又变成另外一个红绿色。即使实际的变化很小你将会感到很沮丧。

总结

React Hooks 让你的功能函数作为一个函数,并挂钩到React 特定功能。这就是他,如此简单如此强大。这是React Hooks的一些好处(大多数已经覆盖到了,我只想分享我认为收益最明显的地方)

  1. 重写不用移处或添加state,仅删除、添加行
  2. 用useEffects不用记生命周期方法
  3. 不像class组件的state可自定义和跨组件重用。
  4. 更干净的代码
  5. 没有重大变化

blog.usejournal.com/why-bother-…

转载于:https://juejin.im/post/5cfdba4be51d4577596486d1

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/279414.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ActiveMQ在windows下启动失败解决方案

activemq.xml文件中的<transportConnectors><!-- DOS protection, limit concurrent connections to 1000 and frame size to 100MB --><transportConnector name"openwire" uri"tcp://0.0.0.0:61616?maximumConnections1000&amp;wireForma…

jest忽略如何添加忽略_大多数人忽略的基本家庭维护任务

jest忽略如何添加忽略Owning a home requires a lot of responsibility, most notably regular maintenance to keep everything working great. However, there are a handful of very basic home maintenance tasks that you might be forgetting about. 拥有房屋需要承担很多…

自定义常用input表单元素二:纯css实现自定义radio单选按钮

这是接着上一篇纯css自定义复选框checkbox的第二篇&#xff0c;自定义一个radio单选按钮&#xff0c;同样&#xff0c;采用css伪类和“”css选择器为思路&#xff0c;下面是预览图&#xff1a; 下面直入主题放代码&#xff1a;HTML部分 <!--两个name相同的radio--> <i…

Elasticsearch之kopf插件安装之后的浏览详解

比如&#xff0c;我的这里是http://192.168.80.200:9200/_plugin/kopf/ 1、cluster 2、nodes 3、rest 4、more 5、更多详情&#xff0c;随着深入&#xff0c;再贴写分享&#xff01; 本文转自大数据躺过的坑博客园博客&#xff0c;原文链接&#xff1a;http://www.cnblogs.com/…

邮件系统之webmail

courier-authlib 网址http://www.courier-mta.org/ flush privileges 命令本质上的作用是将当前user和privilige表中的用户信息/权限设置从mysql库(MySQL数据库的内置库)中提取到内存里 虚拟用户&#xff1a;Maildir &#xff1a;/var/mailbox/Suexec apache ,httpdusergroupht…

如何将Microsoft Word文档转换为PDF

PDFs are handy for distributing documents so that they’re seen the same way by all parties. Typically, you’ll create documents using another app, and then convert them to PDF. Here’s how to do it for a Microsoft Word document. PDF易于分发文档&#xff0c…

ASP.NET WebApi 基于JWT实现Token签名认证

一、前言 开发提供数据的WebApi服务&#xff0c;最重要的是数据的安全性。那么对于我们来说&#xff0c;如何确保数据的安全将会是需要思考的问题。在ASP.NET WebService服务中可以通过SoapHead验证机制来实现&#xff0c;那么在ASP.NET WebApi中我们应该如何保证我们的接口安全…

Cage验证码生成器快速上手

Cage小巧&#xff0c;好用。这里在官方基础例子基础上做了扩展&#xff1a; 12345678910111213141516171819202122232425262728293031323334package com.lavasoft.ntv.web.common; import com.github.cage.IGenerator; import java.util.Random; /*** 验证码生成器 * * author …

马云:未来无工可打,人工智能发展红利还在10年以后

马云虽然已经退出阿里巴巴&#xff0c;但作为一代商业传奇他所说的话&#xff0c;还十分据有影响力。关于人工智能&#xff0c;马云提出过不少预测性言论。未来10年&#xff0c;房子、车子都不在值钱。面对人工智能时代&#xff0c;未来传统行业大部分会消失。更有厉害的&#…

如何更改您的iPhone铃声

The problem with having a popular phone like an iPhone is that, by default, everyone has the same ringtone. If you want to give your iPhone a more personal sound, here’s how to do it. 拥有像iPhone这样的流行手机的问题是&#xff0c;默认情况下&#xff0c;每个…

【ACM-ICPC 2018 沈阳赛区网络预赛 I】Lattice's basics in digital electronics

【链接】 我是链接,点我呀:) 【题意】 【题解】 每个单词的前缀都不同。 不能更明示了... 裸的字典树。 模拟一下。输出一下就ojbk了。 【代码】 #include <bits/stdc.h> #define LL long long #define rep1(i,a,b) for (int i a;i < b;i) #define rep2(i,a,b) for…

扒一扒那些年我们遇到的奇葩代码

前言 本文首发于公众号【一名打字员】 在工作中&#xff0c;我们通常会遇到传说中的“祖传”代码&#xff0c;有些是否让我们感到哭笑不得&#xff0c;今天本猿整理一下自己以及网络上出现过的奇葩代码。来源于互联网的均会标明出处。 TOP1 当仁不让的当然是传说中的“睡排序”…

相对湿度与绝对湿度_如何监视家里的湿度水平

相对湿度与绝对湿度High humidity is no fun, and neither is low humidity—you want a good balance between the two. Here’s how to monitor the humidity in your house so that you can make the proper adjustments. 高湿度无济于事&#xff0c;低湿度也无济于事-您希望…

基于redis实现的扣减库存

2019独角兽企业重金招聘Python工程师标准>>> 在日常开发中有很多地方都有类似扣减库存的操作&#xff0c;比如电商系统中的商品库存&#xff0c;抽奖系统中的奖品库存等。 解决方案 使用mysql数据库&#xff0c;使用一个字段来存储库存&#xff0c;每次扣减库存去更…

JavaScript 使用random()生成随机数

function myFunction() { var a Math.floor(Math.random()*10);return a;} // 记住 Math.random() 永远不会返回 1。同时因为我们是在用 Math.floor() 向下取整&#xff0c;所以最终我们获得的结果不可能有 20。这确保了我们获得了一个在0到19之间的整数。 把操作连缀起来&…

plex 乱码_Plex Media Center现在支持播客

plex 乱码Plex is adding beta support for podcasts to iOS, Android, Roku, and Plex Web today, alongside a custom home screen for mobile users. Plex现在为iOS&#xff0c;Android&#xff0c;Roku和Plex Web的播客添加了beta支持&#xff0c;同时为移动用户提供了自定…

Add a All Document Folder

本文出自Simmy的个人blog&#xff1a;西米在线 http://simmyonline.com/archives/54.html right clickSearch Folder-New Search Folder-Custom-Create a custom folder 本文转simmy51CTO博客&#xff0c;原文链接&#xff1a;http://blog.51cto.com/helpdesk/122327&#xff0…

Oracle服务器修改IP后

机房有两套网络&#xff0c;一套办公网&#xff0c;一套机房的内网&#xff0c;办公网可以通过vpn在其他地方访问&#xff0c;内网只能在公司办公室访问。团队有同事去外地办公&#xff0c;开发的时候需要通过客户端直连数据库&#xff0c;于是把数据库服务器的网线换到办公网的…

代理IP对直播平台的影响与关系-国内多IP昙花一现

1.代理IP的作用1>.访问一些单位或团体内部资源&#xff0c;如某大学FTP(前提是该代理地址在该资源 的允许访问范围之内)&#xff0c;使用网络内地址段免费代理服务器&#xff0c;就可以用于对 网络开放的各类FTP下载上传&#xff0c;以及各类资料查询共享等服务。国内站群整…

ios12彻底关闭siri_Siri正在iOS 12中获取自定义语音操作

ios12彻底关闭siriSiri is about to get a lot more powerful. Custom voice commands for any app will allow you to say “Hey Siri, I lost my keys” to instantly launch an app that will help you find them. Siri将变得更加强大。 针对任何应用程序的自定义语音命令将…