我有一个react应用程序，它使用Material UI v5。我没有任何样式，使用默认的TextField组件来测试呈现问题。在我的页面，我只有一个Typography,Breadcrumb,IconButton和TextField。为了重复这个问题，我放置了一个受控制的TextField和大约六个其他不受控制的TextField。当我开始在受控的TextField上写作时，页面内的所有组件都开始重新呈现。如果我开始输入很多/更快，它有时会冻结或需要一段时间(如500-1000ms)来渲染TextField中的文本。基本上它会冻结一秒或半秒。
这是我所拥有的复制演示。我真正的项目也是使用create-react-app。我的react应用中也有同样的东西，它会渲染所有东西。这是一张照片的链接。我使用了react developer工具profiler"在组件渲染时突出显示更新"。选择。
My Environment details:
System:
OS: Windows 10 10.0.19043
Binaries:
Node: 14.17.4 - C:Program Filesnodejsnode.EXE
Yarn: 1.22.11 - ~AppDataRoamingnpmyarn.CMD
npm: 7.20.3 - C:Program Filesnodejsnpm.CMD
Browsers:
Chrome: Not Found
Edge: Spartan (44.19041.1023.0), Chromium (93.0.961.52)
npmPackages:
@emotion/react: ^11.4.1 => 11.4.1
@emotion/styled: ^11.3.0 => 11.3.0
@mui/core: 5.0.0-alpha.47
@mui/icons-material: ^5.0.0 => 5.0.0
@mui/lab: ^5.0.0-alpha.47 => 5.0.0-alpha.47
@mui/material: ^5.0.0 => 5.0.0
@mui/private-theming: 5.0.0
@mui/styled-engine: 5.0.0
@mui/styled-engine-sc: ^5.0.0 => 5.0.0
@mui/styles: ^5.0.0 => 5.0.0
@mui/system: 5.0.0
@mui/types: 7.0.0
@mui/utils: 5.0.0
@types/react: 17.0.22
react: ^17.0.2 => 17.0.2
react-dom: ^17.0.2 => 17.0.2
styled-components: ^5.3.1 => 5.3.1
这是反应行为吗?当一个组件更新其状态时，我可以停止重新呈现/更新所有组件吗?
React组件是使用分解规则生成的。每个组件可以有一个父组件和一个子组件(如果不是单独的)，并且可以像下图所示的那样建模。React组件树
当在父组件中更新状态时，为了更新屏幕，将呈现该组件，并在其中呈现所有子组件。
如果你想在类组件中防止这种行为，你需要使用shouldComponentUpdate，你可以在这里读取它的文档，如果你想在函数组件中处理它，你可以使用useMemo钩子，你可以在这里读取它的文档