Javascript 为什么两个按钮都得到重新渲染？

在下面的程序中，只要我单击任何按钮，另一个按钮也会重新渲染，即使我使用了

React.memo（）

。另外，只有其他按钮获得重新渲染，而不是其他计数。为什么？ 我有这样一个父组件：

import React, { useState } from 'react'
import Count from './Count'
import Button from './Button'
import Title from './Title'

function ParentComponent() {
    const [age, setAge] = useState(25)
    const [salary, setSalary] = useState(50000)

    const incrementAge = () => {
        setAge(age + 1)
    }

    const incrementSalary = () => {
        setSalary(salary + 1000)
    }

    return (
        <div>
            <Title />
            <Count text="Age" count={age} />
            <Button handleClick={incrementAge}>Increment Age</Button>
            <Count text="Salary" count={salary} />
            <Button handleClick={incrementSalary}>Increment Salary</Button>
        </div>
    )
}

export default ParentComponent

import React，{useState}来自“React”
从“./Count”导入计数
从“./按钮”导入按钮
从“./Title”导入标题
函数ParentComponent（）{
常数[年龄，设置]=useState（25）
常数[工资，固定工资]=使用状态（50000）
常量增量=（）=>{
设置（年龄+1）
}
常量增量工资=（）=>{
固定工资（工资+1000）
}
返回(
增龄
增薪
)
}
导出默认父组件

有3个子组件，定义如下：

Title.js

import React from 'react'

function Title() {
  console.log('Rendering Title')
  return (
    <h2>
      useCallback Hook
    </h2>
  )
}

export default React.memo(Title)

import React from 'react'

function Count({ text, count }) {
    console.log(`Rendering ${text}`)
    return <div>{text} - {count}</div>
}

export default React.memo(Count)

import React from 'react'

function Button({ handleClick, children }) {
  console.log('Rendering button - ', children)
  return (
    <button onClick={handleClick}>
      {children}
    </button>
  )
}

export default React.memo(Button)

从“React”导入React
函数名（）{
console.log（'呈现标题'）
返回(
使用回调挂钩
)
}
导出默认反应备忘录（标题）

Count.js

import React from 'react'

function Title() {
  console.log('Rendering Title')
  return (
    <h2>
      useCallback Hook
    </h2>
  )
}

export default React.memo(Title)

import React from 'react'

function Count({ text, count }) {
    console.log(`Rendering ${text}`)
    return <div>{text} - {count}</div>
}

export default React.memo(Count)

import React from 'react'

function Button({ handleClick, children }) {
  console.log('Rendering button - ', children)
  return (
    <button onClick={handleClick}>
      {children}
    </button>
  )
}

export default React.memo(Button)

从“React”导入React
函数计数（{text，Count}）{
log（`Rendering${text}`）
返回{text}-{count}
}
导出默认反应备忘录（计数）

Button.js

import React from 'react'

function Title() {
  console.log('Rendering Title')
  return (
    <h2>
      useCallback Hook
    </h2>
  )
}

export default React.memo(Title)

import React from 'react'

function Count({ text, count }) {
    console.log(`Rendering ${text}`)
    return <div>{text} - {count}</div>
}

export default React.memo(Count)

import React from 'react'

function Button({ handleClick, children }) {
  console.log('Rendering button - ', children)
  return (
    <button onClick={handleClick}>
      {children}
    </button>
  )
}

export default React.memo(Button)

从“React”导入React
功能按钮（{handleClick，children}）{
console.log（'呈现按钮-'，子级）
返回(
{儿童}
)
}
导出默认反应备忘录（按钮）

我将在这里解释

首先，无论何时更新本地状态，渲染函数都将重新运行，以便所有子组件都将重新渲染

当您单击年龄按钮时，年龄按钮因道具更改而重新渲染，薪资按钮因

incrementSalary

而重新渲染，如果您没有使用

useCallback

包装，则将其视为新函数，因此新道具传递给

按钮

，从而重新渲染

---

但是，您的工资计数组件的道具

count={salary}

从未更改，因此

react.memo

将阻止它重新渲染。

您需要在

useCallback

中包装每个函数，否则它在重新渲染时总是创建函数的新实例，并且func！==func，因此

react.memo

将视为存在差异props@YiZhou它将创建新的函数实例，但按钮组件是相同的。此外，count component有不同的变量。找到了一篇完美的文章，详细描述了您在这里拥有的内容以及为什么需要使用callback@YiZhou，但我不明白count component为什么没有重新呈现