Question

我已经阅读了有关钩子的文档，但在使用钩子时没有看到有关组件生命周期的足够详细信息，因此我需要您的帮助。

更具体地说，我有一个包含以下相关问题的示例代码：https://github.com/khoitnm/practice-react-redux/tree/main/pro-00-old-react-version/src/comp-04-clickButton

问题 1) 我的功能组件使用了 3 个钩子：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

总而言之，当我打开那个网页时，最终的结果是：

useEffect: 1（如预期）
componentCount = returnCount：4（多次）
useSelector：7（为什么这么多次？？？）

更新：正如@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

Answer 1

这里的问题是，当使用 useSelector 钩子时，它会在每次 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 重新渲染组件。

React 函数组件执行多次，使用 useSelector() 在每个函数组件执行中执行多次

1 个答案: