Question

我注意到一个问题，当不相关的状态/属性发生更改时，同一父级（下例中为 App ）中的每个组件都会重新呈现，从而使页面/表单的显示速度变慢。

我遵循了许多建议，例如记录事件处理程序和道具，但是无关的组件仍然会重新呈现。我很沮丧我对React没有什么了解？

[CodeSandbox]在React调试器中，启用：组件渲染时突出显示更新

import React, { useMemo, useState } from "react";
import { TextField } from "@material-ui/core";

function MyTextInput(props) {
  return (
    <TextField
      variant={"outlined"}
      onChange={props.onChange}
      value={props.value}
    />
  );
}

export default function App() {
  const [exampleTextValue1, setExampleTextValue1] = useState("");
  const [exampleTextValue2, setExampleTextValue2] = useState("");

  const handleChange1 = useMemo(
    () => (event) => setExampleTextValue1(event.target.value),
    []
  );

  const handleChange2 = useMemo(
    () => (event) => setExampleTextValue2(event.target.value),
    []
  );

  return (
    <>
      <div>
        Change me:
        <MyTextInput value={exampleTextValue1} onChange={handleChange1} />
      </div>

      <div>
        Unrelated inputs. Should not re-render:
        <MyTextInput value={exampleTextValue2} onChange={handleChange2} />
        <MyTextInput value={exampleTextValue2} onChange={handleChange2} />
        {/*  to feel the impact, copy the above line like 98 more times  */}
      </div>
    </>
  );
}

Answer 1

调试器工具在记忆组件方面存在漏洞。当您记住组件时，它们实际上并不会重新渲染，但是调试工具仍会突出显示它们（请参见https://github.com/facebook/react/issues/19778）。

要实际测试重新渲染，请将第二个输入（多次渲染）的默认状态值更改为“ test”之类的内容，然后将console.log放入已记忆的{{1} }组件，以查看实际上正在重新渲染的组件：

MyTextInput

您可以看到它在第一次渲染时为所有第二个输入打印一次“测试”值，然后在您键入第一个输入时，由于没有输入所有第二个输入const MyTextInput = React.memo((props) => { console.log(props.value); return ( <TextField variant={"outlined"} onChange={props.onChange} value={props.value} disabled={props.disabled} /> ); });记忆。

TextField不必要的重新渲染

1 个答案: