javascript - React 什么时候重新渲染子组件?

标签 javascript reactjs

我知道 React 在 state 或 props 改变(或者当我们强制组件重新渲染时)执行重新渲染。我也知道 React 在重新渲染时会重新渲染组件的子组件。

我注意到 React 会重新渲染子组件,即使它的 Prop (子 Prop )没有改变,所以当父组件传递与以前相同的 Prop 时。

这是为什么? React 是否会重新渲染完全无状态且无属性的子组件?

最佳答案

如果您不希望子组件重新渲染,您应该使用 React.memo , PureComponent ,或 shouldComponentUpdate生命周期钩子(Hook)。

这三个选项中的每一个都告诉 React,如果你的组件( Prop )的输入没有改变,那么重新渲染组件是没有意义的,因为组件不会改变。

如果您正在使用类组件,那么 PureComponent 或 shouldComponentUpdate 应该是您的首选。本质上,PureComponent 只是为您实现了 shouldComponentUpdate。

React.memo 应该是你使用函数组件时的首选。 React.memo 有一个函数的第二个参数来确定相等性,它的作用类似于 shouldComponentUpdate。

你应该 绝对在使用 react 组件时,使用这三个选项之一而不是重新选择。 Reselect用于内存 redux 中的选择器(或只是一般的函数调用)。它不适用于内存 react 组件。

我通常使用 reselect 来使组件的 props 稳定(使用 connect 时)并防止在每次渲染时重新计算复杂的数据。

关于javascript - React 什么时候重新渲染子组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61523675/

相关文章:

Javascript:通过检查对象的属性从数组中删除对象

javascript - 函数的单向绑定(bind)

reactjs - BrowserRouter Link 重写 onClick 事件

reactjs - 有人知道为什么我得到 'Uncaught Error in snapshot listener: FirebaseError: Missing or insufficient permissions' 吗?

javascript - 在 Angular 2 中使用 window.print() 仅打印一页

javascript - 时间线json.html :1 Uncaught SyntaxError: Unexpected token @ in JSON at position 1296

javascript - React 关注子组件输入

javascript - 是否可以通过 PWA 设置闹钟? (构建计时器/闹钟应用程序)

node.js - PouchDB 基本身份验证不适用于同步网关

javascript - 如何使用 geojson 有选择地启用 onEachFeature 函数