- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我已经通读了有关钩子(Hook)的文档,但没有看到有关使用钩子(Hook)时组件生命周期的足够详细信息,因此我需要您的帮助。
更具体地说,我有一个包含以下相关问题的示例代码:https://github.com/khoitnm/practice-react-redux/tree/main/pro-00-old-react-version/src/comp-04-clickButton
问题 1) 我的功能组件使用了 3 个钩子(Hook):useSelector
, useDispatch
, useEffect
,但是为什么组件执行了 4 次(下面的代码和屏幕截图中有详细信息)?据我理解,应该只有3次:
useSelector
触发这次执行useEffect
触发此执行。 useDispatch
不会触发任何额外的执行,那为什么数据显示4次?下面是我的代码和截图。组件:
let componentCount = 0;
let returnCount = 0;
let useSelectorCount = 0;
let useEffectCount = 0;
const Comp04ClickButtonPage = (): JSX.Element => {
componentCount++;
console.log(`[${componentCount}] component - START ----------------------`);
// useSelector
const stringValueState = useSelector((rootState: RootState): string => {
useSelectorCount++;
console.log(`[${componentCount}] selectorCount: ${useSelectorCount}`);
const result = rootState.comp04ClickButtonSlice.stringValue;
return result;
});
console.log(`[${componentCount}] component - after useSelectorCount`);
// useEffect
const dispatch = useDispatch();
useEffect(() => {
useEffectCount++;
console.log(`[${componentCount}] effectCount: ${useEffectCount}.`);
dispatch(thunkComp04ClickButton(`${new Date().getTime()}`));
}, [dispatch]);
console.log(`[${componentCount}] component - after useEffect`);
const onClickButton = () => {
componentCount = returnCount = useSelectorCount = useEffectCount = 0; // reset counts
console.log(`[${componentCount}] onClickNewValue`);
dispatch(thunkComp04ClickButton(`Random ${new Date().getTime()}`));
};
// render
returnCount++;
return (
<div>
{console.log(`[${componentCount}] renderCount: ${returnCount}`)}
<div>
[{componentCount}], useEffect: {useEffectCount}, useSelectorCount: {useSelectorCount}, returnCount: {returnCount}
</div>
<button onClick={onClickButton}>Click Button</button>
</div>
);
}
砰的一声:
export const thunkComp04ClickButton = (stringValue: string): AppThunk => async (dispatch) => {
try {
console.log(`AppThunk: saveStringValue "${stringValue}" start dispatch`);
dispatch(setComp04ClickButtonState({ stringValue: stringValue }));
console.log(`AppThunk: saveStringValue "${stringValue}" end dispatch`);
} catch (err) {
console.error(`AppThunk: saveStringValue error dispatch` + err, err);
}
};
切片:
type Comp04ClickButtonState = {
stringValue: string;
};
const initialState: Comp04ClickButtonState = {
stringValue: 'Init Comp04ClickButtonState',
};
const comp04ClickButtonSlice = createSlice({
name: 'comp04ClickButtonSlice',
initialState,
reducers: {
setComp04ClickButtonState(state, action: PayloadAction<Comp04ClickButtonState>) {
console.log(`Slice: setComp04ClickButtonState "${action.payload.stringValue}"`);
return action.payload;
},
},
});
export const { setComp04ClickButtonState } = comp04ClickButtonSlice.actions;
export default comp04ClickButtonSlice.reducer;
在screenshot 1 :你会看到 componentCount 是 [4]
和 returnCount: 4
问题2) 当组件被触发时,为什么useSelector
执行多次?
更详细的,我们可以在控制台日志中看到:组件第二次执行时,selectorCount从2次增加到5次(共4次)
[2] selectorCount: 2
[2] component - after useSelectorCount
[2] component - after useEffect
[2] renderCount: 2
[2] selectorCount: 3
[2] effectCount: 1.
AppThunk: saveStringValue "1610983429863" start dispatch
Slice: setComp04ClickButtonState "1610983429863"
[2] selectorCount: 4
AppThunk: saveStringValue "1610983429863" end dispatch
[2] selectorCount: 5
综上所述,当我打开那个网页时,最终的结果是:
更新:正如@lawrence-witt 提到的,<React.StrictMode>
导致对各种事物的双重调用,所以我更改了我的 index.tsx
使用 <React.Fragment>
像这样:
const render = () => {
ReactDOM.render(
<React.Fragment>
<Provider store={store}>
<App />
</Provider>
</React.Fragment>,
document.getElementById('root')
);
};
结果,组件现在只执行了 2 次。但是,正如您在 screenshot 2 中看到的那样,控制台日志仍然显示 useSelector
第一次执行组件时触发4次。因此问题 2 仍然存在:为什么会触发这么多次?
[1] component - START ----------------------
[1] selectorCount: 1
[1] component - after useSelectorCount
[1] component - after useEffect
[1] renderCount: 1
[1] selectorCount: 2
[1] effectCount: 1.
AppThunk: saveStringValue "1611023432655" start dispatch
Slice: setComp04ClickButtonState "1611023432655"
[1] selectorCount: 3
AppThunk: saveStringValue "1611023432655" end dispatch
[1] selectorCount: 4
最佳答案
这里的问题是,当使用 useSelector
Hook 时,它会在每次 Redux 管理的值更改时更新组件。您可以在此处阅读有关 useSelector
的更多信息:https://react-redux.js.org/api/hooks#useselector .
您添加到 useEffect
的依赖项可以删除,因为 dispatch
永远不会改变。 useDispatch
的官方文档可以在这里找到:https://react-redux.js.org/api/hooks#usedispatch .
// This will be called only once when the component is mounted for the first time
useEffect(() => {
initDispatch();
},[]);
const initDispatch = useCallback(()=>{
useEffectCount++;
console.log(`[${componentCount}] effectCount: ${useEffectCount}.`);
dispatch(thunkComp04ClickButton(`${new Date().getTime()}`));
}, [dispatch]);
当 dispatch
被调用时,这段代码仍然会重新渲染组件(因为 dispatch
在 useCallback
依赖数组中)这将强制useSelector
重新渲染组件。
关于reactjs - React函数式组件执行多次,useSelector()在每次函数式组件执行时执行多次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65777967/
我错过了什么,我已完成 的安装指南中要求的所有步骤 native 脚本 运行 tns doctor 给我以下输出... C:\abc\xyz>tns doctor √ Getting environm
尝试从 {addToCart(book)}}/>}> 传递数据至}> 问题: 购物车 ( render={()=> ) 收到 null,但没有收到我尝试发送的对象 已放置“console.log...
这是 _app.tsx 的外观: function MyApp({ Component, pageProps }: AppProps) { return } 我在构建项目时遇到了这个错误: Ty
我的 Laravel Vue 组件收到以下警告: [Vue warn]: Avoid mutating a prop directly since the value will be overwrit
根据这个example更详细this one我刚刚遇到了一件奇怪的事情...... 如果我使用方法作为 addTab(title,icon,component) 并且下一步想使用 setTabComp
目前我有一个捕获登录数据的表单,一个带有 TIWDBGrid 的表单,它应该返回与我从我的 mysql 数据库登录时创建的 user_id 关联的任何主机,以及一个共享数据模块。 下面是我的登录页面代
在我的react-native应用程序中,我目前有一个本地Android View (用java编写)正确渲染。当我尝试将我的react-native javascript 组件之一放入其中时,出现以
我为作业编写了简单的代码。我引用了文档和几个 youtube 视频教程系列。我的 react 代码是正确的我在运行代码时没有收到任何错误。但是这些 react-boostrap 元素没有渲染。此代码仅
几周前我刚刚开始使用 Flow,从一周前开始我就遇到了 Flow 错误,我不知道如何修复。 代码如下: // @flow import React, { Component } from "react
我想在同一个 View 中加载不同的 web2py 组件,但不是同时加载。我有 5 个 .load 文件,它们具有用于不同场景的表单字段,这些文件由 onchange 选择脚本动态调用。 web2py
关闭。这个问题是opinion-based .它目前不接受答案。 想改善这个问题吗?更新问题,以便可以通过 editing this post 用事实和引文回答问题. 6年前关闭。 Improve t
Blazor 有 InputNumber将输入限制为数字的组件。然而,这呈现了一个 firefox 不尊重(它允许任何文本)。 所以我尝试创建一个过滤输入的自定义组件: @inherits Inpu
我在学习 AngularDART 组件时编写了以下简单代码,但没有显示任何内容,任何人都可以帮助我知道我犯了什么错误: 我的 html 主文件:
我想在初始安装组件时或之后为 div 设置动画(淡入)。动画完成后,div 不应消失。我正在尝试使用 CSSTransition 组件并查看 reactcommunity.org 上的示例,但我根本无
我需要一个 JSF 组件来表示甘特图。是否有任何组件库(如 RichFaces)包含这样的组件? 最佳答案 JFreeChart有甘特图和PrimeFaces有一个图像组件,允许您动态地流式传输内容。
从软件工程的角度来看,组件、模块和子系统之间有什么区别? 提前致谢! 最佳答案 以下是 UML 2.5 的一些发现: 组件:该子句指定一组结构,可用于定义任意大小和复杂性的软件系统。特别是,它将组件指
我有使用非托管程序集(名为 unmanaged.dll)的托管应用程序(名为 managed.exe)。到目前为止,我们已经创建了 Interop.unmanaged.dll,managed.exe
我有一个跨多个应用程序复制的 DAL(我知道它的设计很糟糕,但现在忽略它),我想做的是这个...... 创建一个将通过所有桌面应用程序访问的 WCF DAL 组件。任何人都可以分享他们对关注的想法吗?
我有一个 ComboBox 的集合声明如下。 val cmbAll = for (i /** action here **/ } 所有这些都放在一个 TabbedPane 中。我想这不是问题。那么我
使用 VB6 创建一个 VB 应用程序。应用程序的一部分显示内部的闪存。 当我使用 printform它只是打印整个应用程序。我不知道如何单独打印闪光部分。任何帮助,将不胜感激!.. 谢谢。 最佳答案
我是一名优秀的程序员,十分优秀!