我正在使用新的React Context API而不是Redux开发一个新应用,并且在使用之前,例如Redux
,当我需要获取用户列表时,我只是调用componentDidMount
我的操作,但是现在使用React Context,我的操作可以在内部进行。我的使用者位于我的渲染函数中,这意味着每次调用我的渲染函数时,它将调用我的操作以获取用户列表,但这不好,因为我将执行许多不必要的请求。
那么,我怎么只能一次调用动作,例如in componentDidMount
而不是render?
只是为了举例说明,请看以下代码:
假设我将所有内容包装Providers
在一个组件中,如下所示:
import React from 'react';
import UserProvider from './UserProvider';
import PostProvider from './PostProvider';
export default class Provider extends React.Component {
render(){
return(
<UserProvider>
<PostProvider>
{this.props.children}
</PostProvider>
</UserProvider>
)
}
}
然后,我将这个Provider组件包装了所有应用程序,如下所示:
import React from 'react';
import Provider from './providers/Provider';
import { Router } from './Router';
export default class App extends React.Component {
render() {
const Component = Router();
return(
<Provider>
<Component />
</Provider>
)
}
}
现在,以我的用户视图为例,它将是这样的:
import React from 'react';
import UserContext from '../contexts/UserContext';
export default class Users extends React.Component {
render(){
return(
<UserContext.Consumer>
{({getUsers, users}) => {
getUsers();
return(
<h1>Users</h1>
<ul>
{users.map(user) => (
<li>{user.name}</li>
)}
</ul>
)
}}
</UserContext.Consumer>
)
}
}
我想要的是:
import React from 'react';
import UserContext from '../contexts/UserContext';
export default class Users extends React.Component {
componentDidMount(){
this.props.getUsers();
}
render(){
return(
<UserContext.Consumer>
{({users}) => {
getUsers();
return(
<h1>Users</h1>
<ul>
{users.map(user) => (
<li>{user.name}</li>
)}
</ul>
)
}}
</UserContext.Consumer>
)
}
}
但是,当然上面的示例不起作用,因为getUsers
不存在于我的用户视图中的道具。如果有可能的话,正确的做法是什么?
您必须在较高级的父级组件中传递上下文,以在子级中获得作为道具的访问权限。