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

我将react 16.12.0与功能组件和typescript 3.7.2一起使用

问题： 每当组件a中的变量发生更改时，我的子组件B都会重新呈现，尽管这些变量不会传递给子组件TB。我只是将一个函数从组件a传递到组件B

我有两个组件（组件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
}

组件A：
const[value，setValue]=React.useState（1）；
函数计时器（）：void{
//运行全部8秒
设置值（值=>值+1）；
}
函数doSomethingComponentA（）：void{
//一些逻辑，比如向服务器发送一些数据
//或者更改值
}

现在，子组件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;

界面道具{
dosomethingincomponent a：函数；
}
常量组件B:React.FC=（道具）=>{
useffect（（）=>{
//每当计时器更改组件中的值时，将触发useEffect。
log（“有什么改变了吗？”；
});
函数doSomething（）：void{
props.dosomethingincomponent a（）；
}
返回(
//错误-每当计时器更改值时，此组件都将重新渲染
按钮onClick=doSomething（）单击我；
);
};
导出默认组件B；

现在，当计时器函数更改变量值时，子组件TB中会触发重新排序，尽管只有函数

doSomethingComponentA

会传递给子组件

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

为什么会有这种行为？据我所知，只有当变量值传递给subcomponentB时才会触发重新渲染。函数永远不会更改，它是一个函数，而不是一个变量

---

希望我能正确解释。

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

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

函数永远不会改变，它是一个函数，而不是一个变量

---

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

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

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

函数永远不会改变，它是一个函数，而不是一个变量

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