缘由也很复杂，antd的ConfigProvider并没有做什么优化，它每一次给Context的value都是一个全新的对象（虽然内容并没有变化），这就会招致一切关联的组件都触发更新（虽然毫有意义）。这在你的系统中的下场就是你拼合地用memo、PureComponent之类的办法优化本人写的组件，但那外面的antd组件们却愉快地渲染到停不上去。
所以第一条阅历是：好 好梳理Context的上下关系，把那些实际上不会变的放到最外面，把频繁会变的往里放。
什么是不会变的呢，比如Locale、Constant，以及一些系统级的做依赖注入的，这些往往整个生命周期都不会变。
然后是相似CurrentUser这样系统启动的时分央求一次数据的，会从null变成固定的值，随后就不会变了，这一类也尽量往外放。
最后像是Router这样的，会频繁变化的，要放到最外面，以免由于它的更新把其它不怎样变的Context也带出来。
关于粒度来看一个十分经典的Context：
const DEFAULT_VALUE = {
props: null,
openGlobalModal: () => undefined,
closeGlobalModal: () => undefined,
};
const GlobalModalContext = createContext(DEFAULT_VALUE);
const GlobalModalContextProvider = ({children}) => {
const [props, setProps] = useState(null);
const closeGlobalModal = useCallback(
() => setProps(null),
[]
);
const contextValue = useMemo(
() => {
return {
props,
closeGlobalModal,
openGlobalModal: setProps,
};
},
[props, closeGlobalModal, setProps]
);
return (
<GlobalModalContext.Provider value={contextValue}>
{children}
</GlobalModalContext.Provider>
);
};
用一个Context来一致地管理全局单例的对话框，也是一种比较常见的玩法。假设你这么用：
const EditUserLabel = ({id}) => {
const {openGlobalModal} = useContext(GlobalMoadlContext);
const edit = useCallback(
() => openGlobalModal({title: '编辑用户', children: <UserForm id={id} />}),
[openGlobalModal, id]
);
return <span onClick={edit}>编辑</span>;
};
const columns = [
// ...
{
title: '操作',
key: 'action',
dataIndex: 'id'
render: id => <EditUserLabel id={id} />,
}
]
const UserList = ({dataSource}) => (
<Table rowKey="id" dataSource={dataSource} columns={columns} />
);
在一个表格里每一行放一个“编辑”标签，然后在全局放一个对话框：
const GlobalModal = () => {
const {props} = useContext(GlobalMoadlContext);
return !!props && <Modal visible {...props} />;
};
你就会诧异地发现， 每当你编辑一个用户（或在其它中央触发对话框），表格中每一行的编辑标签都会更新。
缘由很容易剖析， 由于当你翻开对话框的时分，props是变化的，因此contextValue也变化了，所以虽然编辑标签只用了openGlobalModal这个永远不会变的东西，却也硬生生被带着渲染了起来。
假设想追求更少地渲染，就要关注第二条阅历： 一个Context中的东西往往并不一同被运用，将它们按运用场景分开，特别是要将多变的和不变的分开。
像下面的代码，就可以优化成这样：
const GlobalModalPropsContext = createContext(null);
const DEFAULT_ACTION = {
openGlobalModal: () => undefined,
closeGlobalModal: () => undefined,
};
const GlobalModalActionContext = createContext(DEFAULT_ACTION);
const GlobalModalContextProvider = ({children}) => {
const [props, setProps] = useState(null);
const closeGlobalModal = useCallback(
() => setProps(null),
[]
);
const actionValue = useMemo(
() => {
return {
closeGlobalModal,
openGlobalModal: setProps,
};
},
[closeGlobalModal, setProps]
);
return (
// 留意第一条阅历，变得少的在外面
<GlobalModalActionContext.Provider value={actionValue}>
<GlobalModalPropsContext.Provider value={props}>
{children}
</GlobalModalPropsContext.Provider>
</GlobalModalActionContext.Provider>
);
};
只需依据实践的需求，去拜访2个不同的Context，就可以做到最优化的属性粒度和最少的渲染。
当然我也建议不要直接暴露Context本身，而是将它按照运用场景暴露成若干个hook，这样你可以在一末尾不做特别的优化，当功用出现瓶颈的时分再拆Context，只需求修正hook的完成就能做到对外的兼容。
总结关注在运用中运用的Context的顺序，让不变的在外层，多变的在内层。
Context中的内容可以按运用场景和变与不变来拆分红多个更细粒度匠，以增加渲染。
【编辑引荐】
从零开发一款图片编辑器Mitu-Dooring
苹果 iOS 15/iPadOS 15 开发者预览版/公测版 Beta 7 发布
天价耶稣像是达·芬奇画的？美国夫妇开发AI顺序，CNN检测艺术伪造
了解 Linux 文件的颜色代码
Windows 11 in React：经过阅读器更快、更安全地体验新系统
(责任编辑：admin)