javascript - 如何在启动时只渲染一次 React 组件?

标签 javascript performance reactjs

我一直在阅读有关性能的文档,但找不到问题的答案...

我的应用程序上有一堆按钮,它们将根据某些属性而不是状态进行呈现,父组件永远不会更改它们的属性。然后我有这个 onKeyDown 事件处理程序,它将监听一些键并更新另一个组件。

我的问题是,当按下按键并更新这个组件时,所有其他按钮也会呈现(通过 Chrome 的 React 开发工具观察到)。我还没有在我的按钮上实现 shouldComponentUpdate(nextProps, nextState),但 React 不应该默认有这个行为吗?我的意思是,将 this.propsnextProps 进行比较,如果它们完全相同,请不要调用 render()

我是否应该为每个只应在应用程序启动时呈现一次的组件自己执行此操作?

编辑: PureComponent似乎解决了问题......但是我没有创建一个新问题,而是用一个相关问题更新了这个问题:

为什么文档不建议所有组件默认都基于 PureComponent?反对默认使用 PureComponent 而不是典型的 的论点是什么组件?

最佳答案

纯组件应该可以解决您的问题,因为它们默认实现浅层 prop 和状态比较。

Link to the docs.

If your React component's render() function renders the same result given the same props and state, you can use React.PureComponent for a performance boost in some cases.

关于javascript - 如何在启动时只渲染一次 React 组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41796004/

相关文章:

javascript - Node.js 两次打印控制台输出

mysql大查询优化

performance - 我可以在 Entity Framework 中使用 dapper-dot-net 吗?

animation - React - 当项目离开 DOM 时跳跃动画

node.js - 将 React/Node/Express 应用程序上传到 Heroku 后获取 "Failed to load resource: net::ERR_CONNECTION_REFUSED"

javascript - Gremlin,javascript : where is the function "valueMap()" imported from?

javascript - 如何获取在表单标签内选中的复选框的数量并在进度条中显示百分比?

c++ - 并行程序与线性程序相比没有速度增加

javascript - import App from '../components/App' 和有什么区别?和 var App = require ('../components/App' );?

javascript - let 和 const 如何适应当前的执行上下文?他们每次都创建一个新的吗?