最近在 React 项目遇到了一个问题, Web App 有一个登录弹窗, 在没有登录的情况下进行一些需要用户信息的操作, 首先会弹出登录弹窗.
然而这种操作分布在各个组件, 所以在 redux 保留一个变量 loginDialogVisible, 通过 action 控制登录弹窗是否展示.
// reducer
import TYPE from 'path/type';
export const showLoginDialog = () => ({
type: TYPE.SHOW_LOGIN_DIALOG,
});
export const hideLoginDialog = () => ({
type: TYPE.HIDE_LOGIN_DIALOG,
});
const initialState = {
// ...
loginDialogVisible: false,
};
export default (state = initialState, { type, payload }) => {
switch (type) {
// ...
case TYPE.SHOW_LOGIN_DIALOG:
return {
...state,
loginDialogVisible: true,
};
case TYPE.HIDE_LOGIN_DIALOG:
return {
...state,
loginDialogVisible: false,
};
// ...
}
};
// 登录弹窗
import React from 'react';
import { useSelector, shallowEqual } from 'react-redux';
const LoginDialog = () => {
const visible = useSelector(
(state) => state.loginDialogVisible,
shallowEqual,
);
// ...
return visible && <div>...</div>;
};
export default LoginDialog;
// 需要弹出登录弹窗的组件
import React from 'react';
import { useDispatch } from 'react-redux';
import { showLoginDialog } from 'path/reducer';
const Component = () => {
const dispatch = useDispatch();
const onShowLoginDialog = () => dispatch(showLoginDialog());
return (
<button type="button" onClick={onShowLoginDialog}>
show login dialog
</button>
);
};
export default Component;
随着功能的迭代, 需要弹出登录弹窗的组件越来越多, 所以下面的代码会重复出现.
import { useDispatch } from 'react-redux';
import { showLoginDialog } from 'path/reducer';
// ...
const dispatch = useDispatch();
const onShowLoginDialog = () => dispatch(showLoginDialog());
// ...
为了减少重复代码, 可以提取成一个自定义 hooks.
// useShowLoginDialog.js
import { useDispatch, useCallback } from 'react-redux';
import { showLoginDialog } from 'path/reducer';
export default () => {
const dispatch = useDispatch();
const onShowLoginDialog = useCallback(() => dispatch(showLoginDialog()), [
dispatch,
]);
return onShowLoginDialog;
};
在需要弹出弹窗的组件移除重复的代码.
import React from 'react';
import useShowLoginDialog from 'path/useShowLoginDialog';
const Component = () => {
const onShowLoginDialog = useShowLoginDialog();
return (
<button type="button" onClick={onShowLoginDialog}>
show login dialog
</button>
);
};
export default Component;
虽然上面的解决方案已经挺好, 但有一个问题, loginDialogVisible 这个状态有且只有 LoginDialog 使用, 应属于 LoginDialog 的 局部状态, 没有必要放在 redux 影响全局状态, 放在 redux 的目的只是为了其他组件能够控制这个状态.
怎么使 loginDialogVisible 成为 LoginDialog 的局部状态, 并且能在其他组件控制这个状态?
答案就是通过 事件.
首先实现一个全局事件触发器, 当然, 也可以选用一些非常受欢迎的库, 比如 eventemitter3.
为了重复造轮子(其实是为了减小包体积), 下面以自定义全局事件触发器为例, 原理是利用浏览器自身的 CustomEvent 接口.
// eventemitter.js
// 自定义事件类型
export const TYPE = {
SHOW_LOGIN_DIALOG: 'show_login_dialog',
};
export default {
on: (type, listener) => document.addEventListener(type, listener),
off: (type, listener) => document.removeEventListener(type, listener),
/**
* payload就是在触发事件的同时携带数据
* 但是在登录弹窗这个例子里没有用到
* 通过event.detail可以获取到payload
*/
emit: (type, payload) =>
document.dispatchEvent(
new CustomEvent(type, {
detail: payload,
bubbles: false,
cancelable: false,
}),
),
};
// 登录弹窗
import React, { useState, useEffect } from 'react';
import eventemitter, { TYPE } from 'path/eventemitter';
const LoginDialog = () => {
const [visible, setVisible] = useState(false);
useEffect(() => {
const listener = () => setVisible(true);
eventemitter.on(TYPE.SHOW_LOGIN_DIALOG, listener);
return () => eventemitter.off(TYPE.SHOW_LOGIN_DIALOG, listener);
}, []);
return visible && <div>...</div>;
};
export default LoginDialog;
// 触发弹窗的组件
import React, { useCallback } from 'react';
import eventemitter, { TYPE } from 'path/eventemitter';
const Component = () => {
const onShowLoginDialog = useCallback(
() => eventemitter.emit(TYPE.SHOW_LOGIN_DIALOG),
[],
);
return (
<button type="button" onClick={onShowLoginDialog}>
show login dialog
</button>
);
};
export default Component;
这样, 使 loginDialogVisible 成为 LoginDialog 的局部状态, 其他组件依然能够控制 loginDialogVisible, 并且完全脱离了 redux 的依赖.
通过事件机制, 可以很大程度上分离 react 中的状态, 不仅可以分离全局状态, 而且可以提升 React 性能.
import React, { useState } from 'react';
import Increase from 'path/increase';
import Decrease from 'path/decrease';
import Display from 'path/display';
const App = () => {
const [count, setCount] = useState(0);
const onIncrease = () => setCount((c) => c + 1);
const onDecrease = () => setCount((c) => c - 1);
return (
<div>
<Display count={count} />
<Increase onIncrease={onIncrease} />
<Decrease onDecrease={onDecrease} />
</div>
);
};
上面点击 Increase 组件使 count + 1, 点击 Decrease 组件使 count - 1, Display 组件负责展示 count.
因为状态 count 属于根组件, 所以无论点击 Increase 或者 Decrease 组件导致的变更, 三个子组件都会重新执行各自的 render 方法. 然而实际上无论 count 怎么变, 我们都知道 Increase 和 Decrease 的 render 结果都不会变, 所以重新执行 render 是没有必要的, 唯一需要更新的只有 Display 组件.
当然, 通过 React 自带的一些工具方法可以达到性能优化的目的.
import React, { useCallback, useMemo } from 'react';
// ...
const onIncrease = useCallback(() => setCount((c) => c + 1), []);
const onDecrease = useCallback(() => setCount((c) => c - 1), []);
return (
<div>
<Display count={count} />
{useMemo(
() => (
<Increase onIncrease={onIncrease} />
),
[onIncrease],
)}
{useMemo(
() => (
<Decrease onIncrease={onIncrease} />
),
[onDecrease],
)}
</div>
);
通过 useCallback 能够保证 onIncrease 和 onDecrease 在组件存活周期内不变, 而通过 useMemo 可以缓存 Increase 和 Decrease 的渲染结果, 但是 useCallback 和 useMemo 依然要消耗性能.
通过事件机制, 可以更简单地实现性能优化.
Increase 和 Decrease 组件保持不变, 将状态 count 放到 Display 中, 通过事件传递 count 的变更.
// app.js
import React, { useState } from 'react';
import eventemitter from 'path/eventemitter';
import Increase from 'path/increase';
import Decrease from 'path/decrease';
import Display from 'path/display';
const App = () => {
const onIncrease = () => eventemitter.emit(TYPE.INCREASE);
const onDecrease = () => eventemitter.emit(TYPE.DECREASE);
return (
<div>
<Display />
<Increase onIncrease={onIncrease} />
<Decrease onDecrease={onDecrease} />
</div>
);
};
// display.js
import React, { useState, useEffect } from 'react';
import eventemitter from 'path/eventemitter';
const Display = () => {
const [count, setCount] = useState(0);
useEffect(() => {
const increaseListener = () => setCount((c) => c + 1);
const decreaseListener = () => setCount((c) => c - 1);
eventemitter.on(TYPE.INCREASE, increaseListener);
eventemitter.on(TYPE.DECREASE, decreaseListener);
return () => {
eventemitter.off(TYPE.INCREASE, increaseListener);
eventemitter.off(TYPE.DECREASE, decreaseListener);
};
}, []);
return <div>{count}</div>;
};
export default Display;
这样, 无论 count 怎么发生变更, 只会 rerender Display 组件. 当然, 为了节省内存, 可以合并 INCREASE 和 DECREASE, 通过 eventemitter 的 payload 表示增加还是减少.
// app.js
const onIncrease = () => eventemitter.emit(TYPE.COUNT_CHANGE, 1);
const onDecrease = () => eventemitter.emit(TYPE.COUNT_CHANGE, -1);
// display.js
useEffect(() => {
const listener = (event) => setCount((c) => c + event.detail);
eventemitter.on(TYPE.COUNT_CHANGE, listener);
return () => eventemitter.off(TYPE.COUNT_CHANGE, listener);
}, []);
最后, 要记得移除事件监听器.