Question

我正在使用ComponentDidMount从数据库中调用数据并在数据准备好后呈现页面。但是，我已经注意到导航时我的应用程序的速度降低了，因为我必须等待数据。

当我正在检索的数据库中有大量数据时，就会发生这种情况。我的问题是，有什么方法可以对此进行优化，或者我只需要在数据加载之前渲染页面？

Component.JS

componentDidMount()
     {
        this.fetchAllItems();           
     } 

 fetchAllItems(){
        return this.fetchPost().then(([response,json]) => {
         console.log('here now ',response);
         console.log(localStorage.getItem('user_token'))
           if(response.status === 200)
           {   

           }
        })
     }



     fetchPost(){
        const URL = 'http://localhost:8000/api/';
        return fetch(URL, {method:'GET',headers:new Headers ({
           'Accept': 'application/json',
           'Content-Type': 'application/json',
              })})
        .then(response => Promise.all([response, response.json()]));
     }

Answer 1

尝试使用axios异步调用API，完成后，只需将响应数据更新为state即可。无需等待页面加载完成与否，通过更改状态值即可做出反应。

import React from 'react';
import axios from 'axios';

export default class MovieList extends React.Component {
  state = {
    movies: []
  }

  componentDidMount() {
    axios.get(`http://localhost/movies`)
      .then(res => {
        const movies = res.data;
        this.setState({ movies: movies });
      })
  }

  render() {
    const {
       movies
    } = this.state;
    return (
      <div>
          <ul>
          { movies.map(movie => <li>{movie.name}</li>)}
          </ul>
      </div>
    )
  }
}

Answer 2

您是否尝试过public static String permute(String str){ String[] st=str.split("\\s+"); String sr1=st[0].toString();//Run time error String sr2=st[1].toString(); }生命周期方法？此方法接受nextProps（新的或即将来临的道具）和nextState（新的或即将来临的状态）参数。您可以比较下一个道具和状态（在您的情况下最好陈述一下）以确定组件是否应该重新渲染。更少的重新渲染等于更好的速度和优化。这意味着您的页面将加载得更快。 shouldComponentUpdate方法返回一个布尔值，以确定是否应重新渲染页面。阅读更多here。另外，这是一个示例：

shouldComponentUpdate

Answer 3

对于您而言，所有优化都必须在后端完成。

但是，如果在React中可以做些事情，请使用“应该更新组件”作为前面提到的注释。

在页面渲染之前使用ComponentDidMount加载数据-React

3 个答案: