React 函数组件渲染 Renders on focus

Question

我在重新渲染时遇到问题。每次用户关注输入时，它都会重新渲染，即使是在输入上。每次用户键入一个词时，功能组件都会重新呈现，但我有大数据，因此一切都很慢。

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [containerID, setContainerID] = useState();
  const [searchVal, setSearchVal] = useState();

  return (
    <div className="App">
      {console.log("its rendering again")}
      <input
        onInput={(e) => setSearchVal(e.currentTarget.value)}
        onFocus={(e) => setContainerID(e.currentTarget.id)}
        id={1}
      />
      <input
        onInput={(e) => setSearchVal(e.currentTarget.value)}
        onFocus={(e) => setContainerID(e.currentTarget.id)}
        id={2}
      />
      <input
        onInput={(e) => setSearchVal(e.currentTarget.value)}
        onFocus={(e) => setContainerID(e.currentTarget.id)}
        id={3}
      />
      <input
        onInput={(e) => setSearchVal(e.currentTarget.value)}
        onFocus={(e) => setContainerID(e.currentTarget.id)}
        id={4}
      />
    </div>
  );
}

没有一个功能开始工作只是在每个焦点和输入上呈现功能 return 部分。任何想法如何停止这些不需要的渲染？这也是代码片段：

https://codesandbox.io/s/funny-germain-t0h8n?file=/src/App.js:0-962

Answer 1

更改状态会导致重新呈现。您可以使用 useRef 来避免此问题。您将在 containerId.current 和 searchValue.current.

中获得值

export default function App() {

    const containerId = useRef();
    const searchValue = useRef();
    
    return (
      <input
            onInput={(e) => searchValue.current = e.currentTarget.value}
            onFocus={(e) => containerId.current = e.currentTarget.id}
            id={1}
          />
    );

}

React 函数组件渲染 Renders on focus

React function component renders Renders on focus

performance

reactjs

react-hooks

react-functional-component