数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究优化 ReactJS 应用程序
在本文中，我们将了解优化 React 应用程序的方法。
要创建一个真实的 React 应用程序，优化代码对于提高性能至关重要。优化 React 应用程序的方法有很多，但以下是一些最常用的方法：
记忆化
这是一种通过将结果存储为缓存来加速应用程序的技术，只有当输入发生变化时才会再次调用函数，否则返回缓存的结果。
对于函数式组件，使用 **React.memo()**。此方法用于仅在传递给组件的 props 发生变化时重新渲染组件。
示例
export default React.memp(App)
对于基于类的组件，使用 **shouldComponentUpdate** 方法。
示例
Class Person extends React.Component{
shouldComponentUpdate(nextProps,nextState){
if(nextProps.data!==this.props.data){
return true;
}
return false;
}
}使用 React.PureComponent
此方法主要用于优化性能，仅当传递给组件的状态或 props 发生变化时才重新渲染组件。
示例
Class Person extends React.PureComponent{}缓存函数
通过使用 **useCallbacks**，我们可以极大地优化 React 应用程序，以便它仅在输入发生变化时返回更新的结果，否则返回缓存的数据。
示例
Const value = useCallback((a,b)=>return a+b,[a,b])
懒加载
通过延迟加载 ReactJS 应用程序中不太必要的组件，我们可以极大地优化 React 应用程序，因为它可以减少 DOM 加载时间并减小包大小。
示例
Const Person = React.lazy(()=>import(‘./Person.js’))
使用不可变数据结构
通过以不可变的方式更改状态，我们可以确保防止时间耦合，并且还可以轻松跟踪状态的变化。
state={
user:
{
name: 'Rahul Bansal',
id: '01'
}
}不可变地更改状态
this.setState({
user: ...this.state.user,
{
name: 'TutorialsPoint'
}
})为了确保不可变性，我们还可以使用 Immutable.js 等第三方依赖项。
使用 React.Fragments
与其使用额外的 **<div>** 标签，我们可以使用 **<React.Fragment>** 来对子标签进行分组，而无需额外的节点。
示例
return ( <React.Fragment> <h1>TutorialsPoint</h1> <React.Fragment/> )
更新于: 2021年3月18日
182 次浏览
广告