Question

我有一个父componenet，在其中，我包括了一个带有道具的子组件。但是当父组件中的任何状态发生变化（与子组件无关）时，子组件将重新呈现。我不要这个重新渲染在每个状态变化。我们可以停下来吗？

import React, { useState } from "react";
import ReactDOM from "react-dom";
import Child from "./child";
import "./styles.css";

function App() {
  const [any_state, setAnyState] = useState(false);

  const handleClick = () => {
    setAnyState(!any_state);
  };
  return (
    <div className="App">
      Parent Page ({any_state ? "true" : "false"})
      <br />
      <button onClick={handleClick}>Click me</button>
      <Child data={"any data"} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

child.js

import React from "react";

function Child(props) {
  console.log("child component");
  return <div className="App">child Page</div>;
}

export default Child;

https://codesandbox.io/s/clever-oskar-fpxm3?fontsize=14

我不希望每次状态更改时都在控制台中显示“子组件”。

Answer 1

您要为此使用React.memo。了解更多here。

这将防止在道具未更改时重新渲染。

在您的export default Child;中使用export default React.memo(Child);代替child.js。

import React from "react";

function Child(props) {
  console.log("child component");
  return <div className="App">child Page</div>;
}

export default React.memo(Child);

Answer 2

您将必须设置一个Redux state

或者您只需隔离React Hook useState，进行良好的组件分解：）

App.js

import React, { useState } from "react";
import ReactDOM from "react-dom";
import Child from "./child";
import Parent from "./parent"; // <--------- HERE
import "./styles.css";

function App() {
  return (
    <div className="App">
      <Parent />
      <Child data={"any data"} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

parent.js

function Parent() {
  const [any_state, setAnyState] = useState(false);

  const handleClick = () => {
    setAnyState(!any_state);
  };
  return (
    <>
      Parent Page ({any_state ? "true" : "false"})
      <br />
      <button onClick={handleClick}>Click me</button>
    </>
  );
}

当React JS中的任何状态更改时，如何停止重新渲染子组件？

2 个答案: