第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

使用 React Hooks 防止重新渲染

使用 React Hooks 防止重新渲染

我正在zustand為全局狀態(tài)實(shí)施,但在設(shè)置自己的全局狀態(tài)時(shí)遇到了同樣的問題。只要我將一個(gè)組件附加到一個(gè)簡(jiǎn)單的 useStore 掛鉤上,我的組件就會(huì)在每次更新時(shí)呈現(xiàn)兩次。盡管發(fā)生了這種情況:我不更新任何狀態(tài)沒有道具被改變我將組件包裝在 React.memo() 中只是為了確定商店(使用 zustand 創(chuàng)建)中的任何內(nèi)容都沒有改變 - 除了應(yīng)該觸發(fā)一次更新的一項(xiàng)更改。這是一個(gè) Codesandbox - 一個(gè)您可以檢查日志的最小示例 - 在重新加載和每次更新后,它總是記錄兩次。對(duì)于那些寧愿在沒有運(yùn)行的情況下查看代碼的人:import React from "react";import create from "zustand";const useStore = create((set) => ({  bears: 0,  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),  removeAllBears: () => set({ bears: 0 })}));const sessionId = Math.random().toString().slice(2, 7);const App = React.memo(() => {  const { bears, increasePopulation } = useStore((state) => state);  console.log("RENDER Bears", bears, sessionId); // always logs twice  return (    <div className="App">      <h1>Hello CodeSandbox</h1>      <h2>Start editing to see some magic happen.!</h2>      <button onClick={increasePopulation}>increase</button>    </div>  );});export default App;現(xiàn)在,我明白有一個(gè)額外的渲染并不是真正的問題,只是當(dāng)我的應(yīng)用程序增長(zhǎng)時(shí),我傾向于將這些組件中的幾個(gè)嵌套在一起,所以當(dāng)我確實(shí)想最小化渲染量時(shí),很難知道從哪里開始。所以,我的問題是:為什么會(huì)這樣?我可以防止這種雙重渲染嗎?如果可以,怎么做?如果不是,處理這個(gè)問題的正確方法是什么?
查看完整描述

1 回答

?
紅顏莎娜

TA貢獻(xiàn)1842條經(jīng)驗(yàn) 獲得超13個(gè)贊

這可能是因?yàn)槟膽?yīng)用程序包裝在React.StrictMode.?React 核心團(tuán)隊(duì)表示雙重渲染是有意為之的。

這是 StrictMode 的一個(gè)有意特性。這只發(fā)生在開發(fā)中,并有助于發(fā)現(xiàn)放入渲染階段的意外副作用。我們只對(duì)帶有 Hooks 的組件執(zhí)行此操作,因?yàn)樗鼈兏锌赡茉阱e(cuò)誤的位置意外產(chǎn)生副作用。

查看完整回答
反對(duì) 回復(fù) 2023-04-27
  • 1 回答
  • 0 關(guān)注
  • 341 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)