为什么要使用React Hooks?(5分钟实例)
前言
React Hooks在React v16.8正式稳定版中加入。
Hooks是什么?
- React Hooks 就是让你不必写class组件就可以用state和其他的React特性;
- 你也可以编写自己的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的一些好处(大多数已经覆盖到了,我只想分享我认为收益最明显的地方)
- 重写不用移处或添加state,仅删除、添加行
- 用useEffects不用记生命周期方法
- 不像class组件的state可自定义和跨组件重用。
- 更干净的代码
- 没有重大变化
blog.usejournal.com/why-bother-…
转载于:https://juejin.im/post/5cfdba4be51d4577596486d1
为什么要使用React Hooks?(5分钟实例)相关推荐
- React hooks - Ref 使用实例
useRef 返回一个可变的 ref 对象,其 .current 属性被初始化为传入的参数(initialValue).返回的 ref 对象在组件的整个生命周期内保持不变. useRef() ,它可以 ...
- React 新特性 Hooks 讲解及实例(四)
想优质文章请猛戳GitHub博客,一年百来篇优质文章等着你! 使用 Ref Hooks 类组件中使用 Ref 一般有: String Ref Callback Ref CreateRef 上述在函数组 ...
- 探React Hooks
前言 众所周知,hooks在 React@16.8 中已经正式发布了.而下周周会,我们团队有个同学将会仔细介绍分享一下hooks.最近网上呢有不少hooks的文章,这不免激起了我自己的好奇心,想先行探 ...
- dw按钮图片滚动js_使用 React Hooks 实现仿石墨的图片预览插件(巨详细)
点击上方"前端教程",选择"星标" 每天前端开发干货第一时间送达! 作者:DARRELL https://juejin.im/post/5e9bf299f265 ...
- 通过 React Hooks 声明式地使用 setInterval
2019独角兽企业重金招聘Python工程师标准>>> 本文由云+社区发表 作者:Dan Abramov 接触 React Hooks 一定时间的你,也许会碰到一个神奇的问题: se ...
- 【译】什么是React Hooks
原文:What are React Hooks? 作者:Robin Wieruch 译者:博轩 React Hooks 于 2018年10月的React Conf 中引入,作为在 React 函数组件 ...
- (十三)react hooks
react hooks react hooks 出几道react hooks面试题 class组件存在哪些问题 用useState实现state和setState功能 用useEffect模拟组件生命 ...
- React Hooks 完全使用指南
大家好,我是若川.最近组织了源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步.同时极力推荐订阅我写的<学习源码整体架构系列> ...
- 精读《怎么用 React Hooks 造轮子》
1 引言 上周的 精读<React Hooks> 已经实现了对 React Hooks 的基本认知,也许你也看了 React Hooks 基本实现剖析(就是数组),但理解实现原理就可以用好 ...
最新文章
- mybatis mapper文件找不到_MyBatis 面试题
- Mybatis学习总结(二)——Mapper代理开发
- 经验 | 非科班出身怎么转行计算机?
- 华硕微型计算机配置数据,“智能”显卡 华硕ROG Matrix显卡赏析
- 【JAVASCRIPT】如何不使用jquery函数和ajax框架实现ajax效果
- 小白也能看懂的 Java 异常处理
- 安卓短信功能全解:调用系统短信功能发送短信、彩信,使用SmsManager发送短信,并监听发送短信的投递情况,使用广播接收器监听接收的短信。
- autocad java api,autocad接口api
- 2019年7月Github上最热门的Java开源项目
- Python解析XML文档
- 【Rust日报】2021-10-06 [Rust游戏] - 自走棋
- http301重定向IIS 301重定向域名转向新旧域名更替
- lammps一对一课程学习大纲
- navicat15 oracle library is not loaded
- Ubuntu安装迅雷,让下载变得轻松
- The maximum number of apps for free development profiles has been reached.
- 机器人砂型铸造_启东精密砂型铸造
- Android App 性能测试工具GT
- mysql hy000 2013_ERROR 2013 (HY000): Lost connection to MySQL server during query
- 树状结构数据查询方法
热门文章
- python自定义colorbar_python可视化 matplotlib画图使用colorbar工具自定义颜色
- python3[进阶]8.对象引用、可变性和垃圾回收
- 动图演示23个鲜为人知的VSCode快捷键
- JSONObject和JSONArray 以及Mybatis传入Map类型参数
- 谷歌Gboard输入法新增“无痕模式”:仅在Chrome隐身窗口中适用
- shell 获取值 默认值
- JFinal 1.5 发布,JAVA极速WEB+ORM框架
- 类和类之间的关系解析-1
- 第二十一章流 5 多种打开文件的方式 文件存在,文件不存在
- [信息收集] HCOMP 2010概况及收录论文