React中函数式Hooks之useMemo的使用

首先看一下原始代码:
我们写了三个组件,跟组件,和组件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 会被重新赋值。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

六卿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值