为啥反应显示组件更新但控制台不更新？

Posted 2023-03-30

【中文标题】为啥反应显示组件更新但控制台不更新？

【英文标题】：Why react show that components update but console not?为什么反应显示组件更新但控制台不更新？

【发布时间】：2019-07-16 03:46:55

【问题描述】：

我创建了一个简单的 react redux 应用。 在 Google chrome react 开发工具中，我检查了“突出显示更新”。然后单击任何显示所有组件已更新的按钮，但“AddButton”中的控制台消息不显示任何内容。 错误控制台，反应开发工具还是我？

// index.js
import React from "react";
import ReactDOM from "react-dom";

import App from "./App";
import  Provider  from "react-redux";
import  createStore  from "redux";

const reduser = (state = [], action) => 
  switch (action.type) 
    case "ADD_ITEM":
      return [...state,  text: action.text ];
    case "REMOVE_ITEM":
      return state.filter(t => t.text !== action.text);
    default:
      return state;
  
;

const store = createStore(
  reduser,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

ReactDOM.render(
  <Provider store=store>
    <App />
  </Provider>,
  document.getElementById("root")
);

//App.js

import React,  Component  from "react";
import AddButton from "./comps/AddButton";
import ListContainer from "./comps/ListContainer";

class App extends Component 
  render() 
    return (
      <div className="App">
        <h1>Simple app</h1>
        <AddButton />
        <ListContainer />
      </div>
    );
  


export default App;

//comps/AddButton.js
import React,  Component  from "react";
import  connect  from "react-redux";

const addItem = () => ( type: "ADD_ITEM", text: Date.now() );

class AddButton extends Component 
  componentDidUpdate(prevProps, prevState, snapshot) 
    console.log("Update");
  

  render() 
    return <button onClick=this.props.addItem>add button</button>;
  


export default connect(
  null,
   addItem 
)(AddButton);

//comps/ListContainer.js
import React,  Component  from "react";
import  connect  from "react-redux";
import ListItem from "./ListItem";

class ListContainer extends Component 
  render() 
    return (
      <ul>
        this.props.items.map(t => (
          <ListItem key=t.text text=t.text />
        ))
      </ul>
    );
  


const mapStateToProps = state => 
  return  items: state ;
;

export default connect(mapStateToProps)(ListContainer);

//comps/ListItem.js
import React from "react";
import  connect  from "react-redux";
const removeItem = text => ( type: "REMOVE_ITEM", text );
const ListItem = props => 
  return (
    <li>
      <button onClick=() => props.removeItem(props.text)>props.text</button>
    </li>
  );
;

export default connect(
  null,
   removeItem 
)(ListItem);

Lorem ipsum dolor sit amet，consectetur adipisicing elit。 Asperiores corporis culpa deleniti dolore dolores eaque eligendi eum fugit in, itaque iusto maiores natus nostrum placeat quisquam similique tempore veniam voluptatum。

【问题讨论】：

AddButton 可能永远不会更新，因此永远不会调用 componentDidUpdate。尝试将其移入：ComponentDidMount 或 getDerivedStateFromProps 取决于您的要求。据我所知，它是 ListContainer 组件，应该在按钮单击时更新。

我会尽量理解它是如何工作的，以进一步调试。如果 react highlight 是假的，那意味着需要找到其他东西。

【参考方案1】：

对于 AddButton 组件，mapStateToProps 为空。也没有从父级接收任何道具，当您单击按钮时，它会更新存储中的值，但由于该更新，App 组件不会重新渲染，因为它没有订阅任何状态更新，因此 AddButton因此不会重新渲染。

再次，因为它也没有订阅商店中的任何更新，它也不会因为商店更新而重新渲染。

将重新渲染的组件是 ListContainer 和 ListItem，因为 ListContainer 订阅了存储更新，因此它将更新导致其所有子级重新渲染，前提是它们没有实现 shouldComponentUpdate 和扩展 React.PureComponent(matters仅当组件的道具没有改变时）

【讨论】：

我想，但是如果all 突出显示，如何检测哪些组件更新

你是在 react v15 还是 v16

最后反应 v16.8.3

所以这里发生的情况是，当商店更新时，所有容器都会被触发，这可能就是您看到突出显示更新突出显示的原因。但是内部连接确保它仅触发实际订阅更改状态的组件的重新渲染