0

我试图避免这么多子组件重新渲染，但不知道如何优化下面的代码：

我有一个看起来像这样的日历形状的对象：

{
    2019:{
        7:{
            1:{
                avaliable: false
              },
            2:{
                avaliable: true
              }
          }
    }

}

Day 组件（为简洁起见，省略了 setAgenda 逻辑）：

function Day(props) {
    <span style={{ color: props.avaliable ? "blue" : "red" }}>
        {props.day}
    </span>
}

日历组件：

function Calendar() {
    const [agenda, setAgenda] = useState(initialAgenda);

    renderMonth = () => {
        return(
            <>
                <Day day={1}
                     avaliable={agenda["2019"]["7"]["1"].avaliable}
                     memoized={false}
                     setAgenda={setAgenda}
                />
                <Day day={2}
                     avaliable={agenda["2019"]["7"]["2"].avaliable}
                     memoized={false}
                     setAgenda={setAgenda}
                />
           </>
    }

    return(
        <>
            {renderMonth()}
        </>
    )
}

每次我更新avaliable一天的属性时，<Day>日历内的每个渲染都会重新渲染。不仅如此，每当 Calendar 内部状态的任何部分更新时，两者都会<Day>重新渲染。

尝试使用 useMemo，我想出了这个：

const day1 = agenda["2019"]["7"]["1"].avaliable;
const memoDay1 = useMemo(
    () => (
      <Day day={1} avaliable={day1} memoized={true} setAgenda={setAgenda}/>
    ),
    [day1]
);

所以更新后的 Calendar 组件如下所示：

function Calendar() {
    const [agenda, setAgenda] = useState(initialAgenda);

    const day1 = agenda["2019"]["7"]["1"].avaliable;
    const memoizedDay1 = useMemo(
        () => (
          <Day day={1} avaliable={day1} memoized={true} setAgenda={setAgenda}/>
        ),
    [day1]);

    const day2 = agenda["2019"]["7"]["2"].avaliable;
    const memoizedDay2 = useMemo(
        () => (
          <Day day={2} avaliable={day2} memoized={true} setAgenda={setAgenda}/>
        ),
    [day2]);

    renderMonth = () => {
        return(
            <>
                {memoizedDay1}
                {memoizedDay2}
           </>
    }

    return(
        <>
            {renderMonth()}
        </>
    )
}

现在不必要的重新渲染已经消失了，当我更新一天时，只有一个<Day>被重新渲染，如果我更新日历组件的内部状态，则不会<Day>重新渲染 - 所需的行为。

在现实生活场景中，创建变量并手动记忆每个组件是不可能的，因为它在屏幕上呈现的天数未知。

理想的方法是什么？

4

1 回答 1

2

用作功能组件React.memo的类似物：PureComponent

export default React.memo(function Day({...}) { ... })

目的useMemo是缓存大量计算，然后防止重新渲染。

于 2019-07-16T22:25:56.403 回答