React中仅在依赖项真正变更时执行Hook的惯用实现方式

核心问题分析 #

窗口关闭再打开时，HelpSearchWindow组件会重新挂载，此时即便searchTerm未变更，useEffect仍会执行一次（React组件挂载时默认执行useEffect）。你通过父组件维护prevSearchTerm的方式能解决问题，但存在更符合React惯用风格的实现方式。

一、推荐方案1：将搜索逻辑绑定到按钮点击（最直观） #

放弃通过useEffect监听状态变化触发搜索，改为仅在用户主动点击搜索按钮时执行搜索，完全规避组件挂载带来的自动执行问题：

import React, { useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { setSearchTerm } from 'documentationIndex.store';

interface Props {
    searchInput: string;
    setSearchInput: (searchInput: string) => void;
}

export const HelpSearchWindow: React.FC<Props> = ({ searchInput, setSearchInput }) => {
    const documentationIndexState = useSelector((store: StoreState) => store.documentationIndex);
    const dispatch = useDispatch();

    const handleSearch = async () => {
        // 先初始化索引（如果需要）
        if (!documentationIndexState.indexExists) {
            // 执行需要await的初始化逻辑
        }
        // 仅当输入关键词与当前存储的searchTerm不同时，才执行搜索
        if (searchInput !== documentationIndexState.searchTerm) {
            // 这里直接执行搜索逻辑（比如dispatch搜索action）
            dispatch(setSearchTerm(searchInput));
        }
    };

    return (
        <>
            <input
                value={searchInput}
                onChange={e => setSearchInput(e.target.value)}
            />
            <button
                onClick={(e) => {
                    e.preventDefault();
                    handleSearch();
                }}
            >
                Search
            </button>
            <SearchTable rows={documentationIndexState.searchResults} />
        </>
    );
};

// 父组件简化
const ParentComponent = () => {
    const [searchInput, setSearchInput] = useState('');
    return (
        <HelpSearchWindow
            searchInput={searchInput}
            setSearchInput={setSearchInput}
        />
    );
};

优势 #

• 完全符合用户操作预期：只有主动点击搜索才触发，不会因窗口开关自动执行
• 无需额外维护prevSearchTerm状态，减少状态管理复杂度

二、推荐方案2：用Redux存储上次搜索关键词（全局复用场景） #

如果需要在多个组件间共享搜索状态，或希望状态全局持久化，可将prevSearchTerm逻辑移至Redux store，避免父组件承担不必要的状态职责：

1. 更新Redux Store

// documentationIndex.store.ts
import { createAction, createReducer } from '@reduxjs/toolkit';

interface DocumentationIndexState {
    searchTerm: string;
    searchResults: any[];
    indexExists: boolean;
    lastSearchedTerm: string; // 新增：存储上次搜索关键词
}

const initialState: DocumentationIndexState = {
    searchTerm: '',
    searchResults: [],
    indexExists: false,
    lastSearchedTerm: ''
};

// 新增action
export const setLastSearchedTerm = createAction<string>('documentationIndex/setLastSearchedTerm');
export const setSearchTerm = createAction<string>('documentationIndex/setSearchTerm');

const documentationIndexReducer = createReducer(initialState, builder => {
    builder
        .addCase(setSearchTerm, (state, action) => {
            state.searchTerm = action.payload;
        })
        .addCase(setLastSearchedTerm, (state, action) => {
            state.lastSearchedTerm = action.payload;
        });
});

export default documentationIndexReducer;

2. 修改HelpSearchWindow

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { setSearchTerm, setLastSearchedTerm } from 'documentationIndex.store';

interface Props {
    searchInput: string;
    setSearchInput: (searchInput: string) => void;
}

export const HelpSearchWindow: React.FC<Props> = ({ searchInput, setSearchInput }) => {
    const { searchTerm, indexExists, lastSearchedTerm, searchResults } = useSelector((store: StoreState) => store.documentationIndex);
    const dispatch = useDispatch();

    useEffect(() => {
        const runSearch = async () => {
            if (!indexExists) {
                // 执行await初始化逻辑
            }
            if (searchTerm !== lastSearchedTerm) {
                // 执行搜索逻辑
                dispatch(setLastSearchedTerm(searchTerm));
            }
        };
        runSearch();
    }, [searchTerm, lastSearchedTerm, indexExists, dispatch]);

    return (
        <>
            <input
                value={searchInput}
                onChange={e => setSearchInput(e.target.value)}
            />
            <button
                onClick={(e) => {
                    e.preventDefault();
                    dispatch(setSearchTerm(searchInput));
                }}
            >
                Search
            </button>
            <SearchTable rows={searchResults} />
        </>
    );
};

// 父组件简化（无需维护prevSearchTerm）
const ParentComponent = () => {
    const [searchInput, setSearchInput] = useState('');
    return (
        <HelpSearchWindow
            searchInput={searchInput}
            setSearchInput={setSearchInput}
        />
    );
};

优势 #

• 符合Redux单一数据源原则，状态管理更集中
• 无需父组件维护额外状态，组件职责更清晰

代码格式优化建议 #

1. 简化React API导入
   将React.useEffect、React.useState改为直接导入，减少重复书写：

import React, { useEffect, useState } from 'react';

2. 拆分复杂逻辑
   将useEffect中的异步逻辑抽为独立函数，提升代码可读性：

const initIndex = async () => {
    if (!indexExists) {
        // 初始化逻辑
    }
};

const executeSearch = async () => {
    if (searchTerm !== lastSearchedTerm) {
        // 搜索逻辑
        dispatch(setLastSearchedTerm(searchTerm));
    }
};

useEffect(() => {
    const run = async () => {
        await initIndex();
        await executeSearch();
    };
    run();
}, [searchTerm, lastSearchedTerm, indexExists, dispatch]);

3. 明确类型定义
   给SearchTable的rows属性添加具体类型，避免any：

interface SearchResult {
    id: string;
    title: string;
    content: string;
}

interface SearchTableProps {
    rows: SearchResult[];
}

const SearchTable: React.FC<SearchTableProps> = ({ rows }) => {
    // ...组件逻辑
};

4. 移除不必要的React.memo
   如果ParentComponent内部状态简单、props无频繁变化，React.memo的优化效果有限，可考虑移除。

内容的提问来源于stack exchange，提问作者xXx_emo_girl_xXx