我创建了一个简单的应用程序来测试当我将项目添加到数组然后在 react 中使用.map时，文档的哪个部分被重新渲染。为了管理状态，我使用 redux。为了检查重新渲染的内容，我使用反应铬插件，并选中Paint flashing选项。
因此，我希望当我从修改存储的组件调度操作时，只有连接到存储该部分的组件会闪烁绿色。相反，整个屏幕闪烁绿色，然后每个组件也将闪烁绿色。
似乎<Provider />下的任何内容都会更新 redux 存储中的任何更改。
我已经尝试过PureComponent，管理shouldComponentUpdate，函数组件的React.memo。
我的索引文件如下所示：
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { createStore } from "redux";
import reducers from "./store/reducers";
import "./index.css";
import App from "./App";
const store = createStore(reducers);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById("root")
);
和我的应用程序文件：
import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import ListComp from "./components/ListComp";
import ListFunc from "./components/ListFunc";
import ButtonMore from "./components/ButtonMore";
export class App extends Component {
shouldComponentUpdate() {
return false;
}
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
<ButtonMore />
<ListComp />
<ListFunc />
</div>
);
}
}
export default App;
单击时，ButtonMore会将商品添加到商店。它已连接操作，以便可以调度它。
ListComp连接到商店中的项目列表，并将.map它们。在本例中，主要目的是测试key属性，并查看是否只有新项会闪烁绿色。
ListFunc将执行与上述相同的操作，但作为函数组件。
我想推动这个测试，因为在我工作的项目中，由于应用程序很大，我们正在为性能问题而疯狂。我们正在考虑摆脱 redux，但我认为这个选项一点也不好。
我预计仅在显示的新项目上会出现一些绿色闪烁。但是，当我更改商店中的任何内容时，整个屏幕将始终闪烁。
编辑：让我添加显示商店中商品列表的示例。我希望这只会闪烁新项目，而是闪烁整个组件：
import React from "react";
import { connect } from "react-redux";
const ListFunc = props => {
return (
<ul className="ListComp">
{props.listItems.map((item, i) => {
return <li key={`itemFunc_${i}`}>{item}</li>;
})}
</ul>
);
};
const mapStateToProps = state => {
return { listItems: state.reducer };
};
export default connect(
mapStateToProps,
null
)(ListFunc);
React-Redux v6 以多种方式更改了内部实现。 作为其中的一部分，connect()包装器组件实际上会在调度操作时重新呈现，即使您的组件没有
。出于各种原因，我们将在 v7 中更改该行为，v7 现已作为测试版提供。
更新
查看您发布的代码片段后：是的，我仍然希望您展示的示例会导致列表项和列表重新呈现。 我不能肯定地说 100%，因为您没有显示您的化简器，但假设其中一个列表项已正确更新，state.reducer也应该是一个新的数组引用。 这将导致ListFunc重新渲染。