何時優化渲染以響應 useMemo 和 useCallback

Question

我已經閱讀了幾篇關於何時在 React 中優化渲染的文章，但是我仍然有一些疑問。

const RepairNoticeContainer = () => {
    const dispatch = useDispatch();
    const history = useHistory();
    const { siteType, siteId } = useParams();

    const data = useSelector(pageSelectors.getData);

    const showRepairNotice = data.grid.cols.lg !== 36;

    const handleRepairClick = () => {
        dispatch(
            pagesActions.copyAndRepairCurrentPage(newPageId => {
                history.push(`/editor/${siteType}/${siteId}/pages/${newPageId}`);
            })
        );
    };

    return showRepairNotice ? <RepairNotice onRepairClick={handleRepairClick} /> : null;
};

據我了解，將useCallback用於handleRepairClick以避免重新呈現<RepairNotice/>是有益的。 但是showRepairNotice變量呢？ 是否應該將其包裝在useMemo中進行優化？

const RepairNotice = ({ onRepairClick }) => {
    const translate = useTranslator();

    let message = translate("repair_warning");
    message = message.charAt(0).toLowerCase() + message.slice(1);

    return (
        <MessageBox type="warning" icon="information11" className="mb-0 mt-2">
            <div className="row">
                <div className="col">
                    <b>{translate("warning")}:</b> {message}
                </div>
                <div className="col-auto text-right">
                    <Button color="danger" onClick={onRepairClick} size="small">
                        {translate("repair_now")}
                    </Button>
                </div>
            </div>
        </MessageBox>
    );

此示例的類似問題。 將message包裝在useMemo中是否有益？

const Page = ({ status }) => {
    const unsavedData = status?.unsavedData ? true : false;

    return (
        <Fade>
            <div className="Page">
                <NavConfirmModal active={unsavedData} onSavePage={onSavePage} />
            </div>
        </Fade>
    );
};

最后，應該使用useMemo unsavedData嗎？

解釋將不勝感激。

Answer 1

據我了解，將 useCallback 用於 handleRepairClick 以避免重新呈現

這是正確的。 在包裝handleRepairClick時，簡單地說，您將阻止創建此 function 的新實例，因此它將從冗余重新渲染中保存RepairNotice嵌套組件，因為它依賴於道具中的此 function。 useMemo的另一個好案例是，當您呈現項目列表並且每個項目都依賴於在其父項中聲明的相同處理程序 function 時。 很好的useCallback解釋here。

但是 showRepairNotice 變量呢？ 是否應該將其包裝在 useMemo 中進行優化？

這只是一個簡單的“方程式”檢查，從性能方面來看真的很便宜——所以這里真的不需要useMemo 。

將消息包裝在 useMemo 中是否有益？

是的，它會的。 由於 javascript 必須對message （ charAt 、 toLowerCase 、 slice ）觸發至少 3 個操作，並且您並不真的希望每次重新渲染RepairNotice組件時都會觸發此計算。

是否應該使用 unsavedData？

出於擺脫NavConfirmModal的冗余重新渲染的類似原因，最好將 unsavedData 包裝到useMemo （並且可能僅將其更改為?.status?.unsavedData以獲得布爾值）。

並且非常好的useMemo解釋在這里。