[英]React component re-renders
I'm learning react and I'm building this project that currently is very small but the Products component keep re-rendering.我正在学习反应,我正在构建这个目前非常小但产品组件不断重新渲染的项目。
As you can see I have a console.log(products);
如您所见,我有一个
console.log(products);
and in the console i see it printing 4 times.在控制台中我看到它打印了 4 次。
How can I avoid this re-rendering?
如何避免这种重新渲染?
1. []
2. []
3. [...data here]
4. [...data here]
Network tab only shows one call to fetch the data.网络选项卡仅显示一个获取数据的调用。 So that's good.
所以这很好。
APP.JS APP.JS
const app = () => {
return (
<div className="App">
<Products />
</div>
);
}
PRODUCTS.JS产品.JS
const Products = props => {
const products = useSelector(state => state.products);
const dispatch = useDispatch();
const onLoadProducts = useCallback(() => dispatch(actionCreators.onLoadProducts()), [dispatch]);
useEffect(() => {
onLoadProducts();
}, [onLoadProducts]);
const flag = products.length > 0 ? 'YAY' : 'NAY';
console.log(products);
return (
<p>{flag}</p>
)
}
export default React.memo(Products);
INDEX.JS索引.JS
const composeEnhancers = process.env.NODE_ENV === 'development' ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ : null || compose;
const store = createStore(productsReducer, composeEnhancers(
applyMiddleware(thunk)
));
ReactDOM.render(
<React.StrictMode>
<Provider store={store}><App /></Provider>
</React.StrictMode>,
document.getElementById('root')
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.