React 组件重新渲染答案

【问题标题】：React component re-rendersReact 组件重新渲染
【发布时间】：2020-04-23 05:41:04
【问题描述】：

我正在学习 React，我正在构建这个项目，该项目目前非常小，但 Products 组件不断重新渲染。

如您所见，我有一个 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')
);

【问题讨论】：

我觉得我什至不需要 React.memo。我添加了它以查看我的问题是否消失，但它没有
这是一个 prop 或 state 的改变，所以如果你卡住了，做一个 useEffect 钩子，当 prop 值或 state 值发生变化时打印控制台日志，并找出发生了什么变化并导致重新渲染，一旦你弄清楚它应该是相当明显的原因是什么
酷我有这个问题。请检查此链接：stackoverflow.com/questions/60825649/…
@devpato 不要依赖渲染次数，因为 react 可以多次调用渲染阶段方法来检测副作用:)
是的，你可以保持原样，它不会影响生产模式。这仅在开发模式下发生。

标签： reactjs react-hooks

【解决方案1】：

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

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

【讨论】：

我按照你的代码做了，但它没有用。我一直有同样的问题:(
请检查stackoverflow的答案stackoverflow.com/questions/61328285/…
那也没用。我从我的项目中删除了禁用的开发工具
尝试移除严格模式
ahhhhh yeeessss 这就是解决方案！哇非常有趣。现在我看到它打印了两次。第一个是一个空数组 []（初始值），然后是调用完成后包含数据的数组。这是正常行为吧？