Я создал простое приложение, чтобы проверить, какая часть документа перерисовывается, когда я добавляю элементы в массив, а затем использую .map в реакции. Для управления государством я использую редукс. Чтобы проверить, что будет перерисовано, я использую дополнение Chrome с опцией Paint flashing.
Поэтому я ожидаю, что при отправке действия от компонента, который изменяет хранилище, только компоненты, подключенные к этой части хранилища, будут мигать зеленым. Вместо этого весь экран мигает зеленым, а затем каждый отдельный компонент также мигает зеленым.
Похоже, что что-либо в <Provider /> будет просто обновлять информацию о любых изменениях в избыточном хранилище.
Я уже пробовал 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 Будет делать то же, что и выше, но как компонент функции.
Я хотел пройти этот тест, так как в проекте, над которым я работаю, мы сходим с ума из-за проблем с производительностью, когда приложение огромно. Мы думаем о том, чтобы отойти от избыточности, но я не думаю, что этот вариант хорош вообще.
Я ожидал, что на новых элементах появятся зеленые вспышки. Но вместо этого весь экран всегда будет мигать, когда я что-нибудь изменю в магазине.
РЕДАКТИРОВАТЬ: Позвольте мне добавить пример, который показывает список предметов из магазина. Я ожидал, что это будет мигать только новые элементы, но вместо этого мигает весь компонент:
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);