在 React 中，为什么更改非状态 props 不会提示重新渲染？

Question

我在互联网上发现了这个“只要状态或道具发生变化，反应组件就会自动重新渲染”，但是如果在道具中我传递了与状态不同的东西，它不会引发渲染，即使道具已经改变在时间里。

在此代码中，我传递了一个 prop 而不使用状态

家长

import React from "react";
import Child from "./child";

export default function Parent() {
  let count = 0;

  setInterval(() => {
    count++;
    console.log(count);
  }, 1000);

  return <Child count={count} />;
}

孩子

import React from "react";

export default function Child(props) {
  console.log("render from child");        //console.log once

  return <h1>{props.count}</h1>;
}

谢谢你帮助我解决我心中的混乱

Answer 1

几天前，我在教一名大三学生用 React 进行记忆，我想出了一种描述性的方法来展示重新渲染的工作原理。

让我们创建一个计数器组件

const Counter = () => {

const [count, setCount] = React.useState(0)


const increment = () => setCount(count +1)

console.log("render from counter")

return (
      <>
          <h1> Counter: {count} </h1>
          <button onClick={increment}>Add count</button>
     </>

}

所以基本上，我有一个计数器组件，每次单击按钮时都会增加计数。

但还要注意那里的控制台日志。每次我单击按钮时，它都会更改状态，这将使组件重新渲染，从而执行 console.log 函数。

现在我们知道，只要状态发生变化，组件就会重新渲染，但它也可以在 props 发生变化时重新渲染。

让我告诉你我的意思。

const Counter = () => {

const [count, setCount] = React.useState(0)


const increment = () => setCount(count +1)

console.log("render from counter")

return (
      <>
          <h1> Counter: {count} </h1>
          <button onClick={increment}>Add count</button>
         <ChildCounter count={count} />
     </>

}


// Child component
const ChildCounter = ({count}) => {

console.log("render from child")

return (
      <>
          <h1> our counter is now at : {count} </h1>
     </>

}

这里我有另一个组件，它是计数器组件的子组件。我将 count 作为道具传递给子组件。

每当父组件（即计数器）中的计数发生变化时，子组件就会重新渲染。

这是因为两件事。一是 props 发生了变化，二是因为父组件在重新渲染时会强制其子组件重新渲染。

现在您会看到，当状态更改、道具更改和父级更改时，React 中会发生重新渲染。

我们可以使用记忆来阻止孩子不必要的重新渲染，我在这里不会讨论这一点。

我希望这个能帮上忙。

请原谅我缺乏缩进和丑陋的 as* 代码。