React中函数式Hooks之useMemo的使用

简介: React的`useMemo` Hook 用于优化性能,通过记忆返回值避免重复计算。它接收一个函数和一个依赖数组,只有当依赖项改变时,才会重新计算被记忆的值。这可以用于避免在每次渲染时都进行昂贵的计算,或者防止子组件不必要的重新渲染。例如,可以在父组件中使用`useMemo`包裹子组件,以依赖特定的props,从而控制子组件的渲染。

首先看一下原始代码:
我们写了三个组件,跟组件,和组件A、组件B;
他们的嵌套关系是跟组件中两个兄弟组件A和B;


import './App.css';
import React from 'react'
function App() {
   
  let [nameA, setNameA] = React.useState('zjqA')
  let [nameB, setNameB] = React.useState('zjqB')
  const changeNameFunA = () => {
   
    setNameA("AAAA")
  }
  const changeNameFunB = () => {
   
    setNameB("BBBB")
  }

  return (
    <div>

      <A name={
   nameA} />
      <B name={
   nameB} />
      <button onClick={
   changeNameFunA}>点击改变nameA</button>
      <button onClick={
   changeNameFunB}>点击改变nameB</button>
    </div>
  );
}

const A = ({
    name }) => {
   
  console.log("A组件重新渲染")
  return (
    <>
      <h1>我是A组件:{
   name}</h1>
    </>
  )
}
const B = ({
    name }) => {
   
  console.log("B组件重新渲染")
  return (
    <>
      <h1>我是B组件:{
   name}</h1>
    </>
  )
}

export default App;

页面样式:
在这里插入图片描述

页面首次加载的时候渲染组件A和组件B的时候会执行A和B组件中的打印语句:
在这里插入图片描述
当我们点击第一个按钮"点击改变nameA",我们会发现控制台同时执行了A、B组件中的打印。因为父组件渲染,导致所有子组件都随之重新渲染。

这个其实我们在类组件中可以很好的解决:
1.shouldComponentUpdate这个钩子做判断返回true或者false
2.ComponentPure 使用纯组件

在hooks中我们使用useMemo:

useMemo用法

import './App.css';
import React from 'react'
function App() {
   
  let [nameA, setNameA] = React.useState('zjqA')
  let [nameB, setNameB] = React.useState('zjqB')
  const changeNameFunA = () => {
   
    setNameA("AAAA")
  }
  const changeNameFunB = () => {
   
    setNameB("BBBB")
  }
  const comA = React.useMemo(() => <A name={
   nameA} />, [nameA])
  const comB = React.useMemo(() => <B name={
   nameB} />, [nameB])
  return (
    <div>
      {
   comA}
      {
   comB}
      <button onClick={
   changeNameFunA}>点击改变nameA</button>
      <button onClick={
   changeNameFunB}>点击改变nameB</button>
    </div>
  );
}

const A = ({
    name }) => {
   
  console.log("A组件重新渲染")
  return (
    <>
      <h1>我是A组件:{
   name}</h1>
    </>
  )
}
const B = ({
    name }) => {
   
  console.log("B组件重新渲染")
  return (
    <>
      <h1>我是B组件:{
   name}</h1>
    </>
  )
}

export default App;

useMemo不仅仅可以用来优化子组件渲染,

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

返回一个memoized值。 传递“创建”函数和依赖项数组。useMemo只会在其中一个依赖项发生更改时重新计算memoized值。此优化有助于避免在每个渲染上进行昂贵的计算。
可以堪称一个依赖项,a,b发生改变memoizedValue 才被重新赋值,有种缓存的感觉。

例子:

import './App.css';
import React from 'react'
function App() {
   
  let [name, setName] = React.useState('zjq')

  const changeNameFunA = () => {
   
    setName("AAAA")
  }
  const XHnameMemo = React.useMemo(()=>name+'小红',[name])

  return (
    <div>
      <h1>我的名字是:{
   name}</h1>
      <button onClick={
   changeNameFunA}>点击改变name</button>
      <h1>小红的名字是:{
   XHnameMemo}</h1>
    </div>
  );
}
export default App;

点击按钮的时候name、XHnameMemo都被重新赋值,原因是XHnameMemo依赖于name的值,所有有一种监听且依赖的效果,一旦name值发生改变XHnameMemo 会被重新赋值。

目录
相关文章
|
13天前
|
前端开发 JavaScript
React Hooks 全面解析
【10月更文挑战第11天】React Hooks 是 React 16.8 引入的新特性,允许在函数组件中使用状态和其他 React 特性,简化了状态管理和生命周期管理。本文从基础概念入手,详细介绍了 `useState` 和 `useEffect` 的用法,探讨了常见问题和易错点,并提供了代码示例。通过学习本文,你将更好地理解和使用 Hooks,提升开发效率。
43 4
|
15天前
|
前端开发
深入解析React Hooks:构建高效且可维护的前端应用
本文将带你走进React Hooks的世界,探索这一革新特性如何改变我们构建React组件的方式。通过分析Hooks的核心概念、使用方法和最佳实践,文章旨在帮助你充分利用Hooks来提高开发效率,编写更简洁、更可维护的前端代码。我们将通过实际代码示例,深入了解useState、useEffect等常用Hooks的内部工作原理,并探讨如何自定义Hooks以复用逻辑。
|
5天前
|
前端开发 开发者
React 提供的其他重要 Hooks
【10月更文挑战第20天】React 提供了一系列强大的 Hooks,除了 `useRef` 之外,还有许多其他重要的 Hooks,它们共同构成了函数式组件开发的基础。
18 6
|
13天前
|
前端开发 JavaScript 开发者
React Hooks
10月更文挑战第13天
29 1
|
18天前
|
前端开发 JavaScript API
自定义React Hooks综合指南
本文介绍了React Hooks及其在组件开发中的作用,重点讲解了自定义Hook的创建和使用方法。通过实例展示了如何创建`useWindowWidth`、`useFetch`和`useForm`等自定义Hook,并分享了使用自定义Hook的最佳实践。文章强调了自定义Hook在提高代码复用性和组件可维护性方面的重要性。
31 0
|
20天前
|
前端开发 JavaScript 开发者
深入理解React Hooks:提升前端开发效率的关键
【10月更文挑战第5天】深入理解React Hooks:提升前端开发效率的关键
|
20天前
|
前端开发 JavaScript API
探索React Hooks:前端开发的革命性工具
【10月更文挑战第5天】探索React Hooks:前端开发的革命性工具
|
14天前
|
前端开发 数据管理 编译器
引领前端未来:React 19的重大更新与实战指南🚀
React 19 即将发布,带来一系列革命性的新功能,旨在简化开发过程并显著提升性能。本文介绍了 React 19 的核心功能,如自动优化重新渲染的 React 编译器、加速初始加载的服务器组件、简化表单处理的 Actions、无缝集成的 Web 组件,以及文档元数据的直接管理。这些新功能通过自动化、优化和增强用户体验,帮助开发者构建更高效的 Web 应用程序。
45 1
引领前端未来:React 19的重大更新与实战指南🚀
|
6天前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
|
16天前
|
前端开发 JavaScript 开发者
探索现代Web前端技术:React框架入门
【10月更文挑战第9天】 探索现代Web前端技术:React框架入门