Question

我正在使用带有功能组件和打字稿3.7.2的react 16.12.0。

问题：每次在组件A中更改变量时，我的子组件B都会重新渲染，尽管这些变量不会传递给子组件B。我只是将一个函数从componentA传递给componentB。

我有两个组件（组件A和组件B）。组件A是组件B的父级。组件A拥有一个变量和一个函数。该功能已交付给组件B，但不。在组件A中，还有一个计时器正在运行，以X秒为单位更改变量“值”。

Component A:
const [value, setValue] = React.useState<number>(1);
function timer(): void {
    //Running all 8 seconds
    setValue(value => value + 1);
}

function doSomethingInComponentA(): void {
    //some logic, like send some data to the server
    //or change the value
}

现在，子组件B：

interface Props {
    doSomethingInComponentA: Function;
}

const ComponentB: React.FC<Props> = (props) => {


    useEffect(() => {
        //every time when the timer changes the value in component A useEffect will be fired.
        console.log("Has something changed?);
    });

    function doSomething(): void {
        props.doSomethingInComponentA();
    }

    return (
        <>
            //ERROR - THIS COMPONENT WILL BE RE-RENDERER EVERY TIME WHEN THE TIMER IS CHANGING THE VALUE
            Button onClick=doSomething() CLICK ME;
        </>
    );
};

export default ComponentB;

现在，当计时器功能更改变量值时，尽管仅将功能doSomethingInComponentA传递给子组件，但子组件B中会引发重新渲染。

为什么会有这种行为？据我了解，仅在将变量值传递给subcomponentB时才触发重新渲染。函数从不改变，它是一个函数，而不是变量。

希望我能正确解释。

Answer 1

您的问题非常令人困惑，但是请尝试在传递给子组件的函数中使用useCallback。

const yourFunction = React.useCallback(
  () => {
    // your function body
  },
  [a, b], // only the values that will change and make yourFunction change
);

函数从不改变，它是一个函数，而不是变量

由于父组件是功能组件，因此将在每个父渲染器上重新创建该函数，这将使子组件渲染。

子组件在prop更改时重新渲染，但是prop是一个函数

1 个答案: