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

Question

我创建了一个简单的 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。

Answer 1

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

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

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