如何解决React Rerenderign问题

Question

具有总和函数和总和作为使用效应的依赖性。每当输入更改Console.log（“ sum as as”）打印时。 Console.log（“ sum is is”）即使输入更改也没有依赖性，也不会打印。这是因为当输入更改时，它将分配给组件和总和函数地址，这是为什么它触发使用效应或可能不同的原因。

import "./styles.css";
import { useEffect, useState } from "react";
export default function App() {
  const [num1] = useState(4);
  const [num2] = useState(5);
  const [input, setInput] = useState();
  const sum = () => num1 + num2;
  useEffect(() => {
    console.log("sum is");
  }, [num]);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <input onChange={(e) => setInput(e.target.value)} />
    </div>
  );
}

Answer 1

使用效应是用于制作某种共同调整的React钩子

// 1. No dependency passed:
useEffect(() => {
  //Runs on every render
});
// 2. An empty array:
useEffect(() => {
  //Runs only on the first render
}, []);
// 3. Props or state values:
useEffect(() => {
  //Runs on the first render
  //And any time any dependency value changes
}, [prop, state]);

Answer 2

原因console.log（“ sum is”）在每个渲染上执行是因为sum

：

const f1 = () => 1 + 2;
const f2 = () => 1 + 2;
const isEqaul = f1 === f2;
console.log(isEqual); // output is false

在您的情况下const sum =（）=＆gt; NUM1 + NUM2在每个渲染上都有不同的值重新分配，并且useffect识别sum的值已更改。

要解决问题，您可以：

1. 定义sum为值：cosnt sum = num1 + num1 + num2
2. 使用usecallback用于记忆的挂钩该函数（换句话说，该函数将存储在内存中，因此在每个渲染中都相等）

const sumCallback = useCallback(
  () => num1 + num2,
  [num1, num2],
);

，只要NUM1和NUM2未分配新值，sumcallback将具有相同每次价值