时间戳

首页 > 解决方案 > 正在重新安装多个路由中使用的相同组件 react-router

javascript - 正在重新安装多个路由中使用的相同组件 react-router

问题描述

我创建了一个简单的反应应用程序。它有一个标题和三个其他组件，称为欢迎、功能 1 和功能 2。

index.js

import React from 'react'
import { render } from 'react-dom'
import { BrowserRouter, Route } from 'react-router-dom'
import App from './App';

render((
  <BrowserRouter>
    <Route path="/" component={App} />
  </BrowserRouter>
), document.getElementById('root'));

应用程序.js

import React from 'react'
import Header from './Header'
import Main from './Main'

const App = () => (
  <div>
    <Header />
    <Main />
  </div>
)

export default App

页眉.js

import React, { Component } from 'react';

export default class Header extends Component {
  componentDidMount() {
    APICall('/user')
  }
  render() {
    return (
      <div>I am header</div>
    )
  }
}

主.js

import React, { Component } from 'react'
import { Route } from 'react-router-dom'
import Welcome from './Welcome'
import Feature1 from './Feature1'
import Feature2 from './Feature2'

export default class Main extends Component {
  render() {
    return (
      <div>
        <Route exact path="/" component={Welcome} />
        <Route path="/feature1" component={Feature1} />
        <Route path="/feature2" component={Feature2} />
      </div>
    )
  }
}

欢迎.js

import React, { Component } from 'react';

export default class Welcome extends Component {
  render() {
    return (
      <div>Welcome!</div>
    )
  }
}

Feature1.js

import React, { Component } from 'react';

export default class Feature1 extends Component {
  render() {
    return (
      <div>I am Feature1</div>
    )
  }
}

Feature2.js

import React, { Component } from 'react';

export default class Feature2 extends Component {
  render() {
    return (
      <div>I am Feature2</div>
    )
  }
}

Welcome，Feature1 和 Feature2 在不同的路由中，因为 Header 在所有路由中都是通用的。假设我有一个用户，我想在标题上显示用户名。我将进行 API 调用以获取 header 的 componentDidMount() 生命周期钩子中的用户名。

现在，如果我更改路由，我不希望再次进行 API 调用，因为用户名不会更改。我认为这就是它的行为方式。由于所有路由中的 Header 组件都是相同的，我认为当我更改路由时 Header 不会重新安装。但这不是正在发生的事情。它正在重新安装并再次调用 API。如何确保 API 调用只进行一次？

标签： javascriptreactjsreact-router-v4

解决方案

我认为在这种情况下，考虑到您的 Header 知道用户记录了什么，即作为道具传递的 App.js 状态，您可以使用 shouldComponentUpdate()：

shouldComponentUpdate(nextProps, nextState) {
 // see if user changed
 if(nextProps.user !== nextState.user){
   return true;
 }
// returning false will prevent re-rendering
return false;  
}

我希望这在某种程度上有用。祝你有美好的一天！

推荐阅读