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

Question

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

索引.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'));

App.js

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

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

export default App

Header.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>
    )
  }
}

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

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

Answer 1

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

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

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