美文网首页
useCallback(2)

useCallback(2)

作者: 未路过 | 来源:发表于2022-11-04 09:04 被阅读0次

子组件是因为memo包裹,所以才当porps发生改变的时候渲染,如果没有memo包裹,无论props该不该变,父组件重新渲染,它都会重新渲染。
我们想让count发生改变的时候,increment还是返回之前的值。
因为count发生改变的时候,它会传进来一个新函数,我们使用的是新函数。

const increment = useCallback(() => {
    setCount(count + 1);
  }, [count]); 

我们想让count发生改变的时候,increment还是返回之前的值。
方法1:将count依赖删除掉,把第二个参数变成空数组。但是会出现闭包陷阱。

const increment = useCallback(() => {
    setCount(count + 1);
  }, []);

方法2:useRef,在组件多次渲染的时候,返回的是同一个值。

import React, { memo, useCallback, useRef, useState } from "react";
import Hello from "./components/Hello";
const HyIncrement = memo((props) => {
  console.log("HYincrment被渲染");
  const { increment } = props;
  const decrement = function () {
    console.log("decrement");
  };
  return (
    <div>
      <button onClick={increment}>increment+1</button>
      <Hello decrement={decrement}></Hello>
    </div>
  );
});

const App = memo(() => {
  const [count, setCount] = useState(0);
  const [randomNum, setRandomNum] = useState(0);
  const countRef = useRef();

  countRef.current = count;
  /* 第一次渲染的时候,创建了coungRef对象,赋值,第二次执行 const countRef = useRef();
的时候,拿到的还是上一次的countRef值,然后这次count变成1了,  countRef.current也就变成1了,countRef不管渲染多少次,它始终是同一个对象。但是伴随每次渲染里面的current值是不断改变的 */
  const increment = useCallback(() => {
    setCount(countRef.current + 1);
  }, []);

  /* 所以第一次foo捕获的时候,不要捕获count,直接捕获countRef */
  return (
    <div>
      <h2>{count}</h2>
      <button onClick={increment}>点我加1</button>
      <hr></hr>
      <HyIncrement increment={increment}></HyIncrement>
      <hr></hr>
      <h2>randomNum:{randomNum}</h2>
      <button onClick={(e) => setRandomNum(Math.random().toFixed(2))}>
        修改message
      </button>
    </div>
  );
});

export default App;

这个样子,无论是修改count还是radomNum,home组件都是不会被渲染的。
大概是

      const testObj = { name: "why", age: 18 };
      function foo() {
        const ref = testObj;
        function bar() {
          console.log(ref.name);
        }
        return bar;
      }

      const fn = foo();
      fn(); //why

      testObj.name = "new name";
      fn(); //new name

相关文章

  • useCallback(2)

    子组件是因为memo包裹,所以才当porps发生改变的时候渲染,如果没有memo包裹,无论props该不该变,父组...

  • 【web前端】useCallback 和 useMemo 的用法

    useCallback 使用useCallback可以避免组件重复渲染,提升性能,以下是一个使用useCallba...

  • useMemo和useCallback

    参考文章:链接 useMemo useCallback

  • useCallback - React源码解析(五)

    本文将讲解useCallback的源码实现。useCallback是也一个非常简单的钩子,其实现比useMemo还...

  • useCallback

    1. 问题引发 子组件onChange调用了父组件的handleOnChange 父组件handleOnChang...

  • useCallback

    简介 1 .优化子组件的渲染次数2 .父组件重新渲染组件的时候,传给子组件的函数类型的props也会重新生成,所以...

  • useCallback

    常见应用场景:当父组件传值或传递函数给子组件时,适合通过useMemo或useCallback将子组件的props...

  • useCallback

    一、前言 对于新手来说,没写过几次死循环的代码都不好意思说自己用过 React Hooks。本文将以useCall...

  • useCallback

    useCallback同前面讲的useMemo、useLayoutEffect一样可以用来提高性能。先来看看官网如...

  • React 性能优化方向

    1.使用 React.memo 缓存 组件 2.使用 useMemo 缓存值 3.使用 useCallback 缓存函数

网友评论

      本文标题:useCallback(2)

      本文链接:https://www.haomeiwen.com/subject/dneytdtx.html