reactjs - 为什么通过上下文更新单个状态时组件会完全重新渲染?
问题描述
我创建了一个包含两列的页面:
- 在一列中的想法是显示项目列表
- 在另一列中,我应该显示一些与所选项目相关的信息
我到目前为止的代码是:
import { INavLink, INavLinkGroup, INavStyles, Nav } from "@fluentui/react";
import React, { createContext, useContext, useState } from "react";
interface HistoryTtem {
id: string;
}
interface AppState {
selectedItem: string | undefined;
updateSelectedItem: (value: string | undefined) => void;
items: Array<HistoryTtem>;
}
const AppContext = createContext<AppState>({
selectedItem: undefined,
updateSelectedItem: (value: string | undefined) => {},
items: []
});
const App = () => {
const Column1 = () => {
const rootState: AppState = useContext(AppContext);
const getNavLinks: Array<INavLink> = rootState.items.map((item) => ({
name: item.id,
key: item.id,
url: ""
}));
const groups: Array<INavLinkGroup> = [
{
links: getNavLinks
}
];
const navStyles: Partial<INavStyles> = {
root: {
boxSizing: "border-box",
border: `1px solid #eee`,
overflowY: "auto"
}
};
const onItemClick = (
e?: React.MouseEvent<HTMLElement>,
item?: INavLink
) => {
if (item && item.key) {
rootState.updateSelectedItem(item.key);
}
};
return (
<Nav
onLinkClick={onItemClick}
selectedKey={rootState.selectedItem}
ariaLabel="List of previously searched transactions"
styles={navStyles}
groups={groups}
/>
);
};
const Column2 = () => {
return <div>aaa</div>;
};
const [historyItems, setHistoryItems] = useState<Array<HistoryTtem>>([
{
id: "349458457"
},
{
id: "438487484"
},
{
id: "348348845"
},
{
id: "093834845"
}
]);
const [selectedItem, setSelectedItem] = useState<string>();
const updateSelectedItem = (value: string | undefined) => {
setSelectedItem(value);
};
const state: AppState = {
selectedItem: selectedItem,
updateSelectedItem: updateSelectedItem,
items: historyItems
};
return (
<AppContext.Provider value={state}>
<div>
<Column1 />
<Column2 />
</div>
</AppContext.Provider>
);
};
export default App;
如您所见,我有一个根状态,它将用于驱动从第一列内部触发的第二列的更新。但它不起作用。当我单击一个项目时,第一列中的整个组件正在重新渲染,而它应该只更改所选项目。
请在此处找到CodeSandbox。
解决方案
你不应该嵌套组件函数。
Column1
因为它是一个内部函数,所以每次渲染的变化的身份,App
这使得 React 认为它需要协调一切。
向上移动Column1
到Column2
模块级别。
推荐阅读
- python - 如何子类化 pandas-dataframe 以具有某些列名?
- jsf - 我的自定义 ExceptionHandler 不适用于 Ajax 请求
- haskell - 在haskell语言的谓词中绑定let的问题?
- c++ - 概念中的嵌套类型绑定在 GCC 和 clang 上失败,但在 msvc 上失败
- php - Phpspreadsheet excel解析抛出500内部服务器错误
- mongodb - Spring Boot API 响应的变化
- bash - 在 bash 脚本中将 CSV 文件不均匀地拆分为多个文件
- c# - 销毁命令不适用于粒子系统
- angular - 所有项目的 MAT_RADIO_DEFAULT_OPTIONS
- node.js - Discord JS Cooldown 与验证