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 会被重新赋值。

目录
相关文章
|
1月前
|
前端开发 JavaScript
React Hooks 全面解析
【10月更文挑战第11天】React Hooks 是 React 16.8 引入的新特性,允许在函数组件中使用状态和其他 React 特性,简化了状态管理和生命周期管理。本文从基础概念入手,详细介绍了 `useState` 和 `useEffect` 的用法,探讨了常见问题和易错点,并提供了代码示例。通过学习本文,你将更好地理解和使用 Hooks,提升开发效率。
68 4
|
10天前
|
前端开发 JavaScript
深入探索React Hooks:从useState到useEffect
深入探索React Hooks:从useState到useEffect
|
20天前
|
前端开发 JavaScript 开发者
“揭秘React Hooks的神秘面纱:如何掌握这些改变游戏规则的超能力以打造无敌前端应用”
【10月更文挑战第25天】React Hooks 自 2018 年推出以来,已成为 React 功能组件的重要组成部分。本文全面解析了 React Hooks 的核心概念,包括 `useState` 和 `useEffect` 的使用方法,并提供了最佳实践,如避免过度使用 Hooks、保持 Hooks 调用顺序一致、使用 `useReducer` 管理复杂状态逻辑、自定义 Hooks 封装复用逻辑等,帮助开发者更高效地使用 Hooks,构建健壮且易于维护的 React 应用。
28 2
|
25天前
|
前端开发 开发者
React 提供的其他重要 Hooks
【10月更文挑战第20天】React 提供了一系列强大的 Hooks,除了 `useRef` 之外,还有许多其他重要的 Hooks,它们共同构成了函数式组件开发的基础。
35 6
|
1月前
|
前端开发 JavaScript 开发者
React Hooks
10月更文挑战第13天
34 1
|
1月前
|
前端开发 JavaScript 开发者
深入理解React Hooks:提升前端开发效率的关键
【10月更文挑战第5天】深入理解React Hooks:提升前端开发效率的关键
|
14天前
|
前端开发 JavaScript 开发者
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
45 9
|
1月前
|
前端开发
深入解析React Hooks:构建高效且可维护的前端应用
本文将带你走进React Hooks的世界,探索这一革新特性如何改变我们构建React组件的方式。通过分析Hooks的核心概念、使用方法和最佳实践,文章旨在帮助你充分利用Hooks来提高开发效率,编写更简洁、更可维护的前端代码。我们将通过实际代码示例,深入了解useState、useEffect等常用Hooks的内部工作原理,并探讨如何自定义Hooks以复用逻辑。
|
1月前
|
前端开发 JavaScript API
探索React Hooks:前端开发的革命性工具
【10月更文挑战第5天】探索React Hooks:前端开发的革命性工具
|
1月前
|
前端开发 数据管理 编译器
引领前端未来:React 19的重大更新与实战指南🚀
React 19 即将发布,带来一系列革命性的新功能,旨在简化开发过程并显著提升性能。本文介绍了 React 19 的核心功能,如自动优化重新渲染的 React 编译器、加速初始加载的服务器组件、简化表单处理的 Actions、无缝集成的 Web 组件,以及文档元数据的直接管理。这些新功能通过自动化、优化和增强用户体验,帮助开发者构建更高效的 Web 应用程序。
101 1
引领前端未来:React 19的重大更新与实战指南🚀