reactjs - 如何在不使用 shouldComponentUpdate 的情况下更好地设计我的 React 项目

Question

我正在尝试构建 1 分钟烛台。
我有一个组件会不断地将一个数字(交易价格)传递给他的子组件。
这个子组件将根据他从父组件获得的新数字不断更新其状态:(高、低、开、关)。 (例如，如果输入的数字大于当前的 this.state.high ，它会将 this.state.high 更新为新的数字)每分钟后一个 setInterval函数它将获取状态并构建蜡烛并将其传递给自己的 child 。
国家是:high, low, open, close, newCandle我通过使用它来工作

shouldComponentUpdate(nextProps:props, nextState:state){
        
        if(this.props !== nextProps)
          this.updateStates(nextProps.newTradePrice); //will update the high, low, open, close state 
        if(JSON.stringify(nextState.nextMinuteCandle) !== JSON.stringify(this.state.nextMinuteCandle)  ) //once the one minute interval is up, there will be a function that will auto set the newCandle state to a new Candle base on the current high, low, open, close state
          return true;
        return false;
}

我在文档中看到 shouldComponentUpdate应该只用于优化而不是防止重新渲染。我正在使用它来防止重新渲染和无限循环。
我已经被困在这个问题上好几天了，我想不出更好的设计方法。关于如何更好地设计它的任何建议？
第二个相关问题:
其实我是靠 shouldComponentUpdate对于我的几乎所有组件也是如此。这不可能是对的。例如
我有一个 CalculateAverageVolume子组件，它接收 this.state.newCandle .每次 newCandle 改变时更新音量(即每分钟)

constructor(props: props) {
  super(props);
  this.state = {
    [...],
    currentAverage: 0,
    showVolume: true
  };
}

onCloseHandler()
{
    this.setState({showVolume: false});
}

updateAvg(newCandleStick: CandleStick){
   //do caluation and use this.setState to update the this.state.currentAverage
}

shouldComponentUpdate(nextProps:props, nextState:state)
{
    if(JSON.stringify(this.props.candleStick) !== JSON.stringify(nextProps.candleStick) || this.state.showVolume !== nextState.showVolume){
        this.updateAvg(nextProps.candleStick);
        return true;
    }
    return false;
}

render() {
    return (
        <>
        {(this.state.showVolume &&
                <IndicatorCard 
                    cardHeader="Volume"
                    currentInfo={this.state.currentAverage.toString()}
                    onCloseHandler={()=>this.onCloseHandler()}>
                </IndicatorCard>
        )}
        </>
    );
}

}
有人可以教我如何设计或重组吗？这很完美，但似乎不是正确的方法

Answer 1

我会像下面这样简化组件。

import { useMemo, useState, memo, useCallback } from "react";

function Component({ candleStick }) {
  // use props here to calculate average
  const updateAverage = () => 0; // use candleStick props to calculate avg here
  const [showVolume, setShowVolume] = useState();
  // Compute the average from prop when component re-renders
  // I would also add useMemo if `updateAverage` is an expensive function
  // so that when prop remains same and `showVolume` changes we don't need to calculate it again
  const currentAverage = useMemo(updateAverage, [candleStick]);
  const onCloseHandler = useCallback(() => setShowVolume(val => !val), []);

  return showVolume ? (
    <IndicatorCard
      cardHeader="Volume"
      currentInfo={currentAverage}
      onCloseHandler={onCloseHandler}
    />
  ) : null;
}

// If true is returned, component won't re-render. 
// Btw React.memo by default would do shallow comparison
// But if deep comparison function is required, I would use lodash or other utility to do the check instead of JSON.stringify.
const arePropsEqual = (prev, next) =>
  isEqual(prev.candleStick, next.candleStick);

export default memo(Component, arePropsEqual);