• 售前

  • 售后

热门帖子
入门百科

React hooks的优缺点详解

[复制链接]
大龙山草 显示全部楼层 发表于 2021-10-26 14:19:48 |阅读模式 打印 上一主题 下一主题
目次


  • 前言
  • 优点:
  • 缺点:

    • 一、相应式的useEffect
    • 二、状态不同步

  • 怎么克制react hooks的常见题目

前言


Hook 是 React 16.8 的新增特性。它是完全可选的,而且100%向后兼容。它可以让你使用函数组件的方式,运用类组件以及 react 其他的一些特性,好比管理状态、生命周期钩子等。从概念上讲,React 组件一直更像是函数。而 Hook 则拥抱了函数,同时也没有捐躯 React 的精力原则。

优点:

1、代码可读性更强,本来同一块功能的代码逻辑被拆分在了不同的生命周期函数中,轻易使开辟者倒霉于维护和迭代,通过 React Hooks 可以将功能代码聚合,方便阅读维护。比方,每个生命周期中常常会包罗一些不干系的逻辑。一样平常我们都会在 componentDidMount 和 componentDidUpdate 中获取数据。但是,同一个 componentDidMount 中可能也包罗很多别的的逻辑,如设置事故监听,而之后需在 componentWillUnmount 中清除。相互关联且需要对照修改的代码被举行了拆分,而完全不干系的代码却在同一个方法中组合在一起。如此很轻易产生 bug,而且导致逻辑不一致。
2、组件树层级变浅。在本来的代码中,我们常常使用 HOC/render props 等方式来复用组件的状态,增强功能等,无疑增加了组件树层数及渲染,在 React DevTools 中观察过 React 应用,你会发现由 providers,consumers,高阶组件,render props 等其他抽象层构成的组件会形成“嵌套地狱”。而在 React Hooks 中,这些功能都可以通过强大的自界说的 Hooks 来实现。
3、不消再去思量 this 的指向题目。在类组件中,你必须去理解 JavaScript 中 this 的工作方式。

缺点:


一、相应式的useEffect


写函数组件时,你不得不改变一些写法风俗。你必须清晰代码中useEffect和useCallback的“依靠项数组”的改变时机。偶然间,你的useEffect依靠某个函数的不可变性,这个函数的不可变性又依靠于另一个函数的不可变性,这样便形成了一条依靠链。一旦这条依靠链的某个节点不测地被改变了,你的useEffect就被不测地触发了,如果你的useEffect是幂等的利用,可能带来的是性能条理的题目,如果黑白幂等,那就糟糕了。
以是,对比componentDidmount和componentDidUpdate,useEffect带来的心智负担更大。

二、状态不同步


函数的运行是独立的,每个函数都有一份独立的作用域。函数的变量是生存在运行时的作用域内里,当我们有异步利用的时间,常常会遇到异步回调的变量引用是之前的,也就是旧的(这里也可以理解成闭包)。好比下面的一个例子:
  1. import React, { useState } from "react";
  2. const Counter = () => {
  3.   const [counter, setCounter] = useState(0);
  4.   const onAlertButtonClick = () => {
  5.     setTimeout(() => {
  6.       alert("Value: " + counter);
  7.     }, 3000);
  8.   };
  9.   return (
  10.     <div>
  11.       <p>You clicked {counter} times.</p>
  12.       <button onClick={() => setCounter(counter + 1)}>Click me</button>
  13.       <button onClick={onAlertButtonClick}>
  14.         Show me the value in 3 seconds
  15.       </button>
  16.     </div>
  17.   );
  18. };
  19. export default Counter;
复制代码
当你点击Show me the value in 3 seconds的后,紧接着点击Click me使得counter的值从0酿成1。三秒后,定时器触发,但alert出来的是0(旧值),但我们渴望的结果是当前的状态1。
这个题目在class component不会出现,由于class component的属性和方法都存放在一个instance上,调用方式是:this.state.xxx和this.method()。由于每次都是从一个不变的instance上举行取值,以是不存在引用是旧的题目。
实在办理这个hooks的题目也可以参照类的instance。用useRef返回的immutable RefObject(current属性是可变的)来生存state,然后取值方式从counter酿成了: counterRef.current。如下:
  1. import React, { useState, useRef, useEffect } from "react";
  2. const Counter = () => {
  3.   const [counter, setCounter] = useState(0);
  4.   const counterRef = useRef(counter);
  5.   const onAlertButtonClick = () => {
  6.     setTimeout(() => {
  7.       alert("Value: " + counterRef.current);
  8.     }, 3000);
  9.   };
  10.   useEffect(() => {
  11.     counterRef.current = counter;
  12.   });
  13.   return (
  14.     <div>
  15.       <p>You clicked {counter} times.</p>
  16.       <button onClick={() => setCounter(counter + 1)}>Click me</button>
  17.       <button onClick={onAlertButtonClick}>
  18.         Show me the value in 3 seconds
  19.       </button>
  20.     </div>
  21.   );
  22. };
  23. export default Counter;
复制代码
结果我们所等待,alert的是当前的值1。

怎么克制react hooks的常见题目


       
  • 不要在useEffect内里写太多的依靠项,分别这些依靠项成多个单一功能的useEffect。实在这点是遵循了软件设计的“单一职责模式”。   
  • 如果你遇到状态不同步的题目,可以思量动手动通报参数到函数。如:
  1.    // showCount的count来自父级作用域
  2.    const [count,setCount] = useState(xxx);
  3.    function showCount(){ console.log(count) }
  4.    // showCount的count来自参数
  5.    const [count,setCount] = useState(xxx);
  6.    function showCount(c){ console.log(c) }
复制代码
但这个也只能办理一部分题目,很多时间你不得不使用上述的useRef方案。
3. 器重eslint-plugin-react-hooks插件的告诫。
4. 复杂业务的时间,使用Component取代hooks。
以上就是React hooks的优缺点详解的详细内容,更多关于React hooks的优缺点的资料请关注草根技术分享别的干系文章!

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作