时间戳

首页 > 解决方案 > 为什么两个按钮都会重新渲染？

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

具有如下定义的 3 个子组件：

标题.js

import React from 'react'

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

export default React.memo(Title)

计数.js

import React from 'react'

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

export default React.memo(Count)

按钮.js

import React from 'react'

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

export default React.memo(Button)

标签： javascriptreactjs

解决方案

我会在这里解释

首先，每当您更新本地状态时，您的渲染函数都会重新运行，因此您的所有子组件都将重新渲染

当您单击年龄按钮时，年龄按钮会重新渲染，因为道具发生变化，工资按钮会重新渲染，因为incrementSalary如果您不使用 a 包装，则将其视为新功能useCallback，因此新道具被传递给Button因此重新渲染

但是，您的工资计数组件的道具count={salary}从未改变，因此react.memo将阻止它重新渲染。

推荐阅读