Question

我是 React 的新手，所以请解释为什么会发生这种情况（我猜是因为我正在重新创建对象数组，但我不确定也不知道如何解决此问题）以及如何解决此问题。

我认为最好展示代码，而不是谈论它，所以：

App.js

import { useState } from "react";
import Input from "./Input";

let lastId = 2;

function App() {
  const [inputsValues, setInputsValues] = useState([
    { id: 1, value: "" },
    { id: 2, value: "" },
  ]);

  const handleChange = (e, id) => {
    setInputsValues((prevState) => {
      const newState = [...prevState];
      const index = newState.findIndex((input) => input.id === id);
      newState[index].value = e.target.value;
      return newState;
    });
  };

  const addNewInput = () => {
    setInputsValues((prevState) => {
      const newState = [...prevState];
      newState.push({ id: ++lastId, value: "" });
      return newState;
    });
  };

  return (
    <div className="App">
      <div>
        <button onClick={addNewInput}>Add new input...</button>
      </div>

      {inputsValues.map((input) => (
        <div className="input-wrap">
          <Input
            key={input.id}
            id={input.id}
            value={input.value}
            handleChange={handleChange}
          />
        </div>
      ))}
    </div>
  );
}

export default App;

输入.js

import { useRef } from "react";

const Input = ({ id, value, handleChange }) => {
  const renderAmount = useRef(0);

  return (
    <>
      <div> Rendered: {renderAmount.current++}</div>
      <input
        id={id}
        type="text"
        value={value}
        onChange={(e) => handleChange(e, id)}
      />
    </>
  );
};

export default Input;

谢谢

Answer 1

似乎您只需将 Input 组件包装在 memo 中，以便它仅在其 props 更改时重新渲染。所以我在顶部导入了 memo 函数，并在作业的右侧调用了它，以便它“包装”您的组件并使其记忆化。

import { useRef, memo } from "react";

const Input = memo(({ id, value, handleChange }) => {
  const renderAmount = useRef(0);

  return (
    <>
      <div> Rendered: {renderAmount.current++}</div>
      <input
        id={id}
        type="text"
        value={value}
        onChange={(e) => handleChange(e, id)}
      />
    </>
  );
});

export default Input;

React 重新渲染不必要的组件

1 个答案: