Почему реагируют, показывают, что компоненты обновляются, а консоль - нет

Question

Я создаю простое приложение «Реакция редукса»В Google Chrome реагировать на инструменты разработчика я проверяю «Highlight Updates».И затем нажмите на любую кнопку, это показывает, что все компоненты обновлены, но консольное сообщение в «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, посвященный адептированию elit.Asperiores corporis culpa deleniti dolore dolores eaque eligendi eum fugit in, itaque iusto maiores natus nostrum placeat quisquam similique tempore veniam coeptatum.

Answer 1

Для компонента AddButton mapStateToProps имеет значение null.Также не получает никаких реквизитов от родителя, и когда вы нажимаете кнопку, он обновляет значение в хранилище, но из-за этого обновления компонент приложения не выполняет повторную визуализацию, поскольку он не подписан на какое-либо обновление состояния, и поэтому AddButtonне будет перерисовывать из-за этого.

Опять же, поскольку он также не подписывается на какие-либо обновления в магазине, он не будет повторно отображаться из-за обновления магазина.

Компоненты, которые будут повторно отображаться, - это ListContainer и ListItem, поскольку ListContainer подписывается на обновления хранилища и, следовательно, он обновляет, вызывая повторное отображение всех своих дочерних элементов при условии, что они не реализуют shouldComponentUpdate и расширяют React.PureComponent (имеет значение, только если реквизиты компонента не меняются)