优化ReactJS应用程序

在本文中，我们将看到优化React应用程序的方法。

要创建现实世界的React应用程序，强烈需要优化的代码来增强性能。有几种优化React应用程序的方法，但以下是一些最优选的方法-

记忆化

它是一种通过将结果存储为高速缓存并仅在输入更改时再次调用该函数来加快应用程序速度的技术，否则将返回高速缓存的结果。

使用的功能部件。仅当传递给组件的道具发生更改时，才使用此方法重新渲染组件React.memo()

示例

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

此方法主要用于优化性能，该性能仅在传递给组件的状态或道具发生更改时才重新渲染组件。

示例

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: 'nhooo'
   }
})

为了确保不可变性，我们还可以使用Immutable.js之类的第三方依赖项。

使用React.Fragments

除了使用额外的<div>标签，我们还可以使用<React.Fragment>将子标签分组，而不需要额外的节点。

示例

return (
   <React.Fragment>
      <h1>nhooo</h1>
   <React.Fragment/>
)