如何避免在路由改变时组件重新渲染，这类似于vuejs中的keep-alive？

在React中，可以通过使用React Router的<Route>组件的render属性来实现类似于Vue.js中的keep-alive的效果，避免在路由改变时组件重新渲染。

具体实现步骤如下：

npm install react-router-dom

import { BrowserRouter as Router, Route } from 'react-router-dom';

创建一个高阶组件（Higher-Order Component，HOC），用于包装需要保持状态的组件。这个HOC的作用是在组件被卸载时将其状态保存下来，在组件重新挂载时恢复状态。

import React from 'react';

const withKeepAlive = (WrappedComponent) => {

 return class extends React.Component {

   state = {

     keepAliveData: null,

};

   componentWillUnmount() {

     // 组件被卸载时保存状态

     this.setState({ keepAliveData: this.props });

   render() {

     const { keepAliveData } = this.state;

     if (keepAliveData) {

       // 组件重新挂载时恢复状态

       return <WrappedComponent {...keepAliveData} />;

     return <WrappedComponent {...this.props} />;

};

};

const App = () => {

 return (

   <Router>

     <div>

       <Route

         exact

         path="/"

         render={(props) => (

           <Home {...props} />

)}

/>

       <Route

         path="/about"

         render={(props) => (

           <About {...props} />

)}

/>

       <Route

         path="/contact"

         render={(props) => (

           <Contact {...props} />

)}

/>

     </div>

   </Router>

);

};

在上面的代码中，Home、About和Contact组件是需要保持状态的组件，通过将它们包装在withKeepAlive高阶组件中，可以实现在路由改变时不重新渲染。

这样，当路由改变时，被包装的组件将不会重新渲染，而是保持之前的状态。这类似于Vue.js中的keep-alive组件的效果。

注意：以上代码示例中没有提及腾讯云相关产品和产品介绍链接地址，因为要求答案中不能提及亚马逊AWS、Azure、阿里云、华为云、天翼云、GoDaddy、Namecheap、Google等流行的一些云计算品牌商。

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云