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

Question

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

Answer 1

这个问题涉及到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() {    // 渲染组件  }}

2. 使用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);

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