memo useMemo useCallback

这些并不是必要的hook/组件,但有性能问题可以尝试使用

举个例子:

有两个组件,App是父组件,A是子组件。App里有一个按钮点击它会进行setState,所以App会被重新渲染,如果父组件重新渲染,子组件会不会也重新渲染

js 复制代码
//App.jsx
import { useState, useEffect } from "react";
import A from "./A.jsx";
export default function App() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    console.log("父组件渲染");
  });
  function click() {
    setCount(count + 1);
  }
  return (
    <div className="App">
      <button onClick={click}>按钮</button>
      <A></A>
    </div>
  );
}
js 复制代码
//A.js
import React from "react";
import { useState, useEffect, useMemo, memo } from "react";
const A = () => {
  useEffect(() => {
    console.log("子组件渲染");
  });
  return <>123</>;
};
export default A;

点击按钮,可以看到父组件重新渲染,子组件也会重新渲染

但是如果子组件不需要重新渲染,这样就会影响性能了

memo

它是一个高阶组件,只需要用它包裹上面的子组件,就不会重新渲染了

js 复制代码
const A = memo(() => {
  useEffect(() => {
    console.log("子组件渲染");
  });
  return <>123</>;
});

memo 的作用就是只有 props 变的时候,才会重新渲染被包裹的组件

usecallback

然而如果给子组件传入一个函数

js 复制代码
 <A fn={fn}></A>

memo高阶组件失效了,因为每次 function 都是新创建的,也就是每次 props 都会变,这样 memo 就没用了。

这个时候就需要useCallback,它的第二个参数就是依赖项,不改变就不会创建新的函数

js 复制代码
  const fn = useCallback(() => {}, []);

现在memo就有作用了

useMemo

与vue的计算属性类似,使用方法类似于useCallback

当然也可以缓存组件,类似于memo高阶组件,甚至也可以缓存函数,但缓存函数一般用useCallback

js 复制代码
// useMemo 第一个参数是一个函数,第二个参数是依赖数组 
const sum = useMemo(() => { 
console.log('Calculating sum...'); 
return a + b; }, [a, b]); // a 和 b 是依赖项,只有它们发生变化时,才会重新计算 sum

但是如果没有明显性能问题,不需要使用它们,因为缓存本身就需要消耗性能,可读性也会变差,可能会得不偿失。

相关推荐
昔人'6 分钟前
css`text-wrap:pretty`
前端·css
勇敢di牛牛12 分钟前
Vue+mockjs+Axios 案例实践
前端·javascript·vue.js
詩句☾⋆᭄南笙22 分钟前
HTML列表、表格和表单
服务器·前端·html·表格·列表·表单
IT_陈寒34 分钟前
Python性能翻倍的5个冷门技巧:从GIL逃逸到内存视图的实战优化指南
前端·人工智能·后端
南城巷陌39 分钟前
错误边界:用componentDidCatch筑起React崩溃防火墙
前端·react.js·前端框架
FinClip44 分钟前
OpenAI推出Apps SDK,你的企业App跟上了吗?
前端·app·openai
馨谙1 小时前
Linux中的管道与重定向:深入理解两者的本质区别
前端·chrome
夏天想1 小时前
复制了一个vue的项目然后再这个基础上修改。可是通过npm run dev运行之前的老项目,发现运行的竟然是拷贝后的项目。为什么会这样?
前端·vue.js·npm
@大迁世界1 小时前
这个 CSS 特性,可能终结样式冲突
前端·css
zzzsde1 小时前
【C++】深入理解string类(5)
java·前端·算法