我正在使用新的React Context API而不是Redux开发新的应用程序，之前使用Redux，当我需要获取用户列表时，我只需调用componentDidMount我的动作，但现在使用React Context，我的动作存在于我的消费者里面，这是我的渲染功能，这意味着每次调用我的渲染函数时，它都会调用我的动作来获取我的用户列表，这是不好的，因为我将会做很多不必要的请求。
那么，我如何才能只调用一次我的动作，比如componentDidMount而不是调用渲染？
举个例子，看看这段代码：
我们假设我将所有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不在我的用户视图道具中。如果可以的话，这样做的正确方法是什么？
答案 0 :(得分：66)
编辑：在 v16.8.0 中引入react-hooks，您可以通过使用useContext hook
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之前，您可以按以下方式执行此操作
为了在lifecyle方法中使用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>
)
通常，您会在App中维护一个上下文，将上述登录打包在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);
答案 1 :(得分：3)
好的，我找到了一种限制方法。使用with-context库，我设法将所有消费者数据插入到我的组件道具中。
但是，要在同一个组件中插入多个使用者很复杂，您必须使用此库创建混合使用者，这会使代码变得不优雅而且效率低下。
此库的链接：https://github.com/SunHuawei/with-context
编辑：实际上你不需要使用with-context提供的多上下文api，事实上，你可以使用简单的api并为你的每个上下文制作一个装饰器，如果你想使用更多比你组件中的一个消费者，只需在你的类上面声明你想要的装饰器！
答案 2 :(得分：0)
您必须在更高的父组件中传递上下文才能将访问权限作为子项中的道具。
答案 3 :(得分：0)
就我而言，将.bind(this)添加到事件就足够了。这就是我的组件的外观。
// Stores File
class RootStore {
//...States, etc
}
const myRootContext = React.createContext(new RootStore())
export default myRootContext;
// In Component
class MyComp extends Component {
static contextType = myRootContext;
doSomething() {
console.log()
}
render() {
return <button onClick={this.doSomething.bind(this)}></button>
}
}
答案 4 :(得分：0)
以下内容对我有用。这是一个使用useContext和useReducer挂钩的HOC。 在此示例中，还有一种与套接字进行交互的方法。
我正在创建2个上下文（一个用于调度，一个用于状态）。您首先需要使用SampleProvider HOC包装一些外部组件。然后，通过使用一个或多个实用程序功能，您可以访问状态和/或调度。 withSampleContext很不错，因为它同时传递了调度和状态。在功能组件中还可以使用诸如useSampleState和useSampleDispatch之类的其他功能。
这种方法允许您像往常一样对React组件进行编码，而无需注入任何特定于Context的语法。
import React, { useEffect, useReducer } from 'react';
import { Client } from '@stomp/stompjs';
import * as SockJS from 'sockjs-client';
const initialState = {
myList: [],
myObject: {}
};
export const SampleStateContext = React.createContext(initialState);
export const SampleDispatchContext = React.createContext(null);
const ACTION_TYPE = {
SET_MY_LIST: 'SET_MY_LIST',
SET_MY_OBJECT: 'SET_MY_OBJECT'
};
const sampleReducer = (state, action) => {
switch (action.type) {
case ACTION_TYPE.SET_MY_LIST:
return {
...state,
myList: action.myList
};
case ACTION_TYPE.SET_MY_OBJECT:
return {
...state,
myObject: action.myObject
};
default: {
throw new Error(`Unhandled action type: ${action.type}`);
}
}
};
/**
* Provider wrapper that also initializes reducer and socket communication
* @param children
* @constructor
*/
export const SampleProvider = ({ children }: any) => {
const [state, dispatch] = useReducer(sampleReducer, initialState);
useEffect(() => initializeSocket(dispatch), [initializeSocket]);
return (
<SampleStateContext.Provider value={state}>
<SampleDispatchContext.Provider value={dispatch}>{children}</SampleDispatchContext.Provider>
</SampleStateContext.Provider>
);
};
/**
* HOC function used to wrap component with both state and dispatch contexts
* @param Component
*/
export const withSampleContext = Component => {
return props => {
return (
<SampleDispatchContext.Consumer>
{dispatch => (
<SampleStateContext.Consumer>
{contexts => <Component {...props} {...contexts} dispatch={dispatch} />}
</SampleStateContext.Consumer>
)}
</SampleDispatchContext.Consumer>
);
};
};
/**
* Use this within a react functional component if you want state
*/
export const useSampleState = () => {
const context = React.useContext(SampleStateContext);
if (context === undefined) {
throw new Error('useSampleState must be used within a SampleProvider');
}
return context;
};
/**
* Use this within a react functional component if you want the dispatch
*/
export const useSampleDispatch = () => {
const context = React.useContext(SampleDispatchContext);
if (context === undefined) {
throw new Error('useSampleDispatch must be used within a SampleProvider');
}
return context;
};
/**
* Sample function that can be imported to set state via dispatch
* @param dispatch
* @param obj
*/
export const setMyObject = async (dispatch, obj) => {
dispatch({ type: ACTION_TYPE.SET_MY_OBJECT, myObject: obj });
};
/**
* Initialize socket and any subscribers
* @param dispatch
*/
const initializeSocket = dispatch => {
const client = new Client({
brokerURL: 'ws://path-to-socket:port',
debug: function (str) {
console.log(str);
},
reconnectDelay: 5000,
heartbeatIncoming: 4000,
heartbeatOutgoing: 4000
});
// Fallback code for http(s)
if (typeof WebSocket !== 'function') {
client.webSocketFactory = function () {
return new SockJS('https://path-to-socket:port');
};
}
const onMessage = msg => {
dispatch({ type: ACTION_TYPE.SET_MY_LIST, myList: JSON.parse(msg.body) });
};
client.onConnect = function (frame) {
client.subscribe('/topic/someTopic', onMessage);
};
client.onStompError = function (frame) {
console.log('Broker reported error: ' + frame.headers['message']);
console.log('Additional details: ' + frame.body);
};
client.activate();
};
答案 5 :(得分：-1)
您可以在渲染函数之外访问react hooks上下文，唯一的区别是您的组件不会重新渲染，但这可能是有目的的。
代替这样做：
// store.js
import React from 'react';
const UserContext = React.createContext({
user: {},
setUser: () => null
});
export { UserContext };
进行关闭：
// store.js
import React from 'react';
let user = {};
const UserContext = React.createContext({
user,
setUser: () => null
});
export { UserContext };
那么你可以做
import { UserContext } from 'store';
console.log(UserContext._currentValue.user);
就是这样！