问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

在effect中set数据 会导致组件更新了两次 怎么处理？

头像
想名字最麻烦了
    357
    广西桂林市

    我在props中有一个数据data 一秒变一次 当前组件有一个isActive 在isActive为true时 保存它以作为缓存 用useEffect监听props.data再set到useState中 组件会更新两次。。。白费性能 子组件越多就越卡

    Microsoftjavascriptreacttypescript前端
    阅读 664
    avatarAI BotBETA

    这个问题涉及到React的组件更新和性能优化。在React中，当组件的props或state发生变化时，组件会重新渲染，这可能导致性能开销。特别是当组件树较大或更新频繁时，性能问题可能会更加明显。

    针对你的问题，你可以考虑以下两种方法来处理组件更新和性能优化：

    1. 使用React的shouldComponentUpdate生命周期方法或PureComponent组件。这些组件可以实现浅比较（shallow comparison）或深比较（deep comparison）来检测props或state的变化，从而决定是否需要重新渲染。这可以减少不必要的重新渲染，提高性能。

    例如，使用shouldComponentUpdate生命周期方法：

    class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    // 进行浅比较或深比较
    // 如果返回false，则不进行重新渲染
    // 如果返回true，则进行重新渲染
  }

  render() {
    // 渲染组件
  }
}
    1. 使用React的memo函数或React.memo组件。memo函数或memo组件可以对组件进行包装，只有在props或state发生变化时才会重新渲染。这可以避免不必要的重新渲染，提高性能。

    例如，使用memo函数：

    import React, { memo } from 'react';

function MyComponent(props) {
  // 渲染组件
}

export default memo(MyComponent);

    或者使用React.memo组件：

    import React from 'react';
import { memo } from 'react';

class MyComponent extends React.Component {
  render() {
    // 渲染组件
  }
}

export default memo(MyComponent);

    在使用这些优化方法时，需要注意的是，过度的优化可能会对代码的可读性和可维护性产生负面影响。因此，建议在性能关键或大型组件树的情况下使用这些方法，并注意保持代码的可读性和可维护性。

    1 个回答
    得票最新
    头像
    君迹我心
      5.1k41927

      或许可以借助useRef，把组件改为完全受控的形式：

      function Test3({ data, isActive }){
  const storedData = useRef(data);
  storedData.current = useMemo(
    () =>( isActive? data: storedData.current),
    [isActive, data]
  );

  return <>{storedData.current}</>
}
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题
      logo
      Microsoft
      子站问答
      访问
      宣传栏