渲染对象道具发送到子组件的问题

Question

问题是：每次单击按钮时，我都会在控制台中看到“按钮渲染”。但我只想看一次 post 问题是：每次单击按钮时，我都会在控制台中看到“Button render”。但是我只想看一次post

import React, { useState, useCallback } from "react";
    import Button from "./Button";
    
    const UseCallback = () => {
      const [count, setCount] = useState(0);
    
      const handleClick = useCallback(() => {
        setCount((prevState) => prevState + 1);
      }, []);
    
      return (
        <div>
          <p>{count}</p>
          <Button
            deneme={{ aaa: "aaa", bbb: "bbb" }}
            handleClick={handleClick}
          ></Button>
        </div>
      );
    };
    
 export default UseCallback;


   
    import React from "react";
    
    const Button = ({ handleClick }) => {
      console.log("Button - rerender");
      return (
        <div>
          <button onClick={handleClick}>Sayacı artır</button>
        </div>
      );
    };
    
    export default React.memo(Button);

Answer 1

假设重新渲染，因为回调在渲染时发生变化，并且您在每次渲染时将新的对象引用传递给按钮。您已经有了 React.memo，但由于每次重新呈现按钮时您都有一个新的对象引用。

尝试在 useMemo 中包装对象以保持相同的引用或在顶部创建一个变量并将其传递到 deneme prop

const UseCallback = () => {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setCount((prevState) => prevState + 1);
  }, []);
  const deneme = useMemo(() => {
    return { aaa: "aaa", bbb: "bbb" };
  }, []);
  return (
    <div>
      <p>{count}</p>
      <Button deneme={deneme} handleClick={handleClick}></Button>
    </div>
  );
};

或

const deneme = {
  aaa: "aaa",
  bbb: "bbb"
};
const UseCallback = () => {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setCount((prevState) => prevState + 1);
  }, []);
  return (
    <div>
      <p>{count}</p>
      <Button handleClick={handleClick}></Button>
    </div>
  );
};

Answer 2

因此，您唯一缺少的就是传递一个 compareFunction，它将告诉 React.Memo 何时重新呈现组件的确切条件。您可以在此处查看您的代码。 https://codesandbox.io/s/romantic-cherry-bv5y0?file=/src/App.js

import "./styles.css";

import React, { useState, useCallback } from "react";

const Button1 = ({ handleClick }) => {
  console.log("Button - rerender");
  return (
    <div>
      <button onClick={handleClick}>Sayacı artır</button>
    </div>
  );
};

const compareFunction = (prevProps, nextProps) => {
  return true; //As props only have a function which we are sure doesn't change.
};

const Button = React.memo(Button1, compareFunction);

const UseCallback = () => {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setCount((prevState) => prevState + 1);
  }, []);

  return (
    <div>
      <p>{count}</p>
      <Button
        deneme={{ aaa: "aaa", bbb: "bbb" }}
        handleClick={handleClick}
      ></Button>
    </div>
  );
};

export default UseCallback;

渲染对象道具发送到子组件的问题

Problem with rendering object prop sent to child component

javascript

reactjs

react-hooks

react-props

usecallback