有状态的React上下文提供程序可以增加重新呈现的次数吗

Question

想象一个像这样的状态上下文提供程序：

const CurrentUserContext = React.createContext(null);
export default CurrentUserContext;
export function CurrentUserProvider(props) {
const [data, setData] = useStateWithCallback(null);
return (
<CurrentUserContext.Provider value={{ data, setData }}>
{props.children}
</CurrentUserContext.Provider>
);
}

以及用于消费它的HOC：

import { CurrentUserContext } from "../../context";
const withCurrentUser = (Component) => (props) => (
<CurrentUserContext.Consumer>
{(currentUser) => <Component {...props} currentUser={currentUser} />}
</CurrentUserContext.Consumer>
);
export default withCurrentUser;

在我的情况下，我有一个名为"；配置文件"；其呈现当前用户的数据(他在称为"页眉"的自定义组件中的化身(以及在默认React Native的"页眉"中的一些文本(也相对于他的数据(；文本"；组件(。

ProfileScreen[父项]->标题[子]

如此"；标题"；组件只在这个屏幕上使用，我想做：

export default withCurrentUser(Header)

因此，我不必将当前用户的数据作为道具从Profile屏幕(它也包含了这个HOC(中传递。

withCurrentUser(ProfileScreen([PParent]->带CurrentUser(Header([Child]

现在，假设完整组件树的一个随机节点更新此上下文提供程序的状态。。。这就是我的问题所在。有没有可能对我所描述的情况进行不必要的重新渲染？我的意思是，Header自定义组件是否有可能在Profile屏幕之前重新渲染，然后，当Profile屏幕重新渲染时，其子组件(Header(也会再次重新渲染？还是一切都会按顺序呈现？

我之所以这么问，是因为我不确定将用户数据从"；配置文件"；屏幕到需要它的所有子组件，具有单个上下文消费者，或者具有多个上下文消费者(需要用户数据的屏幕及其所有子组件(，并忽略将数据作为道具传递。

Answer 1

我的建议是，如果是一级，就把它当作道具，不要想办法。对于你的问题，是的，我可以通过更新道具来增加更新，或者如果你有一个reducer调度动作。幸运的是，上下文API重新呈现了所有视图，您可以查看他们在这里的示例并比较

https://www.smashingmagazine.com/2020/01/introduction-react-context-api/

如果你正在使用React Hooks，你应该写下你的USE STATE

类似const[foo，setFoo]=useState(((=>bar(

这将仅在已安装时运行。如果您已订阅，请确保取消订阅。希望这能有所帮助。要保持状态更新，请确保使用相应的常量更新状态。