如何停止子组件在父 state 更改时重新渲染？

Question

我在App.tsx中有400文本字段。 子组件textfield.tsx中存在文本字段代码当我从父组件更改文本字段 state 时，我的孩子重新渲染 400 次

我希望hi在控制台中只打印1次而不是400次。 我该如何解决这个问题？

示例代码：

应用程序.ts

import { useState } from "react";
import MyTextField from "./components/textField.tsx/textField";

function App() {
   const [state, setState] = useState({} as any);
   const arr: any[] = []

   const fn = () => {
    for (var i = 0; i < 400; i++) {
     arr.push(i)
    }
   }
   function onChange(event: any) {
     const { name, value } = event.target;
     setState((prevState: any) => ({ ...prevState, [name]: value }));
   }
    return (
    <>
      {fn()}
      {
        arr.map((e) => <MyTextField variant='outlined' name={'n' + e} value={state['n'+ e]} onChange={onChange} />)
        }
    </>
   );

  }
 export default App;

文本字段.tsx

import { TextField, TextFieldProps, } from "@mui/material";
import React from "react";

const myClasses = ["custom1", "subvariant-hovered"] as const

type Props = Omit<TextFieldProps, "className" | "variant"> & {
  variant:  typeof myClasses[number] | TextFieldProps["variant"];
};

function MyTextField({ variant,name, ...rest }: Props) {
  return (
  <>
    {console.log('hi')}
     {myClasses.includes(variant as typeof ivpClasses[number]) ? (
       <TextField label="Search"  className={variant} {...rest}></TextField>
       ) : (
      <TextField label="Search" variant={variant as TextFieldProps["variant"]{...rest</TextField>
    )}
   </>
  )
 }
 export default React.memo(MyTextField);

问题一旦我输入w一次 console.log 打印hi 400次。 我希望 hi 为每个字符只打印1次。

在更改一个文本字段 state 时，console.log 为我们键入的每个字符打印 hi 400 次

代码沙盒： https://codesandbox.io/s/textfield-issue-m3i82e?file=/src/App.tsx

Answer 1

是的，所以这个问题比我在评论中提到的更深入。 这也是事实：对于每次重新渲染，您都在重新创建数组并调用 function 来填充它，这就是导致问题的原因。

此外，您的组件 state 是您 append 值的 object。 请记住，当 state 发生变化时，它将重新渲染所有连接到该 state 的组件。每次重新渲染都会创建一个新的 object，从而导致所有输入重新渲染。

为了解决这个问题，您可以查看useCallback function 作为 state 的包装器并呈现您的 TextInput。 我在这里创建了一个示例，它似乎提供了您想要的 output。

https://codesandbox.io/s/textfield-issue-forked-490ki2?file=/src/myTextField/myTextField.tsx