在 React 中,什么会调用高阶组件和 redux-thunk 之类的返回函数?
In React, what invokes returned function for things like higher order components and redux-thunk?
我的问题是关于什么在 React 中调用 returned 函数?例如,对于 redux-thunk,假设我从任意组件的 componentDidMount() 调用以下函数,
getCurrentPoll()
我的 redux-thunk 动作定义如下:
export const getCurrentPoll = pollId => async dispatch => {
try {
const currentPoll = await api.call('get', `polls/${pollId}`)
dispatch(actionGetCurrentPoll(currentPoll))
dispatch(removeError())
} catch (err) {
const { message } = err.response.data
dispatch(addError(message))
}
}
我的理解是调用 getCurrentPoll()
将 return 异步调度函数。但是,什么调用了 returned 的异步调度函数?
也适用于高阶组件..比如下面的函数,它将上下文 api 值注入组件道具。
const withRoomConsumer = Component => props =>
<RoomContext.Consumer>
{value => <Component {...props} context={value} />}
</RoomContext.Consumer>
当你 运行 export default withRoomConsumer(RoomsContainer)
时,什么调用了 returned 函数 props =>...
提前致谢
redux-thunk 创建一个 redux 中间件并检查操作是否是一个函数,然后调用该函数。你可以查看他们的implementation here,很简单只有14行
React HOC returns 一个功能性的 React 组件,React 将像往常一样渲染该组件。 (它也可以是 class 组件)
我的问题是关于什么在 React 中调用 returned 函数?例如,对于 redux-thunk,假设我从任意组件的 componentDidMount() 调用以下函数,
getCurrentPoll()
我的 redux-thunk 动作定义如下:
export const getCurrentPoll = pollId => async dispatch => {
try {
const currentPoll = await api.call('get', `polls/${pollId}`)
dispatch(actionGetCurrentPoll(currentPoll))
dispatch(removeError())
} catch (err) {
const { message } = err.response.data
dispatch(addError(message))
}
}
我的理解是调用 getCurrentPoll()
将 return 异步调度函数。但是,什么调用了 returned 的异步调度函数?
也适用于高阶组件..比如下面的函数,它将上下文 api 值注入组件道具。
const withRoomConsumer = Component => props =>
<RoomContext.Consumer>
{value => <Component {...props} context={value} />}
</RoomContext.Consumer>
当你 运行 export default withRoomConsumer(RoomsContainer)
时,什么调用了 returned 函数 props =>...
提前致谢
redux-thunk 创建一个 redux 中间件并检查操作是否是一个函数,然后调用该函数。你可以查看他们的implementation here,很简单只有14行
React HOC returns 一个功能性的 React 组件,React 将像往常一样渲染该组件。 (它也可以是 class 组件)