为什么组件在通过上下文更新单个状态时完全重新渲染？

Question

我创建了一个包含两列的页面：

在一栏中的想法是显示项目列表
在另一列，我应该显示一些与所选项目相关的信息

我目前的代码是：

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。

Answer 1

你不应该嵌套组件函数。

Column1 的身份随着 App 的每次渲染而改变，因为它是一个内部函数，这使得 React 认为它需要协调一切。

将 Column1 和 Column2 移至模块级别。

Answer 2

react rerender 有两点：

状态变化
道具变化

你有一个 App Component，它是你 components 的根，它有一个 selectedItem 状态，当 item 被点击时，它会改变，所以你有一个新状态和新状态将导致重新渲染

为什么组件在通过上下文更新单个状态时完全重新渲染？

Why is the component fully re-rendering when updating a single state through context?

typescript

reactjs

react-typescript

fluent-ui

fluentui-react