Question

我创建了一个简单的react应用程序。它具有标题和其他三个组件，分别称为Welcome，功能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'));

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

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

welcome.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调用仅进行一次？

Answer 1

我认为在这种情况下，考虑到您的标头知道用户记录的内容，即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;  
}

我希望这会有所帮助。祝你有美好的一天！

Answer 2

在index.js中对此进行更改：-

<BrowserRouter>
    <App />
  </BrowserRouter>

Answer 3

然后您似乎弄乱了路由，因为在路由器中您仅注册了一条路由，这似乎在任何子路由更改时触发。另外，路由应包装在 Switch 组件中。

查看此结构

/** index.js */
import React from 'react'
import { render } from 'react-dom'
import App from './App';

render(<App />, document.getElementById('root'));

/** App.jsx */
import React from 'react'
import Header from './Header'
import Main from './Main'
import { BrowserRouter, Route, Switch } from 'react-router-dom'

const App = () => (
  <div>
    <Header />
    <BrowserRouter>
        <Switch>
            <Route exact path="/" component={Homepage} />
            <Route exact path="/f1" component={Feature1} />
            <Route exact path="/f2" component={Feature2} />
            <Route component={NotFound} />
        </Switch>
    </BrowserRouter>
  </div>
)

export default App

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

3 个答案: