React

現(xiàn)在我們有了一個(gè)屬于文章的API，可以添加、修改、刪除、查看文章，但是對(duì)于我們的網(wǎng)站來(lái)說(shuō)，還需要一個(gè)用戶(hù)界面才行?，F(xiàn)在開(kāi)始探索一下ReactJS吧。

經(jīng)常聽(tīng)到有前端三大框架Angular、React、Vue的說(shuō)法，不過(guò)React官網(wǎng)對(duì)自己的介紹卻是這樣的：

A JavaScript library for building user interfaces

一個(gè)用來(lái)構(gòu)建用戶(hù)界面的JavaScript庫(kù)。首先我們需要配置一下環(huán)境，以便使用React。

首先我們要安裝一個(gè)Node.js，目前我們還不用深入了解Node，只需要知道它能幫助你在非瀏覽器環(huán)境下運(yùn)行JS代碼就行了。官網(wǎng)為node.org，直接下載安裝就行，Linux用戶(hù)推薦用各自的包管理器安裝。

Node自帶包管理器npm，有點(diǎn)類(lèi)似Python的pip，不過(guò)這里我們使用yarn這個(gè)包管理器。按照官網(wǎng)說(shuō)明安裝完之后，打開(kāi)終端，并進(jìn)入我們的項(xiàng)目目錄react_drf，為接下來(lái)的工作做準(zhǔn)備。

從零開(kāi)始構(gòu)建一個(gè)React項(xiàng)目涉及到的東西是比較多的，這時(shí)候就有一些方便的腳手架可以選擇，腳手架可以幫我們省掉很多麻煩的配置。在這里先選用Facebook官方提供的create-react-app。

$ yarn create react-app frontend

使用上述命令后，你將會(huì)看到react_drf目錄下多了個(gè)frontend文件夾：

$ cd frontend $ yarn start

這下你會(huì)看到瀏覽器跳轉(zhuǎn)到localhost:3000，并且應(yīng)該看到一個(gè)轉(zhuǎn)動(dòng)的React logo的頁(yè)面，這說(shuō)明你安裝成功了，接下來(lái)瀏覽一下frontend這個(gè)目錄下的文件，但還不要做任何改動(dòng)。

index.js

現(xiàn)在讓我們一起來(lái)看一下frontend/src這個(gè)目錄，基本上目前我們只要關(guān)心這個(gè)目錄下的內(nèi)容就可以了。首先來(lái)看一下這里的frontend/src/index.js：

import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker';ReactDOM.render(<React.StrictMode><App /></React.StrictMode>,document.getElementById('root') );// If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: https://bit.ly/CRA-PWA serviceWorker.unregister();

可能你已經(jīng)注意到了代碼中的<App />這一部分，似乎HTML中并沒(méi)有這一標(biāo)簽，并且為什么JS文件中有這樣類(lèi)似HTML的東西呢？可能你的心中已經(jīng)布滿(mǎn)了疑問(wèn)，沒(méi)關(guān)系，讓我們先動(dòng)手改一下這段代碼：

... <React.StrictMode><div>hello world</div></React.StrictMode>, ...

我想，上述寫(xiě)法應(yīng)該能讓你看出應(yīng)該在哪里修改代碼。現(xiàn)在，打開(kāi)瀏覽器，看看localhost:3000這個(gè)頁(yè)面，應(yīng)該能看到頁(yè)面發(fā)生了改變并顯示了hello world。如果你之前不小心關(guān)閉了終端，請(qǐng)記得重新打開(kāi)，并在frontend目錄下運(yùn)行yarn start。

這里我不打算詳細(xì)介紹React的基礎(chǔ)知識(shí)了，目前我還沒(méi)有見(jiàn)過(guò)比React官方文檔更好的學(xué)習(xí)資料，哪怕你覺(jué)得自己的英語(yǔ)很差勁，官方的中文文檔也值得一看，這里我僅僅粗略介紹一下接下來(lái)要接觸的知識(shí)點(diǎn)。

• JSX：不夠恰當(dāng)?shù)?jiǎn)單理解的話，可以認(rèn)為在React中可以把HTML、CSS、JavaScript混合在一起，一個(gè)原本在HTML中的元素可以被賦值給變量，如const element = <h1>Hello, world!</h1>;，JSX里面也可以插入JS，如

const name = 'Josh Perez'; // 使用JS變量 const element = <h1>Hello, {name}</h1>;

• 組件：可以簡(jiǎn)單理解為，React認(rèn)為UI應(yīng)該是組件化的，就像搭積木一樣，由一個(gè)一個(gè)組件搭起來(lái)，這樣將一個(gè)大頁(yè)面的工作拆分為很多個(gè)小組件，便于復(fù)用，也方便多人協(xié)作開(kāi)發(fā)。之前看到的<App />就是一個(gè)組件。
• 生命周期函數(shù)：有一個(gè)有趣的比喻，把組件比作一只螞蟻，它的一生就是從一根繩子的一端爬向另一端，這個(gè)繩子上掛了很多卡片，那么它從頭爬到尾，就會(huì)在過(guò)程中觸碰到不同的卡片，這些卡片就是生命周期函數(shù)。

第一個(gè)組件

在frontend/src目錄下創(chuàng)建新文件ArticleList.js，正如名字所示，這是一個(gè)文章列表的組件。

import React, {Component} from "react";class ArticleList extends Component {constructor(props) {super(props);}}

現(xiàn)在我們定義了一個(gè)類(lèi)組件，它繼承自React的Component類(lèi)，這里我們寫(xiě)了它的第一個(gè)生命周期函數(shù)，也就是constructor，如果你熟悉過(guò)任何一門(mén)面向?qū)ο蟮恼Z(yǔ)言，這里應(yīng)該不難理解。constructor并不是React獨(dú)有的，而是JavaScript原生的寫(xiě)法，不過(guò)對(duì)于類(lèi)組件來(lái)說(shuō)，它當(dāng)然也可以算生命周期的一部分。

現(xiàn)在來(lái)看第二個(gè)生命周期函數(shù)render：

class ArticleList extends Component {constructor(props) {......}render() {return <div>第一個(gè)組件</div>;}}

render函數(shù)是類(lèi)組件中唯一一個(gè)必須被實(shí)現(xiàn)的函數(shù)，組件將根據(jù)這個(gè)函數(shù)的返回值渲染內(nèi)容。這里的<div>第一個(gè)組件</div>就是JSX，如果有多行嵌套可以用括號(hào)括起來(lái)：

return (<div className="ArticleList"><div>文章一</div><div>文章二</div></div>);

那怎么讓這個(gè)組件被渲染呢？聰明的你可能已經(jīng)把App.js的代碼看了一遍，我們?cè)贏rticleList.js的最后面添加一行代碼

export default ArticleList;

同時(shí)修改index.js：

import React from 'react'; ...... // 原先引入App的那行可以刪掉 import ArticleList from './ArticleList'ReactDOM.render(<React.StrictMode><ArticleList /></React.StrictMode>,document.getElementById('root') );......

現(xiàn)在運(yùn)行yarn start，你將在看到瀏覽器啟動(dòng)并顯示你在render函數(shù)中返回的內(nèi)容。當(dāng)然事實(shí)上如果你之前沒(méi)有停止終端的運(yùn)行，那么就不必要重新運(yùn)行yarn start，代碼做了更改，會(huì)自動(dòng)重新渲染，以后不再提醒如何查看我們的成果了。

接下來(lái)開(kāi)始實(shí)現(xiàn)文章列表界面，但是先不急著從API獲取文章數(shù)據(jù)，先讓我們模擬一下文章數(shù)據(jù)：

const articleList = [{"id": 2,"title": "React","body": "React is good","created": "2020-03-21T21:19:31.732703","updated": "2020-03-21T21:19:31.732728"},{"id": 1,"title": "React","body": "React is good","created": "2020-03-21T21:10:53.922033","updated": "2020-03-21T21:10:53.922128"} ];class ArticleList extends Component {constructor(props) {super(props);this.state = {articleList: articleList,}}...... }

注意到這里添加了一個(gè)articleList列表，在構(gòu)造函數(shù)里多了一個(gè)this.state，并為其設(shè)置了articleList屬性。現(xiàn)在來(lái)修改render函數(shù)：

render() {return (<div className="ArticleList">{this.state.articleList.map(item =><div key={item.id}><h4>{item.title}</h4><p><strong>{item.body}</strong><br/><em>創(chuàng)建時(shí)間：{item.created}</em><em>更新時(shí)間：{item.updated}</em></p></div>)}</div>);}

現(xiàn)在來(lái)大致講解一下上面的代碼，首先我們看到最外層的div標(biāo)簽，它擁有一個(gè)className屬性，這個(gè)實(shí)際上就是HTML的class屬性，這么寫(xiě)的原因也很簡(jiǎn)單，JSX允許JS和HTML混合在一起，但在很多編程語(yǔ)言（包括JS）里class都是用于創(chuàng)建類(lèi)的關(guān)鍵字，所以給它改個(gè)名字便于區(qū)分。

接著我們看到了在JSX中如何使用JavaScript，我們?cè)诖罄ㄌ?hào)里使用了map方法，使用箭頭函數(shù)，讓不同標(biāo)簽里包含了文章標(biāo)題、正文等內(nèi)容。

注意到包含<div key={item.id}>這一行，現(xiàn)在如果你已經(jīng)使用了yarn start命令，你將會(huì)在瀏覽器看到一個(gè)簡(jiǎn)陋的文章列表，如果你刪除這個(gè)key={item.id}，在瀏覽器按下F12，你將會(huì)在控制臺(tái)看到警告信息。

總之記住React要求這類(lèi)列表元素，必須要要有一個(gè)唯一的key標(biāo)識(shí)來(lái)讓React能識(shí)別哪些元素被改變了。在后臺(tái)的真實(shí)數(shù)據(jù)中，id這個(gè)字段是主鍵，也就是唯一的，剛好可以利用。

使用API

好了，我們已經(jīng)使用虛假的數(shù)據(jù)嘗試了一把，之前說(shuō)過(guò)前后端分離開(kāi)發(fā)的一個(gè)好處是前端與后端約定好接口后，可以各自分開(kāi)并行開(kāi)發(fā)，那么實(shí)質(zhì)上就會(huì)有一些工具來(lái)幫助生成“假的API”或者虛假的前端請(qǐng)求之類(lèi)來(lái)幫助測(cè)試，有興趣的可以去搜索搜索。

當(dāng)然這里我們是為了學(xué)習(xí)，開(kāi)發(fā)只有自己一個(gè)人而已，那現(xiàn)在讓我們來(lái)試試使用真實(shí)的API吧。

同源策略

在正式開(kāi)始之前，我們還要先了解一下瀏覽器的同源策略。想象一下，如果你在a.com登錄瀏覽了一段時(shí)間，再跑去b.com逛逛，結(jié)果b.com直接取到了你在a.com的cookie，用于在a.com登錄你的賬號(hào)，那實(shí)在是太可怕了，尤其是當(dāng)a.com是銀行或購(gòu)物網(wǎng)站的時(shí)候?；诖?#xff0c;瀏覽器使用同源策略來(lái)做一個(gè)基本的安全保障。簡(jiǎn)單來(lái)說(shuō)，就是域名、端口、協(xié)議只要有一個(gè)不一樣，就會(huì)受到訪問(wèn)限制：

• Cookie、LocalStorage 和 IndexDB 無(wú)法讀取。
• DOM 無(wú)法獲得。
• AJAX 請(qǐng)求不能發(fā)送。

我們可以簡(jiǎn)單嘗試一下，修改ArticleList.js：

constructor(props) {......}componentDidMount() {fetch('http://127.0.0.1:8000/articles/').then(response => response.json()).then(result => this.setState({articleList: result})).catch(e => e);}......

這里我們又見(jiàn)到了一個(gè)新的生命周期函數(shù)，componentDidMount將在render之后執(zhí)行。這里調(diào)用了原生的fetch函數(shù)，直接簡(jiǎn)單粗暴的請(qǐng)求API，在瀏覽器中按下F12，你會(huì)看到如下報(bào)錯(cuò)：

雖然域名（IP）、協(xié)議都相同，但是端口號(hào)卻不同，Django后臺(tái)在8000，React卻在3000，所以發(fā)生了錯(cuò)誤。

這里給出一個(gè)在開(kāi)發(fā)時(shí)可以用的方案，幫助我們解決這個(gè)問(wèn)題，當(dāng)然，在實(shí)際部署時(shí)不能這么做，部署時(shí)的具體情況以后再講，這里我們先找到frontend/package.json這個(gè)文件，在其中添加一行：

{.......,"proxy": "http://127.0.0.1:8000" }

省略號(hào)代表之前的內(nèi)容，如果你插入在文件最后面可別忘了給前面加一個(gè)逗號(hào)。

接著對(duì)源代碼做一處修改：

componentDidMount() {fetch('/articles/')......}

這樣開(kāi)發(fā)服務(wù)器就能識(shí)別你的請(qǐng)求將其代理到http://127.0.0.1:8000也就是Django服務(wù)所在的地址了，現(xiàn)在重新運(yùn)行yarn start，可以在瀏覽器看到你在后端添加的數(shù)據(jù)啦。

結(jié)語(yǔ)

這次就講到這里了，下一章要講講將這次的代碼在細(xì)節(jié)上優(yōu)化一下。這一章有很多React的基礎(chǔ)知識(shí)并沒(méi)有講解，如果讀者對(duì)React目前還沒(méi)有一點(diǎn)了解，那么建議現(xiàn)在去React官網(wǎng)看一下，至少把基礎(chǔ)教程看完。

---

歡迎關(guān)注我的公眾號(hào)“公子政的宅日常”，原創(chuàng)技術(shù)文章第一時(shí)間推送。

D

總結(jié)

以上是生活随笔為你收集整理的jsonp react 获取返回值_Django+React全栈开发：文章列表的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。