浅尝React Hooks

Hooks的理解:
1. Wiki:
1) In computer programming, the term hooking covers a range of techniques used to alter or augment the behavior of an operating system, of applications, or of other software components by intercepting function calls or messages or events passed between software components. 2) Code that handles such intercepted function calls, events or messages is called a hook;
2. 通俗:
1)Hook(钩子): 通过拦截软件、调用系统内部函数和消息通信,来增强原有功能的技术;

React Hooks:
1. React 16.8发布以来最吸引人的特性之一;
2.出现的原因:
1)项目中存有一大堆组件,这些组件各自都有拥有的自己的状态;
2)想要重用有些特定的带状态的逻辑,需要大幅度重构应用;
3)使用React Hooks,抽离出这些带状态的逻辑代码;
4)这样更利于重用、而且更易于进行测试和管理
3.影响:
1) React Hooks, 可在函数式组件中实现之前在带状态组件中能做到的任何事;
2)能够更灵活地实现应用代码

React Hooks 在实际项目中到底怎么使用 ?

一. 状态管理

1. 对于业务性组件来说,状态管理肯定是不可避免的;
2.以前:
1) Class组件来管理业务逻辑;
2)或者使用redux来全局管理状态;

3.现在:
1)利用React Hooks新提供的State Hook来处理状态;
2)针对已经写好的Class组件,可以利用State Hook很好地进行重构下来尝试将它重构成函数式组件:
4. 上述代码解析:
1) 首先使用useState api 来声明一个内部状态;
2)接着声明一个新的状态变量state,以及它的setter方法;
3)上述代码中使用state这个变量,是为了减少重构的工作量;
4)可以单独将每个独立的状态提取出来使用, 例如:const [userName, setUserName] = useState("laura");
5)在组件内部,可以使用这个内部状态来处理业务逻辑;
6)由于是函数式组件的写法,因此也避免了很多this绑定,而且这部分逻辑在后续使用的过程中也可一抽离出来进行重用
注意: 当使用set方法的时候,旧的状态是无法自动merge到新的状态中去的;
如果提取的状态是个对象,且有多个属性时,需要使用如下语法进行状态更新 setState({ ...state, userName: event.target.value })

二. 生命周期管理
1. 利用声明周期函数,可以控制整个组件的加载、更新、和卸载;
2. React Hooks提供了Effect钩子, 使得在函数组件中也可以实现这些功能;
3. 例子:利用Effect钩子实现原本在Class组件中的各个声明周期方法
4. 代码解析:
1)利用副作用钩子很好的实现了原本的声明周期;
2)通常情况,利用组件的声明周期去获取数据、操作DOM等,这些操作叫做做副作用(side effect);
3)副作用逻辑一般都比较复杂,也是bug频发的地段; 4)所以我们可以针对每一段逻辑单独使用一个Effect钩子,便于后期维护和调试。

三. useEffect的使用方法 -- 需传递两个参数

参数1: 回调函数
1. 会在每次组件渲染后执行;
2. 包括初始化渲染以及每次更新时

参数2: 状态依赖项(数组形式)
1. 一旦检测到依赖项数据变动,组件会更新; 并且回调函数都会被再次执行一遍;实现componentDidUpdate的功能;
2.如果你传入一个空依赖,就能实现原来componentDidMount的效果,即只会执行一次;
3.回调函数中如果返回的是闭包,这个返回的闭包函数将会在组件重新渲染前执行,所以可以在这个位置做一些清理操作,从而实现componentWillUnmount的功能。

注意:componentWillMount和componentWillUpdate两个生命周期方法在新版本的React中已经不推荐使用了

四. 自定义Hook
1. 重用和抽象一直都是编程中要解决的问题;
2. 封装想要的Hook, 从而实现代码逻辑的重用和抽象;
3. 自定义Hook的方法:
1)包装一个自定义函数;
2)根据功能将其状态和对应的effect逻辑封装进去
4. 代码解析:
1)封装一个请求数据的Hook
2)使用方法跟其他Hook类似,直接调用即可

注意:
1)不要在循环, 条件或者嵌套函数中调用Hook, 必须始终在React函数的顶层使用hook;
原因:React需要利用调用顺序来正确更新相应的状态,以及调用相应的钩子函数, 一旦在循环条件或者条件分支语句中调用Hook,就很容易导致调用顺序的不一致性,从而产生难以预料的后果
2)只能在React函数是组件或者自定义Hook中使用Hook; 为了防止无意中破坏这些规则,可以安装一个eslint插件
npm installeslint-plugin-react-hooks --save-dev
并在配置文件中使用它
这样一来,一旦违反上述这些原则,就会获得相应的提示

本文介绍了React Hook的使用方式,并通过几个简单的例子演示了如何在函数式组件中进行状态管理和生命周期管理。
官方目前提供了很多基础的Hook,如useContext, useReducer, useMemo等,大家可以酌情在项目中使用。

原文地址:https://www.cnblogs.com/lixiang-web/p/12329623.html

时间: 2024-11-02 15:02:56

浅尝React Hooks的相关文章

来自后端的突袭? --开包即食的教程带你浅尝最新开源的C# Web引擎 Blazor

来自后端的突袭? --开包即食的教程带你浅尝最新开源的C# Web引擎 Blazor 在今年年初, 恰逢新春佳节临近的时候. 微软给全球的C#开发者们, 着实的送上了一分惊喜. 微软正式开源Blazor ,将.NET带回到浏览器. 这个小惊喜, 迅速的在dotnet开发者中间传开了. 而就在昨天(2018年3月22日) Blazor发布了它的第一次Release. Blazor到底是个什么样的东西呢?我们是否真的可以携着C#语言进入前端的市场中? 不如现在就跟我一起体验dotnet blazor

React Hooks用法大全

前言 在 React 的世界中,有容器组件和 UI 组件之分,在 React Hooks 出现之前,UI 组件我们可以使用函数,无状态组件来展示 UI,而对于容器组件,函数组件就显得无能为力,我们依赖于类组件来获取数据,处理数据,并向下传递参数给 UI 组件进行渲染.在我看来,使用 React Hooks 相比于从前的类组件有以下几点好处: 代码可读性更强,原本同一块功能的代码逻辑被拆分在了不同的生命周期函数中,容易使开发者不利于维护和迭代,通过 React Hooks 可以将功能代码聚合,方便

浅尝awk

前几天写了sed,这次来继续学习一下它的好兄弟,awk,用了两者,一个这样的感觉,两者都可以用来处理匹配,如果想对文本做处理,sed的删除,匹配,替换要用的频繁一些,如果要深入文本的每一行,对每一行进行一些列处理,例如,统计,然后格式化输出,awk就可以派上用场了 查看自己ubuntu当前的awk which awk,其实用的是/usr/bin/mawk 在学习sed篇中,我们知道,sed是读取文本的每一行到一个模式空间,然后对模式空间的内容进行处理,其实awk差不多,它也是对模式空间进行处理,

浅尝MongoDB

浅尝MongoDB NoSQL Mongo 数据库 安装mongoDB Linux 以linux环境为例,安装mongodb,最简单的方式就是 利用自带的包管理器 我的环境是 linux deepin 15.4 (基于debian 8) sudo apt install mongodb ~$ mongo -version MongoDB shell version: 3.2.11 当你看到这个说明你的mogodb已经安装完成. Windows 略 windows很容易 去官网下个包,无脑下一步即

浅尝key-value数据库(二)——MongoDB的优与劣

浅尝key-value数据库(二)——MongoDB的优与劣 MongoDB的名字取自英文单词"humongous"的中间五个字母,是一个C++开发的基于分布式文件存储的数据库开源项目.他的文件存储格式是BSON(Binary JSON),因此可以高效存储二进制数据,例如图像.视频等大对象. 由于我是CentOS x86_64的系统,于是安装MongoDB非常简单: vi /etc/yum.repos.d/mongo.repo [10gen] name=10gen Repository

浅尝key-value数据库(一)——一览NoSQL

浅尝key-value数据库(一)——一览NoSQL 最近由于一个项目的关系,研究了一下key-value数据库这个最近很火的概念.本系列从项目需求的角度分析并测试了几个key-value数据库的性能. key-value数据库,又称作NoSQL数据库,他的最基本的基础原理就是CAP. CAP是2000年PODC上Eric Brewer提出的一个概念,即 C -> Consistency; A -> Availability; P -> Tolerance to network Part

浅尝key-value数据库(三)——MongoDB的分布式

浅尝key-value数据库(三)——MongoDB的分布式 测试了单机MongoDB的随机读和写入性能,这一节来讲一讲MongoDB的分布式. MongoDB的分布式分成两种,一种是Replication,一种是Sharding.我们主要来看一下Sharding. 先贴一张结构示意图: MongoDB Auto-Sharding的配置非常简单,在不同的机器分别开启shard, config server, mongos的进程即可.(假设config serevr的IP为192.168.1.11

【转】浅谈React、Flux 与 Redux

本文转自<浅谈React.Flux 与 Redux>,转载请注明出处. React React 是一个 View 层的框架,用来渲染视图,它主要做几件事情: 组件化 利用 props 形成单向的数据流 根据 state 的变化来更新 view 利用虚拟 DOM 来提升渲染性能 前面说到 React 能够根据 state 的变化来更新 view,一般来说引起 state 变化的动作除了来自外部(如服务器),大部分都来自于页面上的用户活动,那页面上的用户活动怎样对 state 产生作用呢?Reac

浅尝ECMAScript6

浅尝ECMAScript6 简介 ECMAScript6 是最新的ECMAScript标准,于2015年6月正式推出(所以也称为ECMAScript 2015),相比于2009年推出的es5, es6定义了更加丰富的语言特性,基于该标准的Javascript语言也迎来了语法上的重大变革.本文列举了部分es6新特性,希望之前没接触es6的小伙伴读完本文能对下一代js编程有一个初步的认识. 箭头函数 箭头函数用 "=>"简化函数定义,类似于C#, Java8中的Lambda表达式,支