React 功能组件没有以相同的状态或道具重新渲染[重复]答案

【问题标题】：React functional component has not re-render with same state or props [duplicate]React 功能组件没有以相同的状态或道具重新渲染[重复]
【发布时间】：2021-02-16 22:31:05
【问题描述】：

在这种情况下，我正在为子组件发送相同的道具和状态，所以...为什么没有React.memo() 不重新渲染并且这些日志只显示一次？

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

const Child = ({ num }) => {
  const [count, setCount] = useState(0);

  return (
    <>
      {console.log('Child rendered')}
      {count}<br />
      {num}<br />
      <button onClick={() => setCount(count)}>Add</button>
    </>
  )
}

const App = () => {
  const [num, setNum] = useState(0);

  return (
    <>
      {console.log('App rendered')}
      <Child num={num} />
      <button onClick={() => setNum(num)}>Add</button>
    </>
  )
}

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

【问题讨论】：

@Quentin 我认为重复标记并不正确。有细微的差别。这没什么大不了的，因为我认为这个问题应该被关闭，无论是“不可重现还是由错字引起”，但我发现重复项有点误导，尤其是如果我是 OP

标签： javascript reactjs

【解决方案1】：

子组件不会重新渲染，因为对num 的状态引用永远不会改变。它始终设置为相同的参考。 react 使用浅引用相等来协调 state 和 prop 更新。

const App = () => {
  const [num, setNum] = useState(0);

  return (
    <>
      {console.log('App rendered')}
      <Child num={num} />
      <button onClick={() => setNum(num)}>Add</button> // <-- same object reference
    </>
  )
}

【讨论】：

【解决方案2】：

您没有更改任何值

() => setNum(num)

与

相同

() => setNum(0)

与初始状态（0）相同，因此不会发生重新渲染

【讨论】：