[react] React为什么要搞一个Hooks?
[react] React为什么要搞一个Hooks?
动机
Hook 解决了我们五年来编写和维护成千上万的组件时遇到的各种各样看起来不相关的问题。无论你正在学习 React,或每天使用,或者更愿尝试另一个和 React 有相似组件模型的框架,你都可能对这些问题似曾相识。
在组件之间复用状态逻辑很难
React 没有提供将可复用性行为“附加”到组件的途径(例如,把组件连接到 store)。如果你使用过 React 一段时间,你也许会熟悉一些解决此类问题的方案,比如 render props 和 高阶组件。但是这类方案需要重新组织你的组件结构,这可能会很麻烦,使你的代码难以理解。如果你在 React DevTools 中观察过 React 应用,你会发现由 providers,consumers,高阶组件,render props 等其他抽象层组成的组件会形成“嵌套地狱”。尽管我们可以在 DevTools 过滤掉它们,但这说明了一个更深层次的问题:React 需要为共享状态逻辑提供更好的原生途径。
你可以使用 Hook 从组件中提取状态逻辑,使得这些逻辑可以单独测试并复用。Hook 使你在无需修改组件结构的情况下复用状态逻辑。 这使得在组件间或社区内共享 Hook 变得更便捷。
具体将在自定义 Hook 中对此展开更多讨论。
复杂组件变得难以理解
我们经常维护一些组件,组件起初很简单,但是逐渐会被状态逻辑和副作用充斥。每个生命周期常常包含一些不相关的逻辑。例如,组件常常在 componentDidMount 和 componentDidUpdate 中获取数据。但是,同一个 componentDidMount 中可能也包含很多其它的逻辑,如设置事件监听,而之后需在 componentWillUnmount 中清除。相互关联且需要对照修改的代码被进行了拆分,而完全不相关的代码却在同一个方法中组合在一起。如此很容易产生 bug,并且导致逻辑不一致。
在多数情况下,不可能将组件拆分为更小的粒度,因为状态逻辑无处不在。这也给测试带来了一定挑战。同时,这也是很多人将 React 与状态管理库结合使用的原因之一。但是,这往往会引入了很多抽象概念,需要你在不同的文件之间来回切换,使得复用变得更加困难。
为了解决这个问题,Hook 将组件中相互关联的部分拆分成更小的函数(比如设置订阅或请求数据),而并非强制按照生命周期划分。你还可以使用 reducer 来管理组件的内部状态,使其更加可预测。
我们将在使用 Effect Hook 中对此展开更多讨论。
难以理解的 class
除了代码复用和代码管理会遇到困难外,我们还发现 class 是学习 React 的一大屏障。你必须去理解 JavaScript 中 this 的工作方式,这与其他语言存在巨大差异。还不能忘记绑定事件处理器。没有稳定的语法提案,这些代码非常冗余。大家可以很好地理解 props,state 和自顶向下的数据流,但对 class 却一筹莫展。即便在有经验的 React 开发者之间,对于函数组件与 class 组件的差异也存在分歧,甚至还要区分两种组件的使用场景。
另外,React 已经发布五年了,我们希望它能在下一个五年也与时俱进。就像 Svelte,Angular,Glimmer等其它的库展示的那样,组件预编译会带来巨大的潜力。尤其是在它不局限于模板的时候。最近,我们一直在使用 Prepack 来试验 component folding,也取得了初步成效。但是我们发现使用 class 组件会无意中鼓励开发者使用一些让优化措施无效的方案。class 也给目前的工具带来了一些问题。例如,class 不能很好的压缩,并且会使热重载出现不稳定的情况。因此,我们想提供一个使代码更易于优化的 API。
为了解决这些问题,Hook 使你在非 class 的情况下可以使用更多的 React 特性。 从概念上讲,React 组件一直更像是函数。而 Hook 则拥抱了函数,同时也没有牺牲 React 的精神原则。Hook 提供了问题的解决方案,无需学习复杂的函数式或响应式编程技术
个人简介
我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,
但坚持一定很酷。欢迎大家一起讨论
主目录
[react] React为什么要搞一个Hooks?相关推荐
- 【构建】react打造你的第一个Bilibili首页开发项目
[构建]react打造你的第一个Bilibili首页开发项目 简 介 Hello 小极客们,如果觉得本文还不错,记得点个赞或者给个 star,你们的赞和 star 是我编写更多更丰富开源项目的动力![ ...
- React + TypeScript实战(二)hooks用法
本文采用的react相关技术为: react@18.2.0 typescript@4.7.4 脚手架create-react-app 一.函数式组建的声明方式 import react, { FC } ...
- React 之 function 组件里使用 Hooks
目录 前言 一.react 内置的 Hook 1.useState 2.useEffect 二.自定义 Hook 三.使用 hook 遇到的问题 1.react 函数组件使用了 hook 后闪屏 前言 ...
- 使用React和Spring Boot构建一个简单的CRUD应用
"我喜欢编写身份验证和授权代码." 〜从来没有Java开发人员. 厌倦了一次又一次地建立相同的登录屏幕? 尝试使用Okta API进行托管身份验证,授权和多因素身份验证. Reac ...
- [react] React Hooks帮我们解决了哪些问题?
[react] React Hooks帮我们解决了哪些问题? React hooks help use get rid of js class and all trouble with this po ...
- [vue] 如果现在让你从vue/react/angularjs三个中选择一个,你会选哪个?说说你的理由
[vue] 如果现在让你从vue/react/angularjs三个中选择一个,你会选哪个?说说你的理由 让我选肯定是vue.angularjs没用过.angular倒是用过.挺好用的,但是!!!编译 ...
- 在React / React Native中使用构造函数与getInitialState有什么区别?
本文翻译自:What is the difference between using constructor vs getInitialState in React / React Native? I ...
- BAT都在封杀 React/React Native,我该怎么办?
关乎程序员前途的事情,一定要早知道. 我还没开始学,它就已经被抵制了! 在这件事情上我也是慢半拍的,看到别人的推送"都在封杀 React/React Native ,那我到底还该不该继续学呢 ...
- 【笔记-node】《Egg.js框架入门与实战》、《用 React+React Hook+Egg 造轮子 全栈开发旅游电商应用》
20210226-20210227:<Egg.js框架入门与实战> 课程地址:https://www.imooc.com/learn/1185 第一章 课程导学 01-01 课程介绍 一. ...
最新文章
- 泛化 实现 组合 聚合 关联 依赖
- label自适应高度
- 计算机电路基础学什么,"计算机电路基础"学习辅导.doc
- linux route命令删除多余路由
- 60秒完成病毒基因对比 阿里云向社会免费开放基因计算服务
- python gis库_使用开放的python库自动化GIS和遥感工作流
- Python解析pdf转为TXT格式
- @SuppressWarnings(resource)
- python练手经典100例-Python入门练手100例
- R语言绘制双坐标轴的方法初探
- ansible shell 之运行后台程序
- java isbn_JAVA ISBN10 ISBN13 正则表达式
- SPEA2算法原理及应用方向
- Pathon 连接数据库
- jq 下拉列表选中事件_JQuery select各种事件
- 阿里云视频点播服务的开通和使用
- 循环中的continue与break语句
- java一元多项式减法运算_一元多项式的表示及加减乘除运算
- 注销Apple ID账号
- 西门子PLC1200学习之PID总结