归来巨星 2023-02-16 09:32 采纳率: 80%
浏览 28
已结题

react 我在子组件里怎么写避免子组件不被父组件传递的props属性变更影响?导致组件重载

我在react中使用 setValue,变更了 value 值,value是父传子->props数据,但是此时导致了子组件的 useEffect(()=>{},[]) 进行了触发。我在子组件里怎么写避免子组件不更新?

父组件

img

子组件

img

img

  • 写回答

2条回答 默认 最新

  • 菜鸟才能学的更多 2023-02-16 09:40
    关注

    在 React 中,当 props 发生变化时,会触发组件的重新渲染。在父组件中,如果通过 props 将数据传递给子组件,当父组件的状态变化时,子组件也会随之重新渲染。

    如果你想要避免在子组件中触发 useEffect 钩子函数的更新操作,可以采用以下两种方式:

    1. 在子组件中使用 React.memo() 函数进行优化
      可以在子组件中使用 React.memo() 函数对组件进行浅比较的优化,当传入的 props 值没有变化时,就不会触发 useEffect 钩子函数的更新操作。

    示例代码如下:

    import React, { useEffect } from 'react';
    
    function ChildComponent(props) {
      useEffect(() => {
        // ...
      }, [props.value]);
    
      return (
        // ...
      );
    }
    
    export default React.memo(ChildComponent);
    

    在这个示例代码中,当 props.value 发生变化时,会触发子组件的重新渲染,然后再触发 useEffect 钩子函数的更新操作。

    1. 在父组件中使用 useCallback 对传递给子组件的函数进行优化
      可以在父组件中使用 useCallback 钩子函数对传递给子组件的函数进行优化,这样当父组件状态变化时,不会重新创建一个新的函数,从而避免了子组件的更新操作。

    示例代码如下:

    import React, { useState, useCallback } from 'react';
    import ChildComponent from './ChildComponent';
    
    function ParentComponent() {
      const [value, setValue] = useState('');
    
      const handleValueChange = useCallback((newValue) => {
        setValue(newValue);
      }, []);
    
      return (
        <ChildComponent value={value} onValueChange={handleValueChange} />
      );
    }
    
    export default ParentComponent;
    

    在这个示例代码中,handleValueChange 函数通过 useCallback 钩子函数进行了优化,这样当父组件状态变化时,不会重新创建一个新的函数,从而避免了子组件的更新操作。同时,当 value 发生变化时,也会触发子组件的重新渲染,然后再触发 useEffect 钩子函数的更新操作。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 3月3日
  • 已采纳回答 2月23日
  • 创建了问题 2月16日

悬赏问题

  • ¥15 流式socket文件传输答疑
  • ¥20 keepalive配置业务服务双机单活的方法。业务服务一定是要双机单活的方式
  • ¥50 关于多次提交POST数据后,无法获取到POST数据参数的问题
  • ¥15 win10,这种情况怎么办
  • ¥15 如何在配置使用Prettier的VSCode中通过Better Align插件来对齐等式?(相关搜索:格式化)
  • ¥100 在连接内网VPN时,如何同时保持互联网连接
  • ¥15 MATLAB中使用parfor,矩阵Removal的有效索引在parfor循环中受限制
  • ¥20 Win 10 LTSC 1809版本如何无损提升到20H1版本
  • ¥50 win10 LTSC 虚拟键盘不弹出
  • ¥15 寻找能匹配的液晶显示屏。