如何在React不触发渲染时调用函数？附登录态校验代码

你的核心问题在于：组件内的useEffect仅在组件挂载后才会执行，且useRef不会自动监听localStorage的变化。要实现即使组件未渲染也能随时校验登录状态，需要把逻辑从组件内剥离，放到全局层面或Redux Store的初始化流程中。

方案1：全局监听localStorage变化 + 初始化时同步状态 #

直接在应用入口（比如index.js）注册全局的storage事件监听，同时在应用启动时同步一次当前的token状态，这样不管组件是否渲染，只要localStorage的token发生变化，就能立即更新Redux状态。

代码示例： #

// 导入你的Redux Store和userSlice
import { store } from './store';
import { userSlice } from './features/user/userSlice';

// 处理storage变化的函数
function syncTokenFromStorage() {
  const token = JSON.parse(localStorage.getItem('token') || '{}');
  store.dispatch(userSlice.actions.setLoggedIn(token));
}

// 监听同源页面的localStorage变化
window.addEventListener('storage', (e) => {
  if (e.key === 'token') {
    syncTokenFromStorage();
  }
});

// 应用启动时立即同步一次token状态
syncTokenFromStorage();

之后你的App组件就可以简化，无需再处理token同步逻辑：

function App() {
  const { isLoggedIn } = useAppSelector(state => state.userReducer);
  const dispatch = useAppDispatch();

  return (
    <div className="App">
      <Routes>
        <Route path='/' element={<Layout/>}>
          <Route index element={<Home/>}/>
          <Route path='registration' element={<Register/>}/>
          <Route path='login' element={<Login/>}/>
        </Route>
      </Routes>
    </div>
  );
}

方案2：在Redux Slice中初始化状态 + 全局监听 #

把token的初始化逻辑直接放到userSlice的初始状态中，再配合全局监听处理跨页面的token更新：

代码示例： #

// userSlice.js
import { createSlice } from '@reduxjs/toolkit';

// 从localStorage初始化状态
const initialState = {
  isLoggedIn: JSON.parse(localStorage.getItem('token') || '{}')
};

const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {
    setLoggedIn: (state, action) => {
      state.isLoggedIn = action.payload;
      // 更新状态时同步写入localStorage
      localStorage.setItem('token', JSON.stringify(action.payload));
    }
  }
});

export const { setLoggedIn } = userSlice.actions;
export default userSlice.reducer;

然后在应用入口添加全局监听（同方案1），处理其他页面修改token的情况，确保当前页面状态同步。

关键说明 #

• 组件未渲染时，组件内的任何Hook（包括useEffect、useRef）都不会执行，因此必须将状态同步逻辑放在组件之外的全局环境或Redux初始化流程中。
• storage事件仅会在同源的其他页面修改localStorage时触发，如果是当前页面修改token，记得在setLoggedIn reducer中同步写入localStorage，避免状态不一致。

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