gpt4 book ai didi

reactjs - useReducer Action 调度两次

转载 作者:行者123 更新时间:2023-12-03 13:13:15 24 4
gpt4 key购买 nike

场景

我有一个返回操作的自定义 Hook 。 父组件“Container”利用自定义钩子(Hook)并将操作作为 prop 传递给子组件。

问题

当从子组件执行操作时,实际调度会发生两次。 现在,如果子级直接使用钩子(Hook)并调用操作,则调度仅发生一次。

如何重现它:

打开下面的沙箱并在 Chrome 上打开开发工具,以便您可以看到我添加的控制台日志。

https://codesandbox.io/s/j299ww3lo5?fontsize=14

Main.js(子组件)您将看到我们调用 props.actions.getData()

在 DevTools 上,清除日志。在预览中,在表单上输入任意值,然后单击 按钮。在控制台日志上,您将看到像 redux-logger 这样的操作,并且您会注意到 STATUS_FETCHING 操作执行了两次而不更改状态。

现在转到 Main.js 并注释掉第 9 行并取消注释第 10 行。我们现在基本上直接使用自定义 Hook 。

在 DevTools 上,清除日志。在预览中,在表单上输入任意值,然后单击 按钮。在控制台日志上,现在您将看到 STATUS_FETCHING 仅执行了一次,并且状态发生相应变化。

虽然没有明显的性能损失,但我无法理解为什么会发生这种情况。我可能太专注于钩子(Hook),而我错过了一些如此愚蠢的东西......请让我从这个谜题中解脱出来。谢谢!

最佳答案

首先澄清现有的行为,STATUS_FETCHING 操作实际上只被"dispatch"一次(即,如果您在 console.log 内的 dispatch 调用 getData 之前执行 useApiCall.js )一次,但是 reducer 代码执行了两次。

如果不是我在写这个有点相关的答案时进行的研究,我可能不知道要寻找什么来解释原因:React hook rendering an extra time .

您会发现该答案中显示了以下来自 React 的代码块:

  var currentState = queue.eagerState;
var _eagerState = _eagerReducer(currentState, action);
// Stash the eagerly computed state, and the reducer used to compute
// it, on the update object. If the reducer hasn't changed by the
// time we enter the render phase, then the eager state can be used
// without calling the reducer again.
_update2.eagerReducer = _eagerReducer;
_update2.eagerState = _eagerState;
if (is(_eagerState, currentState)) {
// Fast path. We can bail out without scheduling React to re-render.
// It's still possible that we'll need to rebase this update later,
// if the component re-renders for a different reason and by that
// time the reducer has changed.
return;
}

特别是,请注意指示 React 可能必须重做一些工作如果 reducer 已更改的注释。问题是在你的 useApiCallReducer.js 中您在 useApiCallReducer 中定义了您的 reducer 自定义 Hook 。这意味着在重新渲染时,即使 reducer 代码相同,您每次也会提供新的 reducer 函数。除非您的 reducer 需要使用传递给自定义 Hook 的参数(而不是仅使用传递给 reducer 的 stateaction 参数),否则您应该在外部级别定义 reducer (即不嵌套在另一个函数中)。一般来说,我建议避免定义嵌套在另一个函数中的函数,除非它实际上使用嵌套范围内的变量。

当React在重新渲染后看到新的reducer时,它必须放弃之前在尝试确定是否需要重新渲染时所做的一些工作,因为新的reducer可能会产生不同的结果。这只是 React 代码中性能优化细节的一部分,您通常不需要担心,但值得注意的是,如果您不必要地重新定义函数,您最终可能会破坏一些性能优化。

为了解决这个问题,我更改了以下内容:

import { useReducer } from "react";
import types from "./types";

const initialState = {
data: [],
error: [],
status: types.STATUS_IDLE
};

export function useApiCallReducer() {
function reducer(state, action) {
console.log("prevState: ", state);
console.log("action: ", action);
switch (action.type) {
case types.STATUS_FETCHING:
return {
...state,
status: types.STATUS_FETCHING
};
case types.STATUS_FETCH_SUCCESS:
return {
...state,
error: [],
data: action.data,
status: types.STATUS_FETCH_SUCCESS
};
case types.STATUS_FETCH_FAILURE:
return {
...state,
error: action.error,
status: types.STATUS_FETCH_FAILURE
};
default:
return state;
}
}
return useReducer(reducer, initialState);
}

改为:

import { useReducer } from "react";
import types from "./types";

const initialState = {
data: [],
error: [],
status: types.STATUS_IDLE
};
function reducer(state, action) {
console.log("prevState: ", state);
console.log("action: ", action);
switch (action.type) {
case types.STATUS_FETCHING:
return {
...state,
status: types.STATUS_FETCHING
};
case types.STATUS_FETCH_SUCCESS:
return {
...state,
error: [],
data: action.data,
status: types.STATUS_FETCH_SUCCESS
};
case types.STATUS_FETCH_FAILURE:
return {
...state,
error: action.error,
status: types.STATUS_FETCH_FAILURE
};
default:
return state;
}
}

export function useApiCallReducer() {
return useReducer(reducer, initialState);
}

Edit useAirportsData

当 reducer 具有需要在另一个函数中定义的依赖性(例如, Prop 或其他状态)时,以下是此问题的变体的相关答案:React useReducer Hook fires twice / how to pass props to reducer?

下面是一个非常人为的示例,演示了渲染期间 reducer 发生更改需要重新执行的场景。您可以在控制台中看到,第一次通过其中一个按钮触发 reducer 时,它会执行两次 - 一次使用初始 reducer (addSubtractReducer),然后再次使用不同的 reducer (multiplyDivideReducer)。后续的调度似乎会无条件地触发重新渲染,而无需首先执行reducer,因此仅执行正确的reducer。如果您首先调度“nochange”操作,您可以在日志中看到特别有趣的行为。

import React from "react";
import ReactDOM from "react-dom";

const addSubtractReducer = (state, { type }) => {
let newState = state;
switch (type) {
case "increase":
newState = state + 10;
break;
case "decrease":
newState = state - 10;
break;
default:
newState = state;
}
console.log("add/subtract", type, newState);
return newState;
};
const multiplyDivideReducer = (state, { type }) => {
let newState = state;
switch (type) {
case "increase":
newState = state * 10;
break;
case "decrease":
newState = state / 10;
break;
default:
newState = state;
}
console.log("multiply/divide", type, newState);
return newState;
};
function App() {
const reducerIndexRef = React.useRef(0);
React.useEffect(() => {
reducerIndexRef.current += 1;
});
const reducer =
reducerIndexRef.current % 2 === 0
? addSubtractReducer
: multiplyDivideReducer;
const [reducerValue, dispatch] = React.useReducer(reducer, 10);
return (
<div>
Reducer Value: {reducerValue}
<div>
<button onClick={() => dispatch({ type: "increase" })}>Increase</button>
<button onClick={() => dispatch({ type: "decrease" })}>Decrease</button>
<button onClick={() => dispatch({ type: "nochange" })}>
Dispatch With No Change
</button>
</div>
</div>
);
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Edit different reducers

关于reactjs - useReducer Action 调度两次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54892403/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com