使用React.memo包装子组件以避免不必要的重新渲染。

示例代码：

import React, { useState } from "react";

const ChildComponent = ({ text }) => {
  console.log("ChildComponent rendered");

  return 
{text}
;
};

const ParentComponent = () => {
  const [inputValue, setInputValue] = useState("");

  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    

      
      
    
  );
};

export default ParentComponent;

在上面的代码中，当我们在输入框中输入时，会发现子组件也被重新渲染了，即使子组件的props没有更改。

解决此问题的方法是使用React.memo来包装子组件：

const ChildComponent = React.memo(({ text }) => {
  console.log("ChildComponent rendered");

  return 
{text}
;
});

现在，即使父组件重新渲染，只要子组件的props没有更改，子组件就不会重新渲染。