如何避免在更新父组件状态时重新呈现子组件

Question

Home.js =======>父组件

import React, { useState, useReducer, useRef, createContext } from "react";
import { User1, User2, User3 } from "./User";
export const UserContext = createContext(null);
export const TypeContext = createContext(null); 
const Home = () => {
const [user, setUser] = useState("User");
const [type, setType] = useState("Free");
return (
<>
<input type="text" onChange={(event) => setUser(event.target.value)} />
<br />
<input type="text" onChange={(event) => setType(event.target.value)} />
<UserContext.Provider value={{ user }}>
<User1 />

</UserContext.Provider>
<TypeContext.Provider value={{ type}}>
<User2 />
</TypeContext.Provider>
</>
);
};
export default Home;

User.js =============& gt;子组件

import React, { useContext, useMemo } from "react";
import { UserContext, TypeContext } from "./Home";
export const User1 = () => {
const { user } = useContext(UserContext);
console.log("user1");
return <h1>Username is {user}</h1>;
};
export const User2 = () => {
const { type } = useContext(TypeContext);
console.log("user2");
return <h1>Username is {type}</h1>;
};
export const User3 = React.memo((props) => {
console.log("user3");
return <h2>My Props {props.title}</h2>;
});

每次用户或类型发生变化时，它都会重新呈现User1和User2作为父更新的状态。我想当我改变用户时只有User1应该更新当我更新类型时只有User2应该更新

Answer 1

这是我创建的一个工作代码盒来处理你的问题。

解释如果你想只在发生变化时呈现它们，你应该记住这些子组件。由于您没有将值作为道具传递，因此您还应该将上下文提供程序值useMemo:

Home.js

import { useState, createContext, useCallback, useMemo } from "react";
import { User1, User2 } from "./User";
export const UserContext = createContext(null);
export const TypeContext = createContext(null);
export const Home = () => {
const [user, setUser] = useState({ user: "User" });
const [type, setType] = useState({ type: "Free" });
const handleUserChange = (event) => setUser({ user: event.target.value });
const handleTypeChange = (event) => setType({ type: event.target.value });
return (
<>
<input type="text" onChange={handleUserChange} />
<br />
<input type="text" onChange={handleTypeChange} />
<UserContext.Provider value={user}>
<User1 />
</UserContext.Provider>
<TypeContext.Provider value={type}>
<User2 />
</TypeContext.Provider>
</>
);
};
export default Home;

User.js

import { useContext, memo } from "react";
import { UserContext, TypeContext } from "./Home";
export const User1 = memo(() => {
const { user } = useContext(UserContext);
console.log("user1");
return <h1>Username is {user}</h1>;
});
export const User2 = memo(() => {
const { type } = useContext(TypeContext);
console.log("user2");
return <h1>Username is {type}</h1>;
});

Answer 2

对上下文值的更改将呈现所有消费者，因为React只是对更新的值进行===比较，并且您是内联创建对象(因此每次都不同)。看到https://reactjs.org/docs/context.html警告

解决方案是记住传递给提供者的值，或者使用Redux或Zustand之类的东西。

Answer 3

您可以使用shouldComponentUpdate(nextProps, nextState)作为此方法。使用shouldComponentUpdate()让React知道组件的输出是否不受当前状态或道具变化的影响。默认行为是在每次状态改变时重新呈现，在绝大多数情况下，您应该依赖默认行为。作为一个建议，除非绝对必要，否则尽量不要使用这个，这可能会导致bug或性能问题，但这是我所知道的唯一方法，所以希望它能有所帮助