timg.jpg

本文關(guān)鍵詞：react axios mockapi.io 等等

上篇文章快速安裝create-react-app腳手架我們已經(jīng)安裝好了一個(gè)react項(xiàng)目的腳手架了荤胁，現(xiàn)在要用它來做點(diǎn)事情。就最簡(jiǎn)單的先請(qǐng)求接口數(shù)據(jù)圆恤，再把數(shù)據(jù)渲染出來。這就是殺雞用牛刀了，當(dāng)然我們也可以直接引入React.js也可以了~
先看下具體結(jié)構(gòu)的圖片

react-img-1.png

[
  {
    "id": "1",
    "name": "小紅",
    "age": 20,
    "sex": "女"
  },
  {
    "id": "2",
    "name": "小明",
    "age": 21,
    "sex": "男"
  },
  {
    "id": "3",
    "name": "翠花",
    "age": 24,
    "sex": "女"
  },
  {
    "id": "4",
    "name": "秋香",
    "age": 25,
    "sex": "女"
  },
  {
    "id": "5",
    "name": "張三",
    "age": 30,
    "sex": "男"
  }
]

現(xiàn)在我們開始寫代碼

比較懶得寫樣式啦，我就直接安裝個(gè)boostrap，然后引入boostrap的樣式好了

一岖妄、安裝boostrap型将、axios

npm install bootstrap@3.3.7 --save

請(qǐng)求數(shù)據(jù)就用axios吧，也可以用JQuery的ajax(),我這里用axios

npm isntall axios --save

如果安裝完成荐虐，可以看到

bs.png

二七兜、在src目錄下新建一個(gè)List.js,在List.js中:

在create-react-app可以盡情使用es6、es7的語法了福扬，我們會(huì)對(duì)項(xiàng)目打包腕铸。

import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import axios from 'axios';

首先先把組件寫好，在List.js中铛碑，我先第一個(gè)表格數(shù)據(jù)的組件TrData

//List.js
class TrData extends React.Component{
  constructor(props){
    super(props);
  }
  render(){
    return (
      this.props.users.map((user,i)=>{
          return (
              <tr key={user.id} className="text-center">
                <td>{user.id}</td>
                <td>{user.title}</td>
                <td>{user.name}</td>
                <td>{user.sex}</td>
              </tr>
          )       
      })
    )
  }
}

首先用React.Component創(chuàng)建一個(gè)TrData組件狠裹，然后渲染傳進(jìn)來的數(shù)據(jù)users，循環(huán)遍歷出來.遍歷users的方法是es6的map()方法汽烦，大家也可用其他方法遍歷了涛菠，只要數(shù)據(jù)能出來。通過props給這個(gè)組件導(dǎo)入數(shù)據(jù)撇吞。接下來俗冻，我再創(chuàng)建一個(gè)List的組件，來顯示UI視圖

//List.js
class List extends React.Component {
    constructor(props){
        super(props);
  }
  render() {
      return (
        <table className="table table-bordered">
          <thead>
            <tr>
              <th className="text-center">ID</th>
              <th className="text-center">姓名</th>
              <th className="text-center">年齡</th>
              <th className="text-center">性別</th>
            </tr>
          </thead>
        <tbody>
           <TrData users={this.state.users}/>
        </tbody>
        </table>
      )  
  }
}

并且導(dǎo)出這個(gè)組件

//List.js
export default List;

接下來牍颈，我們來請(qǐng)求數(shù)據(jù)迄薄，我們知道在vue中有生命周期，可以選擇在特定的生命周期上進(jìn)行數(shù)據(jù)掛載煮岁。同樣React也有生命周期讥蔽。
當(dāng)組件輸出到 DOM 后會(huì)執(zhí)行 componentDidMount()鉤子，也就是說我們可以在componentDidMount()內(nèi)請(qǐng)求數(shù)據(jù)人乓，并更新數(shù)據(jù)勤篮。還有一點(diǎn)就是我們請(qǐng)求的數(shù)據(jù)要放在那兒，沒錯(cuò)色罚，這就是state≌司ⅲ可能有些讀者不懂這個(gè)state戳护，這里簡(jiǎn)單講一下，state就是可以存儲(chǔ)組件的一系列狀態(tài)瀑焦。只能定義在組件內(nèi)部腌且。接下來，我兩個(gè)state的兩個(gè)狀態(tài)榛瓮，一個(gè)是users铺董，一個(gè)是是否已經(jīng)加載數(shù)據(jù)完成的isLoaded。在組件List內(nèi)部加入

constructor(props){
    super(props);
    this.state={
      users:[],
      isLoaded:false
    }
  }

state需要在constructor上定義。這涉及ES6的語法特性精续，這里就不過多講其他的了坝锰。我們?cè)僭贚ist內(nèi)部添加

//當(dāng)組件輸出到 DOM 后會(huì)執(zhí)行 componentDidMount()
componentDidMount(){
    const _this=this;    //先存一下this，以防使用箭頭函數(shù)this會(huì)指向我們不希望它所指向的對(duì)象重付。
    axios.get('https://5b5e71c98e9f160014b88cc9.mockapi.io/api/v1/lists')
    .then(function (response) {
      _this.setState({
        users:response.data,
        isLoaded:true
      });
    })
    .catch(function (error) {
      console.log(error);
      _this.setState({
        isLoaded:false,
        error:error
      })
    })
  }

通過axios請(qǐng)求數(shù)據(jù)顷级，（在我之前的文章有）當(dāng)請(qǐng)求成功后就更新state的users和isLoaded狀態(tài)。更新state需要用this.setState()來更新狀態(tài)确垫，這個(gè)很類似微信小程序的setData()弓颈，state一發(fā)生改變，綁定那些狀態(tài)的試圖也會(huì)相應(yīng)刷新改變删掀。
我再寫得合理一些翔冀，修改一下List 得render()

//List.js
render() {
      if(!this.state.isLoaded){
        return <div>Loading</div>
      }else{
      return (
        <table className="table table-bordered">
          <thead>
            <tr>
              <th className="text-center">ID</th>
              <th className="text-center">姓名</th>
              <th className="text-center">年齡</th>
              <th className="text-center">性別</th>
            </tr>
          </thead>
        <tbody>
           <TrData users={this.state.users}/>
        </tbody>
        </table>
      )  
    }
  }

當(dāng)再請(qǐng)求數(shù)據(jù)得時(shí)候顯示Loading,請(qǐng)求完成直接顯示數(shù)據(jù)。

三披泪、在app.js中引入List.js并渲染

//app.js
import React, { Component } from 'react';
import './App.css';
import List from './List';

class App extends Component {
  constructor(props){
    super(props);
  }
  render() {
    return (
      <div className="container">
        <List />
      </div>
    );
  }
}

export default App;

四纤子、在create-react-app腳手架跑起來項(xiàng)目

npm start

res.png

這樣就實(shí)現(xiàn)了最簡(jiǎn)單的請(qǐng)求數(shù)據(jù)和渲染數(shù)據(jù)了
有需要得讀者可以看下源碼，我把它放到github上去了https://github.com/IamZYP/List

有問題可以留言一起交流~~~
歡迎訪問我的個(gè)人網(wǎng)站zhengyepan.com