javascript - native react : How to stop child component rerendering on state change?

Question

我正在开发一个组件，我必须在 ScrollView 滚动上更改状态，即 onScroll 函数调用。我里面也有一些子组件......当我执行 setState 父组件重新渲染时，也重新渲染到它的子组件。 有一个具有横幅和描述的子组件，我没有在此屏幕上更新它，但它也会重新渲染并创建看起来很奇怪的闪烁效果。

const [state, setState] = useState('');

setState('MOVING');

我还将该子组件从功能组件转换为 PureComponent，但它仍然重新渲染。

此子组件没有状态更新，但它会随着其父组件的重新渲染而重新渲染。

请帮助停止重新渲染此子组件，因为它没有状态更改。
任何修复它的解决方案。

谢谢。

Answer 1

您的问题与此问题相关。 How to stop re render child component when any state changed in react js?

要停止子组件的重新渲染，您可以使用 React memo，如果您使用 React hooks，则可以使用 useMemo。

当我使用 React.context 并将大量不需要的数据传递给子组件时，我也遇到了关于重新渲染子组件的问题。因此，您可以使用 useMemo 来限制当 props 更改时子组件应该引用什么来重新渲染

import React, { Component, useState, useMemo } from "react";
import { render } from "react-dom";
import Child from "./components/child.js";
import "./style.css";
 
function App() {

  const [number, setNumber] = useState(0);


  function handleOnClick() {
    setNumber(number + 1);
  }

  //memo child not rendering when state update, only render child props update.
  const memoChild = useMemo(() => <Child />, []);

  // useMemo's second arguments is state variable name. example [number]. if 'number' gets update, child component rerender will be happen.
  // const memoChild = useMemo(() => <Child />, [number]);

  return (
    <div>
      <h1>Use Memo</h1>

      <div className="box">
        <h2>Parent Component</h2>
        <h4>Number : {number}</h4>
        <button onClick={() => handleOnClick()}> Increment </button>
      </div>
 
      <div className="box">
        <h2>Normal child component </h2>
        <Child /> {/*Every state update it gets rerendered */}
      </div>

      <div className="box">
        <h2>Memo child Component </h2>
        {memoChild}
      </div>

    </div>
  );
}

render(<App />, document.getElementById("root"));

for more references