這個問題在這里已經有了答案： 如何解決背景關系中重新渲染過多的問題？ (1 個回答) 3 小時前關閉。
大家好，我是 React 新手。我試圖使用背景關系 api創建一個全域狀態。我遇到了一些意想不到的事情。我學到的是，當一個背景關系被創建時，它有一個提供者將包裝那些需要資料的組件，當值發生變化時，提供者將重新呈現所有包裝的組件，對吧？
看看這個：
// AuthContext.js
export const AuthContext = createContext(null);
const AuthProvider = ({ children }) => {
const [user, setUser] = useState({
name: null,
});
return (
<AuthContext.Provider value={{ user, setUser }}>
{children}
</AuthContext.Provider>
);
};
// index.js
<AuthProvider>
<App />
</AuthProvider>
// App.js
function App() {
console.log("[App] ran");
return (
<>
<Dashboard />
<Login />
</>
);
}
// Dashboard.js
function Dashboard() {
console.log("[Dashboard] ran");
return <div>Dashboard</div>;
}
// Login.js
function Login() {
console.log("[Login] ran");
const { user, setUser } = useContext(AuthContext);
const inputNameRef = useRef();
return (
<div>
<input placeholder="Enter your name..." ref={inputNameRef} />
<button
onClick={() => {
setUser(inputNameRef.current.value);
}}
>
Submit
</button>
</div>
);
}
當代碼第一次運行時，輸出為：
[應用] 跑了
[儀表板] 跑了
[登錄] 跑了
當點擊提交按鈕時，將呼叫 setUser 函式并將新值設定為 AuthProvider 狀態。提供者應該重新渲染所有組件，并且應該再次記錄上面的輸出，但是不，輸出只是：
[登錄] 跑了
令我感興趣的是，當我在儀表板組件中使用useContext時，它可以作業，我的意思是該組件將被重新渲染。它與我認為的useContext掛鉤有關，但不知道它是如何作業的。引擎蓋下發生了什么？
uj5u.com熱心網友回復：
參考 React 關于 Context 的官方檔案（https://reactjs.org/docs/context.html）：
每當 Provider 的 value 屬性發生變化時，所有作為 Provider 后代的消費者都會重新渲染。從 Provider 到其后代消費者（包括 .contextType 和 useContext）的傳播不受 shouldComponentUpdate 方法的約束，因此即使祖先組件跳過更新，消費者也會更新。
您可以將“消費者”視為其狀態“消耗”useContext鉤子的組件。AKA 你只會看到使用鉤子的組件的重新渲染。這樣，并非 Context Provider 中的所有子節點都會在狀態更改時重新渲染，只有那些使用它的子節點才會重新渲染。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/469314.html
標籤：javascript 反应 反应钩子 反应状态