（React Hooks）前端八股文修炼Day9

2024-04-08 05:04
文章标签 javascript react 前端 day9 frontend 修炼 八股文 hooks

本文主要是介绍（React Hooks）前端八股文修炼Day9，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在这里插入图片描述

一 对 React Hook 的理解，它的实现原理是什么

React Hooks是React 16.8版本中引入的一个特性，它允许你在不编写类组件的情况下，使用state以及其他的React特性。Hooks的出现主要是为了解决类组件的一些问题，如复杂组件难以理解、难以重用状态逻辑等，并且还能够捕获组件中的副作用。

常见的React Hooks:

  • useState: 允许你在函数组件中添加state。
  • useEffect: 用来处理副作用，类似于类组件的componentDidMount、componentDidUpdate和componentWillUnmount生命周期方法的组合。
  • useContext: 允许你访问Context对象，并订阅其变化。
  • useReducer: 为状态更新提供更复杂的逻辑，类似于Redux中的reducer。
  • useCallback: 返回一个记忆化的回调函数。
  • useMemo: 返回一个记忆化的值。
  • useRef: 返回一个可变的ref对象。
  • useLayoutEffect: 其作用与useEffect相似，但它会在所有的DOM更改之后同步触发重渲染。
  • useImperativeHandle: 自定义使用ref时公开给父组件的实例值。
  • useDebugValue: 在React开发者工具中显示自定义的hook标签。

实现原理:

Hooks的工作原理基于JavaScript的闭包机制。当你在函数组件中调用Hooks时，React内部会维护一个状态数组，每次渲染时，Hooks都会按顺序读取和更新这个数组中的状态。因此，每个Hook都必须在组件的顶层调用，这样React才能够正确地关联Hook和对应的状态。

以下是Hooks的一些关键实现原理:

  1. 状态存储: React为每个组件实例维护一个状态数组。当你使用useState或useReducer时，它会在此数组中为每个state分配一个位置。

  2. 更新调度: 当你更新一个state，React会标记组件为dirty并安排一次重新渲染。在下一次组件渲染时，useState和useEffect等Hooks将会使用最新的state和props。

  3. 闭包: Hooks依赖闭包来捕获每一次渲染时的props和state，这也是每次更新可以获取到正确state的原因。

  4. Hook的规则: React要求Hooks必须在函数的最顶层调用，不能在循环、条件或嵌套函数中调用。这是因为React根据Hooks的调用顺序来存储和检索状态。

  5. 调试: React提供了useDebugValue来在React开发者工具中显示自定义Hook的内部状态，使得调试更加方便。

  6. 组件生命周期: useEffect和useLayoutEffect Hooks使得你能够在函数组件中执行副作用，并且可以通过返回一个清理函数来执行清理操作，类似于类组件中的componentWillUnmount。

Hooks的这种设计允许你以一种更函数式的方式来编写组件，同时使得状态逻辑更容易被分割和重用。Hooks的实现是React团队在框架内部进行了大量的工作，但开发者可以通过上述Hooks以一种简单直观的方式来利用它们的能力。

二 为什么 useState 要使用数组而不是对象

useState 是 React 提供的一个 Hook，使得开发者可以在函数组件中存储和管理状态。使用 useState，你会得到一对值：当前状态和一个更新它的函数。这个 Hook 使用数组结构的主要原因包括：

1. 返回值命名自由

当你使用数组结构时，你可以自由地给状态和更新函数命名，而不是被迫使用对象的键。这提供了更大的灵活性和简洁性。

const [value, setValue] = useState(initialValue);

在这个例子中，value 和 setValue 可以根据你的选择自由命名，例如：

const [count, setCount] = useState(0);

2. 减少嵌套和避免合并状态

如果 useState 返回的是一个对象，你可能需要合并现有状态和新状态，这样更新状态时就更容易出错。数组结构的 useState 鼓励你将状态分割成尽可能多的独立的状态变量，减少了状态更新时的复杂性。

如果是对象，更新状态可能需要这样：

this.setState(prevState => {return { ...prevState, key: newValue };
});

而用 useState，更新状态只需这样：

setValue(newValue);

3. 保持API的简洁和一致性

返回数组意味着 useState 总是返回两个值：当前的状态值和一个函数，用于更新状态。这种一致性无论何时使用 useState 都是不变的，因此易于理解和预测。

4. 保持与React Class组件的setState的行为不同

setState 在类组件中通常是合并状态，而 useState 鼓励你使用多个状态钩子来独立地管理不同的状态变量，这使得状态逻辑更清晰。

5. Hook的设计灵感源自函数式编程

函数式编程中经常会用到元组（Tuple），它是编程中一种将多个值组合成一个紧凑形式的方式。React的Hooks API设计者显然受到了函数式编程中使用元组的启发。

总结

使用数组而不是对象返回 useState 的值，使得状态钩子的使用更加灵活、简单和直观。它鼓励将状态分解为较小的、独立的片段，这有助于组件的维护和避免不必要的复杂性。同时，它也与React的函数式编程哲学保持一致。

三 React Hooks解决了哪些问题

React Hooks 的引入是为了解决 React 开发中的一系列问题和挑战，这些问题主要集中在类组件的使用和函数组件的限制方面。下面是 React Hooks 解决的一些主要问题：

1. 复用状态逻辑的难题

在 Hooks 出现之前，复用组件之间的状态逻辑通常需要依靠高阶组件（HOCs）或渲染道具（Render Props）模式。这些模式虽然功能强大，但容易使组件树变得复杂和深层，难以理解和维护。通过自定义 Hooks，开发者可以更容易地在组件之间共享状态逻辑，而不需要修改组件结构。

2. 复杂组件变得难以理解

类组件中，相关逻辑往往分散在不同的生命周期方法中，这使得跟踪组件的行为变得困难。Hooks 允许将相关代码组织在一起，无论它们是用于数据获取、订阅、还是其他副作用，都可以在一个 useEffect 内部管理，这样使得逻辑更加集中和清晰。

3. 难以理解的 this 关键字

在类组件中，this 关键字的行为经常让人困惑，尤其是在事件处理器和回调函数中。函数组件加上 Hooks 使得你可以避免使用 this，从而让代码更容易编写和理解。

4. 逐渐消失的组件生命周期

随着 React 的发展，一些生命周期方法已经被弃用，并且新的异步渲染模式使得一些生命周期方法的行为变得不可预测。Hooks 提供了一种更加直接和清晰的方式来处理副作用（例如，useEffect），不再依赖于生命周期方法。

5. 函数组件的局限性

在 Hooks 出现之前，函数组件被认为是无状态组件，仅适用于简单的展示逻辑。对于需要状态管理、生命周期方法或性能优化的场合，开发者不得不使用类组件。Hooks 的引入使得函数组件拥有了类组件的几乎所有能力，同时保持了更简洁的语法和更好的可读性。

6. 大型组件重构难题

在使用类组件开发大型应用时，重构或拆分复杂组件往往非常困难。Hooks 允许开发者以更小、更可管理的单元组织代码，使得重构和测试变得更加容易。

通过解决这些问题，React Hooks 提升了 React 开发的体验，使代码更加清晰简洁，提高了开发效率和应用性能。

四 React Hook 的使用限制有哪些

React Hooks 是强大的，但使用它们时需要遵守一些重要的规则和限制。这些规则确保了 Hooks 的正确使用和组件的正确行为。以下是使用 React Hooks 时的主要限制和规则：

只能在函数组件的顶层调用 Hooks

Hooks 必须在函数组件的最顶层调用，不能在循环、条件语句或嵌套函数中调用。这是因为 React 依赖于 Hooks 调用的顺序，如果在这些JavaScript结构中使用Hooks，那么Hooks的调用顺序就会变得不确定。

只能在 React 函数组件或自定义 Hooks 中调用 Hooks

不能在普通的 JavaScript 函数中调用 Hooks。Hooks 是特定于 React 的，它们依靠 React 的上下文来正确工作。如果你想在多个组件之间重用有状态逻辑，可以把它放到自定义 Hook 中。

不要在循环、条件或嵌套函数中调用 Hooks

如前所述，Hooks 应该总是在组件的最顶层调用，以确保每次组件渲染时 Hooks 的调用顺序保持一致。条件语句、循环或嵌套函数可能会使得Hooks的调用次序发生变化，从而破坏其内部状态的管理。

为 Hooks 提供正确的依赖项

对于 useEffect、useMemo、useCallback 这类需要依赖数组的 Hooks，确保你已经正确地指定了依赖项。遗漏依赖项或者提供错误的依赖项都可能导致不可预测的行为。

避免在常规函数中调用 Hooks

如果你在常规的 JavaScript 函数中调用 Hooks（这里指的不是函数组件或自定义 Hooks），就会打破规则。Hooks 应该只在函数组件或者自定义 Hooks 中使用。

使用 ESLint 插件来强制执行这些规则

React 团队提供了一个 ESLint 插件 (eslint-plugin-react-hooks)，它能帮助开发人员识别违反上述规则的代码。这个插件能够在开发过程中检测违反 Hooks 规则的情况，以减少错误。

理解 Hooks 的闭包行为

Hooks 如 useEffect 会捕获定义时的状态和道具。如果你不小心，可能会在异步操作中引用过时的状态或道具，导致难以发现的错误。因此，使用更新函数形式的 useState 和正确的依赖项列表十分重要。

遵守以上规则，可以保证你的 Hooks 正确地工作，并且你编写的函数组件行为符合预期。

五 useEffect 与 useLayoutEffect 的区别

useEffect 和 useLayoutEffect 都是 React 的内置 Hooks，它们的作用是让你在函数组件中执行副作用操作。尽管它们的用途相似，但是它们在何时执行副作用方面存在一些关键的区别：

useEffect

  • useEffect 在组件渲染到屏幕之后异步执行副作用。
  • 通常情况下，推荐使用 useEffect 来执行副作用，因为它不会阻塞浏览器更新屏幕，这可以让用户感觉到响应更快。
  • 常用于数据获取、订阅、或者直接操作 DOM 等场景。

useLayoutEffect

  • useLayoutEffect 的调用时机与 componentDidMount 和 componentDidUpdate 生命周期方法更为一致，它在 DOM 更新完毕后立即同步执行副作用，但在浏览器进行任何绘制之前。
  • useLayoutEffect 通常用于需要同步更新 DOM 或者需要在浏览器绘制之前进行 DOM 操作来避免闪烁的情况。
  • 因为 useLayoutEffect 会在所有的 DOM 变更之后同步执行，如果你的副作用函数执行较慢，它可能会导致帧率下降。

总结来说，如果你的副作用是跟 DOM 操作或者布局计算有关，且需要同步执行的（比如阅读布局并同步重新渲染的情况），那么使用 useLayoutEffect。否则，推荐使用 useEffect。

六 React Hooks在平时开发中需要注意的问题和原因

在使用 React Hooks 进行开发时，需要注意一系列问题，以确保代码的健壯性、性能和可维护性。以下是一些在日常开发中应该注意的关键点及其原因：

1. 遵守规则

  • 不要在循环、条件语句或嵌套函数中调用 Hooks：这可能会导致 Hooks 的调用顺序发生变化，从而破坏 React 内部的状态管理。
  • 只在函数组件或自定义 Hooks 中使用 Hooks：保持 Hooks 的使用环境一致性，避免在非 React 函数中产生不可预期的行为。

2. 依赖列表的正确使用

  • 在useEffect、useMemo和useCallback中正确管理依赖列表：省略依赖或错误地添加依赖可能会导致无限循环、过度渲染或陈旧闭包问题。
  • 避免频繁变化的对象或函数作为依赖：这可能会导致不必要的副作用或计算被频繁触发。使用useMemo和useCallback来优化这些依赖。

3. 性能优化

  • 使用React.memo、useMemo和useCallback来避免不必要的渲染：但要注意过度优化。合理使用这些工具来优化真正需要优化的场景。
  • 谨慎使用大型对象或复杂计算作为依赖：考虑将状态拆分或使用useReducer来管理复杂的组件状态。

4. 清理副作用

  • 在useEffect中返回清理函数：这对于取消订阅、清除定时器等是必要的，以避免内存泄漏和其他副作用。

5. 自定义 Hooks 的正确使用

  • 合理封装和复用逻辑：通过自定义 Hooks 封装共享逻辑，但要保持其独立性和复用性，避免创建过于具体或耦合的自定义 Hooks。

6. 理解闭包陷阱

  • 在使用函数式更新和延迟执行逻辑时注意闭包陷阱：特别是在useEffect中访问的状态和属性，可能会捕获到旧的闭包值。使用函数式更新或者将依赖列入依赖列表来解决。

7. 状态逻辑的分割

  • 避免在一个组件中使用过多的状态和副作用：考虑将逻辑分割到不同的组件或自定义 Hooks 中，以保持组件的清晰和可管理性。

遵循以上准则，可以帮助你更高效和安全地利用 React Hooks 构建应用，避免常见的陷阱和性能问题。

七 React Hooks 和生命周期的关系

React Hooks 的引入在 React 开发中标志着一个重要的转折点。在 Hooks 出现之前，React 组件的状态管理和副作用处理主要依赖于类组件和其生命周期方法。Hooks 的出现使得在无需编写类组件的情况下，也能使用状态管理和副作用等特性，极大地增强了函数组件的能力。这里，我们将探讨 React Hooks 和生命周期方法之间的关系：

生命周期方法

在类组件中，生命周期方法用于在组件不同阶段执行代码。常用的生命周期方法包括：

  • componentDidMount：组件挂载（插入 DOM 树）后执行
  • componentDidUpdate：组件更新后执行
  • componentWillUnmount：组件卸载（从 DOM 树移除）前执行
  • shouldComponentUpdate、getDerivedStateFromProps、getSnapshotBeforeUpdate 等用于特定的优化和操作

React Hooks 与生命周期的对应

React Hooks 使函数组件能够使用某些与类组件生命周期方法相对应的功能：

  • useState：提供状态管理，相当于类组件的 this.state 和 this.setState。
  • useEffect：
    • 可以看作是 componentDidMount、componentDidUpdate 和 componentWillUnmount 的结合。通过在函数组件中调用 useEffect，可以在组件渲染到屏幕后执行副作用操作，也可以通过返回一个清理函数来执行类似 componentWillUnmount 的逻辑。
    • 对于需要精确控制副作用执行时机的场景，useEffect 的第二个参数（依赖数组）提供了这种灵活性，允许组件仅对特定状态的改变作出响应。
  • useLayoutEffect：
    • 与 useEffect 类似，但它在 DOM 更新完成后同步执行副作用，这在处理 DOM 布局和样式时特别有用，因为它避免了可能的闪烁问题，相当于 componentDidMount 和 componentDidUpdate 的同步版。
  • useMemo 和 useCallback：
    • 这两个 Hook 能够帮助你在组件重新渲染时优化性能，它们通过记住计算结果或函数，避免不必要的重新计算或创建，可以在某种程度上与 shouldComponentUpdate 或 React.memo 进行对比。

通过这些 Hooks，React 不仅简化了状态管理和副作用的处理，也使得在不编写类组件的情况下实现复杂组件成为可能。这种转变促进了函数式编程在 React 开发中的应用，提高了代码的模块化和重用性。

这篇关于（React Hooks）前端八股文修炼Day9的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/884633。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者：计算机编程-吉哥 🍊简介：专业从事JavaWeb程序开发，微信小程序开发，定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事，生活就是快乐的。 🍊心愿：点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能
阅读更多...
Vue3项目开发——新闻发布管理系统（六）

Vue3项目开发——新闻发布管理系统（六）

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后，系统就进入了首页。接下来，也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分，左侧为系统的菜单栏，右侧
阅读更多...
【VUE】跨域问题的概念，以及解决方法。

【VUE】跨域问题的概念，以及解决方法。

目录 1.跨域概念 2.解决方法 2.1 配置网络请求代理 2.2 使用@CrossOrigin 注解 2.3 通过配置文件实现跨域 2.4 添加 CorsWebFilter 来解决跨域问题 1.跨域概念 跨域问题是由于浏览器实施了同源策略，该策略要求请求的域名、协议和端口必须与提供资源的服务相同。如果不相同，则需要服务器显式地允许这种跨域请求。一般在springbo
阅读更多...
HTML提交表单给python

HTML提交表单给python

python 代码 from flask import Flask, request, render_template, redirect, url_forapp = Flask(__name__)@app.route('/')def form():# 渲染表单页面return render_template('./index.html')@app.route('/submit_form',
阅读更多...
Java 后端接口入参 - 联合前端VUE 使用AES完成入参出参加密解密

Java 后端接口入参 - 联合前端VUE 使用AES完成入参出参加密解密

加密效果： 解密后的数据就是正常数据： 后端：使用的是spring-cloud框架，在gateway模块进行操作 <dependency><groupId>com.google.guava</groupId><artifactId>guava</artifactId><version>30.0-jre</version></dependency> 编写一个AES加密
阅读更多...
vue2 组件通信

vue2 组件通信

props + emits props:用于接收父组件传递给子组件的数据。可以定义期望从父组件接收的数据结构和类型。‘子组件不可更改该数据’emits:用于定义组件可以向父组件发出的事件。这允许父组件监听子组件的事件并作出响应。(比如数据更新) props检查属性 属性名类型描述默认值typeFunction指定 prop 应该是什么类型，如 String, Number, Boolean,
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2