react native：如何停止子组件在状态更改时重新渲染？答案

【问题标题】：react native : How to stop child component rerendering on state change?react native：如何停止子组件在状态更改时重新渲染？
【发布时间】：2021-05-08 13:32:50
【问题描述】：

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

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

setState('MOVING');

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

此子组件没有状态更新，但它作为其父组件重新渲染。

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

谢谢。

【问题讨论】：

标签： javascript reactjs react-native

【解决方案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

【讨论】：

【解决方案2】：

re-rendering 组件树是 react 管理得很好的事情。在性能方面，如果你正在寻找一种方法来管理不必要的重新渲染，我建议你看看一些有用的钩子，useMemo、useCallback，以及更高阶的组件React.memo。

通过这三个钩子，您可以防止子组件在父组件更新时重新渲染。

const Parent = () => {

  const [childAState, setChildAState] = useState();

  useEffect(() => {
    setChildAState('Child A Updated');
  }, []);
  
  return (
    <>
      <ChildA childAState={childAState}/>
      <ChildB />
    </>

  );

};

const ChildA = () => React.memo((props) => {

  return <h1>Child A</h1>  

});

const ChildB = () => React.memo((props) => {

  return <h1>Child B</h1>  

});

在上面的示例中，如果 Parent 中的状态发生更改并导致 ChildA 中的更新，则 ChildB 不会重新渲染。