Question

我创建了一个简单的React Redux应用程序。在Google chrome react dev开发工具中，我选中“突出显示更新”。然后单击任何按钮，它显示所有组件已更新，但“ 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坐着，安全奉献精英。黑体曲霉，杜鹃花，杜鹃花，伊格蒂·伊姆·福吉特，伊斯图·伊斯托·迈托斯·纳图斯·纳斯特鲁姆，奎斯库姆·西米尔·tempore，韦利亚·沃尔普图塔姆。

Answer 1

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

同样，由于它也没有订阅商店中的任何更新，因此也不会因为商店更新而重新呈现。

要重新渲染的组件是ListContainer和ListItem，因为ListContainer预订存储更新，因此它将更新，导致其所有子代重新渲染，前提是它们未实现shouldComponentUpdate和扩展React .PureComponent（仅在组件的props不变时才发生）

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

1 个答案: