我正在使用新的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不存在于我的用戶視圖中的道具。如果有可能，正確的方法是什么？
3 回答
MMMHUHU
TA貢獻1834條經驗 獲得超8個贊
隨著v16.8.0中引入react-hooks ，您可以通過使用useContext鉤子在功能組件中使用上下文
const Users = () => {
const contextValue = useContext(UserContext);
// rest logic here
}
編輯：從版本16.6.0起。您可以通過使用上下文的生命周期的方法this.context一樣
class Users extends React.Component {
componentDidMount() {
let value = this.context;
/* perform a side-effect at mount using the value of UserContext */
}
componentDidUpdate() {
let value = this.context;
/* ... */
}
componentWillUnmount() {
let value = this.context;
/* ... */
}
render() {
let value = this.context;
/* render something based on the value of UserContext */
}
}
Users.contextType = UserContext; // This part is important to access context values
在版本16.6.0之前，您可以按以下方式進行操作
為了在您的生命周期方法中使用Context，您可以將組件編寫為
class Users extends React.Component {
componentDidMount(){
this.props.getUsers();
}
render(){
const { users } = this.props;
return(
<h1>Users</h1>
<ul>
{users.map(user) => (
<li>{user.name}</li>
)}
</ul>
)
}
}
export default props => ( <UserContext.Consumer>
{({users, getUsers}) => {
return <Users {...props} users={users} getUsers={getUsers} />
}}
</UserContext.Consumer>
)
通常，您將在您的應用程序中維護一個上下文，并且將以上登錄信息打包在HOC中以便重新使用是有意義的。你可以這樣寫
import UserContext from 'path/to/UserContext';
const withUserContext = Component => {
return props => {
return (
<UserContext.Consumer>
{({users, getUsers}) => {
return <Component {...props} users={users} getUsers={getUsers} />;
}}
</UserContext.Consumer>
);
};
};
然后你可以像這樣使用它
export default withUserContext(User);
ibeautiful
TA貢獻1993條經驗 獲得超6個贊
好的，我找到了一種有限制的方法。通過該with-context庫，我設法將我的所有消費者數據插入到我的組件道具中。
但是，要在同一個組件中插入多個使用方很復雜，您必須使用此庫創建混合使用方，這會使代碼不夠美觀且效率低下。
該庫的鏈接：https : //github.com/SunHuawei/with-context
編輯：實際上，您不需要使用提供的多上下文api，with-context實際上，您可以使用簡單的api并為每個上下文創建一個裝飾器，如果您想在組件中使用多個消費者，則只需在類上聲明所需的裝飾數！
添加回答
舉報
0/150
提交
取消