javascript - 我应该将反应钩子作为值传递给上下文提供者吗?
问题描述
我需要能够过滤掉一些用户的全局变量用户。使用作为值传递的反应挂钩会导致多次重新渲染页面。哪种解决方案更好,为什么?
export const UsersProvider = props => {
const [user, setUser] = useState({
isLogged: false
});
return (
<UsersContext.Provider value={[filteredUsers, setFilteredUsers]}>
{props.children}
</UsersContext.Provider>
);
};
或者
class UserProvider extends React.Component {
constructor(props) {
super(props);
this.setUser = () => {
this.setState(state => {
return {user: "true"};
});
console.log(this.state.user);
};
// State also contains the updater function so it will
// be passed down into the context provider
this.state = {
user: false,
setUser: this.setUser
};
}
render() {
return (
<UserContext.Provider value={this.state}>
{this.props.children}
</UserContext.Provider>
);
}
}
解决方案
您只需要添加您需要在消费者中使用的内容。就我个人而言,我只提供如下几个函数/值:
export const UsersProvider = props => {
const [user, setUser] = useState({
isLogged: false
});
const props = {
filteredUsers,
setFilteredUsers
};
return (
<UsersContext.Provider {...props}>
{props.children}
</UsersContext.Provider>
);
};
但我只会将您在其他地方需要的东西添加到 props 对象中。我怀疑您是否需要其他地方当前组件状态的所有内容,因为如果这样做,您可能会遇到组织问题。
推荐阅读
- go - 为什么当 annoymouse 函数返回时 defer 语句的工作方式不同
- python - Python - 为绘图构建数据框
- google-cloud-platform - 双引号字符串数据在谷歌存储上以三引号显示
- java - 如何在 5 小时后强制会话退出 TOMCAT 服务器(不是非活动会话退出)
- python - 无法注册碰撞
- firebase - 如何在 Firebase 上创建 Busuu 每日提醒通知
- aws-lambda - 功能即服务 (FaaS) 托管如何在后台工作?
- go - 为什么 go-jaeger-client 需要度量和日志的包装器?
- reactjs - 为什么 Scrollspy 未在反应应用程序中加载?
- java - 异步回调和监听器