当className更改时，React子级重新渲染

问题描述

当父级的className更改时，反应子级重新渲染。

library(shiny)
library(shinydashboard)
library(reactable)
library(stringr)

if (interactive()) {
  
  ui <- shinyUI(basicPage(
    Box(title = "mtcars data",width = 12,reactableOutput("car_tab")
    )
  ))
  
  server <- function(input,output,session) {
    output$car_tab <- renderReactable({
      
      df <- mtcars
      df$make <- str_extract(rownames(df),"[[:alpha:]]+")
      df$model <- rownames(df)
      rownames(df) <- NULL
      df <- df[,c("make","model","mpg","cyl","disp","hp","drat","wt","qsec","vs","am","gear","carb")]
      
      reactable(df,groupBy = c("cyl","make"),columns = list(
                  cyl = colDef(name = "Number of cylinders"),am = colDef(name = "Transmission",aggregate = "frequency"),make = colDef(name = "Make",model  = colDef(name = "Model",aggregate = "unique"),mpg = colDef(name = "Miles/gallon",aggregate = "mean",format = colFormat(digits = 2)),disp = colDef(name = "displacement"),hp = colDef(name = "Horsepower"),drat = colDef(name = "Rear axle ratio"),wt = colDef(name = "Weight"),qsec = colDef(name = "1/4 mile time"),vs = colDef(name = "Engine",aggregate = "count"),gear = colDef(name = "Number of forward gears"),carb = colDef(name = "Number of carburetors")
                )
      )
    })
  }
  
  shinyApp(ui = ui,server = server)
  
}

当import React from 'react'; import { useSelector } from 'react-redux'; import items from './ItemsList.js'; import Item from './Item'; import './style.scss'; export default () => { const isdisabled = useSelector((state) => state.Items.isdisabled); return ( <div className={`container items-container col ${isdisabled ? 'disabled' : ''}`}> <div className="row items"> {items.map((obj) => ( // All these items re-renders,when parent container className changed <Item key={obj.id} obj={obj} /> ))} </div> </div> ); };更改为isdisabled并且true样式追加到父disabled时，子container元素将重新呈现。

如何在不重新渲染子元素的情况下将样式/类名附加到父对象？

解决方法

<Items>

可以是纯组件。

或

只需在Items内使用shouldComponentUpdate()生命周期钩子即可。

对于您所说的是对的，实际上只发生了一件事情，那就是 isDisabled是该父组件的状态属性。

并且由于您正在使用Redux并调用useSelector((state)=>{})，因此这实际上将AppState绑定到Component状态。因此，从概念上讲，通过使用useSelector()可以将isDisabled视为状态属性。按照与React的约定，任何状态更改的组件都必须重新呈现。因此，parent实际上就是重新渲染。

这是一个重要的报价，它解决了Hooks文档中的所有问题：

选择器大约等效于mapStateToProps参数，以在概念上进行连接

以下一些参考资料可帮助您进一步了解本主题：

解决了将React.memo添加到子项组件的问题。

html javascript reactjs reactjs render