Question

我正在学习反应，并且正在构建这个目前很小的项目，但是“产品”组件会不断重新渲染。

您会看到我有一个console.log(products);，并且在控制台中我看到它打印了4次。

如何避免这种重新渲染？

1. []
2. []
3. [...data here]
4. [...data here]

“网络”选项卡仅显示一个调用以获取数据。这样很好。

APP.JS

const app = () => {
  return (
    <div className="App">
      <Products />
    </div>
  );
}

PRODUCTS.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

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')
);

Answer 1

删除<React.StrictMode>组件。它应该可以解决问题。

请检查此问题。这回答了您的问题here

React组件重新渲染

1 个答案: