如何停止子組件在父 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