react好客租房項(xiàng)目- day11

React好客租房項(xiàng)目Day11Contents目錄

房源發(fā)布模塊-前期準(zhǔn)備工作

房源發(fā)布模塊-關(guān)鍵詞搜索房源發(fā)布模塊-發(fā)布房源項(xiàng)目打包&項(xiàng)目?jī)?yōu)化Contents目錄

房源發(fā)布模塊-前期準(zhǔn)備工作

房源發(fā)布模塊-關(guān)鍵詞搜索房源發(fā)布模塊-發(fā)布房源項(xiàng)目打包&項(xiàng)目?jī)?yōu)化06：35獲取房源的小區(qū)信息，房源圖片上傳，房源發(fā)布等要點(diǎn)提示房源發(fā)布模塊-功能演示和介紹掌握程度：了解1.1房源發(fā)布模塊-前期準(zhǔn)備工作視07：51之前頁面實(shí)現(xiàn)的功能需要進(jìn)行細(xì)微調(diào)整介紹rent組件的模板要點(diǎn)提示發(fā)布房源模塊-模板改動(dòng)說明掌握程度：應(yīng)用1.2房源發(fā)布模塊-前期準(zhǔn)備工作視總修改首頁（Index）去出租鏈接為：/rent/add修改公共組件NoHouse的children屬性校驗(yàn)為：node（任何可以渲染的內(nèi)容）修改公共組件HousePackage，添加onSelect的默認(rèn)值添加utils/city.js，封裝當(dāng)前定位城市l(wèi)ocalStorage的操作創(chuàng)建了三個(gè)頁面組件：Rent（已發(fā)布房源列表）、Rent/Add（發(fā)布房源）、Rent/Search（關(guān)鍵詞搜索校區(qū)信息）課堂問答視知識(shí)總結(jié)1.2.1發(fā)布房源模塊-模板改動(dòng)說明總07：01如何判斷用戶是否是登錄狀態(tài)如果登錄了，請(qǐng)求接口，獲取用戶信息要點(diǎn)提示配置三個(gè)頁面的路由規(guī)則掌握程度：應(yīng)用1.3房源發(fā)布模塊-前期準(zhǔn)備工作視總在App.js中導(dǎo)入Rent已發(fā)布房源列表頁面在App.js中導(dǎo)入AuthRoute組件使用AuthRoute組件，配置路由規(guī)則使用同樣方式，配置Rent/Add房源發(fā)布頁面，Rent/Search關(guān)鍵詞搜索小區(qū)信息頁面課堂問答視知識(shí)總結(jié)1.3.1配置三個(gè)頁面的路由規(guī)則總Contents目錄

房源發(fā)布模塊-前期準(zhǔn)備工作

房源發(fā)布模塊-關(guān)鍵詞搜索房源發(fā)布模塊-發(fā)布房源項(xiàng)目打包&項(xiàng)目?jī)?yōu)化07：21如何優(yōu)化用戶輸入過快，導(dǎo)致服務(wù)器壓力變大的問題要點(diǎn)提示關(guān)鍵詞搜索小區(qū)信息-實(shí)現(xiàn)思路掌握程度：理解2.1房源發(fā)布模塊-關(guān)鍵詞搜索視總獲取SearchBar搜索欄組件的值在搜索欄的change事件中，判斷當(dāng)前值是否為空如果為空，直接return，不做任何處理如果不為空，就根據(jù)當(dāng)前輸入的值以及當(dāng)前城市id，獲取該關(guān)鍵詞對(duì)應(yīng)的小區(qū)信息問題：搜索欄中沒輸入一個(gè)值，就發(fā)一次請(qǐng)求，這樣對(duì)服務(wù)器壓力比較大，用戶體驗(yàn)不好解決方式：使用定時(shí)器來進(jìn)行延遲執(zhí)行（關(guān)鍵詞：JS文本框輸入防抖）課堂問答視知識(shí)總結(jié)2.1.1關(guān)鍵詞搜索小區(qū)信息-實(shí)現(xiàn)思路總11：50把搜索框設(shè)置成受控組件在onChange的事件函數(shù)中請(qǐng)求數(shù)據(jù)要點(diǎn)提示關(guān)鍵詞搜索小區(qū)信息-實(shí)現(xiàn)步驟掌握程度：應(yīng)用2.2房源發(fā)布模塊-關(guān)鍵詞搜索視總練給SearchBar組件，添加onChange配置項(xiàng)，獲取文本框的值判斷當(dāng)前文本框的值是否為空如果為空，清空列表，然后return，不再發(fā)送請(qǐng)求如果不為空，使用API發(fā)送請(qǐng)求，獲取小區(qū)數(shù)據(jù)使用定時(shí)器來延遲搜索，提升性能課堂問答視知識(shí)總結(jié)2.2.1關(guān)鍵詞搜索小區(qū)信息-實(shí)現(xiàn)步驟總練練習(xí)動(dòng)動(dòng)手，自己來實(shí)現(xiàn)關(guān)鍵字搜索小區(qū)信息吧！提示給SearchBar組件，添加onChange配置項(xiàng)，獲取文本框的值判斷當(dāng)前文本框的值是否為空如果為空，清空列表，然后return，不再發(fā)送請(qǐng)求如果不為空，使用API發(fā)送請(qǐng)求，獲取小區(qū)數(shù)據(jù)使用定時(shí)器setTimeout來延遲搜索，提升性能，請(qǐng)求的邏輯放在定時(shí)器中，每次執(zhí)行這個(gè)定時(shí)器之前，先清除定時(shí)器10分鐘練2.2.2關(guān)鍵詞搜索小區(qū)信息-實(shí)現(xiàn)步驟視總09：55如何將小區(qū)信息傳遞給了發(fā)布頁面要點(diǎn)提示關(guān)鍵詞搜索小區(qū)信息-傳遞小區(qū)信息給發(fā)布房源頁面掌握程度：應(yīng)用2.3房源發(fā)布模塊-關(guān)鍵詞搜索視總練給搜索列表項(xiàng)添加點(diǎn)擊事件在事件處理程序中，調(diào)用history.replace()方法跳轉(zhuǎn)到發(fā)布房源頁面將被點(diǎn)擊的校區(qū)信息作為數(shù)據(jù)一起傳遞過去在發(fā)布房源頁面，判斷history.location.state是否為空如果為空，不做任何處理如果不為空，則將小區(qū)信息存儲(chǔ)到發(fā)布房源頁面的狀態(tài)中課堂問答視知識(shí)總結(jié)2.3.1傳遞小區(qū)信息給發(fā)布房源頁面總練練習(xí)動(dòng)動(dòng)手，自己來實(shí)現(xiàn)數(shù)據(jù)的傳遞吧！提示給搜索列表項(xiàng)添加點(diǎn)擊事件onTipsClick在事件處理程序中，調(diào)用history.replace()方法跳轉(zhuǎn)到發(fā)布房源頁面ps.history.replace('/rent/add',{...})將被點(diǎn)擊的校區(qū)信息作為數(shù)據(jù)一起傳遞過去在發(fā)布房源頁面，判斷history.location.state是否為空如果為空，不做任何處理如果不為空，則將小區(qū)信息存儲(chǔ)到發(fā)布房源頁面的狀態(tài)中10分鐘練2.3.2傳遞小區(qū)信息給發(fā)布房源頁面視總Contents目錄

房源發(fā)布模塊-前期準(zhǔn)備工作

房源發(fā)布模塊-關(guān)鍵詞搜索

房源發(fā)布模塊-發(fā)布房源項(xiàng)目打包&項(xiàng)目?jī)?yōu)化11：16要點(diǎn)提示發(fā)布房源-頁面結(jié)構(gòu)分析掌握程度：理解3.1房源發(fā)布模塊-發(fā)布房源視12：36InputItem、TextareaItem、Picker三個(gè)組件都會(huì)去綁定onChange事件，那么我們能不能統(tǒng)一來配置事件處理函數(shù)要點(diǎn)提示發(fā)布房源-獲取房源數(shù)據(jù)掌握程度：應(yīng)用3.2房源發(fā)布模塊-發(fā)布房源視總練InputItem、TextareaItem、Picker組件，都使用onChange配置項(xiàng)，來獲取當(dāng)前值處理方式：封裝一個(gè)事件處理函數(shù)getValue來統(tǒng)一獲取三種組件的值

-創(chuàng)建方法getValue作為三個(gè)組件的事件處理函數(shù)-該方法接受兩個(gè)參數(shù)：1.name當(dāng)前狀態(tài)名；2.value當(dāng)前輸入值或者選中值-分別給InputItem/TextareaItem/Picker組件，添加onChange配置項(xiàng)-分別調(diào)用getValue并傳遞name和value兩個(gè)參數(shù)（注意：Picker組件選中值為數(shù)組，而接口需要字符串，所以，取索引號(hào)為0的值即可）課堂問答視知識(shí)總結(jié)3.2.1發(fā)布房源-獲取房源數(shù)據(jù)總練練習(xí)動(dòng)動(dòng)手，自己來獲取房源數(shù)據(jù)吧！提示創(chuàng)建方法getValue作為三個(gè)組件的事件處理函數(shù)該方法接受兩個(gè)參數(shù)：1.name當(dāng)前狀態(tài)名；2.value當(dāng)前輸入值或者選中值分別給InputItem/TextareaItem/Picker組件，添加onChange配置項(xiàng)分別調(diào)用getValue并傳遞name和value兩個(gè)參數(shù)（注意：Picker組件選中值為數(shù)組，而接口需要字符串，所以，取索引號(hào)為0的值即可）7分鐘練3.2.2發(fā)布房源-獲取房源數(shù)據(jù)視總04：43給HousePackge綁定onSelect屬性，通過事件處理函數(shù)獲取值，注意參數(shù)是一個(gè)數(shù)組要點(diǎn)提示發(fā)布房源-獲取房屋配置數(shù)據(jù)掌握程度：應(yīng)用3.3房源發(fā)布模塊-發(fā)布房源視總練給HousePackge組件，添加onSelect屬性在onSelect處理方法中，通過參數(shù)獲取到當(dāng)前選中項(xiàng)的值根據(jù)發(fā)布房源接口的參數(shù)說明，將獲取到的數(shù)組類型的選中值，轉(zhuǎn)化為字符串類型調(diào)用setState更新狀態(tài)課堂問答視知識(shí)總結(jié)3.3.1發(fā)布房源-獲取房屋配置數(shù)據(jù)總練練習(xí)動(dòng)動(dòng)手，自己來獲取房屋吧！提示給HousePackge組件，添加onSelect屬性在onSelect處理方法中，通過參數(shù)獲取到當(dāng)前選中項(xiàng)的值根據(jù)發(fā)布房源接口的參數(shù)說明，將獲取到的數(shù)組類型的選中值，轉(zhuǎn)化為字符串類型調(diào)用setState更新狀態(tài)5分鐘練3.3.2發(fā)布房源-獲取房屋配置數(shù)據(jù)視總04：59如何獲取房屋圖片？如何上傳房屋圖片？要點(diǎn)提示發(fā)布房源-房屋圖片上傳分析掌握程度：理解3.4房源發(fā)布模塊-發(fā)布房源視總根據(jù)發(fā)布房源接口，最終需要的是房屋圖片的路徑兩個(gè)步驟：1-獲取房屋圖片；2-上傳圖片獲取到圖片的路徑如何獲取房屋圖片？ImagePicker圖片選擇器組件，通過onChange配置項(xiàng)來獲取如何上傳房屋圖片？根據(jù)圖片上傳接口，將圖片轉(zhuǎn)化為FormData數(shù)據(jù)后再上傳，由接口返回圖片路徑課堂問答視知識(shí)總結(jié)3.4.1發(fā)布房源-房屋圖片上傳分析總上午復(fù)習(xí)如何解決搜索關(guān)鍵詞中搜索欄中每輸入一個(gè)值，就發(fā)一次請(qǐng)求，這樣對(duì)服務(wù)器壓力比較大，用戶體驗(yàn)不好的問題？圖片上傳的思路？React項(xiàng)目第11天-上午復(fù)習(xí)上午復(fù)習(xí)React項(xiàng)目第11天-上午復(fù)習(xí)如何解決搜索關(guān)鍵詞中搜索欄中每輸入一個(gè)值，就發(fā)一次請(qǐng)求，這樣對(duì)服務(wù)器壓力比較大，用戶體驗(yàn)不好的問題（JS文本框輸入防抖）？

使用定時(shí)器來進(jìn)行延遲執(zhí)行，每次開啟定時(shí)器的時(shí)候，先清空之前的定時(shí)器圖片上傳的思路？

-通過給ImagePicker圖片選擇器組件設(shè)置onChange配置項(xiàng)來獲取，第一個(gè)參數(shù)就是文件的數(shù)組來獲取

-根據(jù)圖片上傳接口，將圖片轉(zhuǎn)化為FormData數(shù)據(jù)后再上傳，設(shè)置請(qǐng)求頭的Content-Type:multipart/form-data,由接口返回圖片路徑04：07如何獲取的房屋圖片？事件處理函數(shù)中每個(gè)參數(shù)代表什么意思？要點(diǎn)提示發(fā)布房源-獲取房屋圖片掌握程度：應(yīng)用3.5房源發(fā)布模塊-發(fā)布房源視練總給ImagePicker組件添加onChange配置項(xiàng)通過onChange的參數(shù)，獲取到上傳的圖片，并且存儲(chǔ)到tempSlides中課堂問答視知識(shí)總結(jié)3.5.1發(fā)布房源-獲取房屋圖片總練練習(xí)動(dòng)動(dòng)手，自己來實(shí)現(xiàn)獲取房屋圖片吧！提示給ImagePicker組件添加onChange配置項(xiàng)通過onChange的參數(shù)，傳遞過來有三個(gè)參數(shù)，我們關(guān)心的就是第一個(gè)參數(shù)filesfiles圖片文件的數(shù)組；type操作類型：添加，移除（如果是移除，那么第三個(gè)參數(shù)代表就是移除的圖片的索引）獲取到上傳的圖片，并且存儲(chǔ)到tempSlides中5分鐘練3.5.2發(fā)布房源-獲取房屋圖片視總08：49上傳圖片與我們之前數(shù)據(jù)請(qǐng)求有什么不同？要點(diǎn)提示發(fā)布房源-上傳房屋圖片掌握程度：應(yīng)用3.6房源發(fā)布模塊-發(fā)布房源視上傳文件，我們需要通過FormData對(duì)象來幫我們實(shí)現(xiàn)把我們的圖片放在FormData中還需要設(shè)置請(qǐng)求頭的類型Content-Type：multipart/form-data課堂問答視知識(shí)總結(jié)3.6.1發(fā)布房源-上傳房屋圖片總練練習(xí)動(dòng)動(dòng)手，自己來實(shí)現(xiàn)獲取房屋圖片吧！提示給提交按鈕，綁定點(diǎn)擊事件在事件處理函數(shù)中，判斷是否有房屋圖片如果沒有，不做任何處理如果有，就創(chuàng)建FormData的示例對(duì)象（form）遍歷tempSlides數(shù)組，分別將每一個(gè)圖片圖片對(duì)象，添加到form中（鍵為：file，根據(jù)接口文檔獲?。┱{(diào)用圖片上傳接口，傳遞form參數(shù)，并設(shè)置請(qǐng)求頭Content-Type為multipart/form-data通過接口返回值獲取到圖片路徑7分鐘練3.6.2發(fā)布房源-上傳房屋圖片視總09：31發(fā)布房源的數(shù)據(jù)我們已經(jīng)都獲取到了，接下來就需要把這些數(shù)據(jù)封裝好，傳遞給服務(wù)器要點(diǎn)提示發(fā)布房源-完成掌握程度：應(yīng)用3.7房源發(fā)布模塊-發(fā)布房源視總練在addHouse方法中，從state里面獲取到所有的房屋數(shù)據(jù)使用API調(diào)用發(fā)布房源接口，傳遞所有房屋數(shù)據(jù)根據(jù)接口返回值中的狀態(tài)碼，判斷是否發(fā)布成功如果狀態(tài)碼是200，標(biāo)示發(fā)布成功，就提示：發(fā)布成功，并跳轉(zhuǎn)到已發(fā)布的房源頁面否則，就提示：服務(wù)器偷懶了，請(qǐng)稍后再試課堂問答視知識(shí)總結(jié)3.7.1發(fā)布房源-完成總練練習(xí)動(dòng)動(dòng)手，自己來實(shí)現(xiàn)發(fā)布房源吧！提示在addHouse方法中，從state里面獲取到所有的房屋數(shù)據(jù)使用API調(diào)用發(fā)布房源接口，傳遞所有房屋數(shù)據(jù)根據(jù)接口返回值中的狀態(tài)碼，判斷是否發(fā)布成功如果狀態(tài)碼是200，標(biāo)示發(fā)布成功，就提示：發(fā)布成功，并跳轉(zhuǎn)到已發(fā)布的房源頁面否則，就提示：服務(wù)器偷懶了，請(qǐng)稍后再試7分鐘練3.7.2發(fā)布房源-完成視總Contents目錄

房源發(fā)布模塊-前期準(zhǔn)備工作

房源發(fā)布模塊-關(guān)鍵詞搜索房源發(fā)布模塊-發(fā)布房源

項(xiàng)目打包&項(xiàng)目?jī)?yōu)化08：46發(fā)布房源的數(shù)據(jù)我們已經(jīng)都獲取到了，接下來就需要把這些數(shù)據(jù)封裝好，傳遞給服務(wù)器要點(diǎn)提示項(xiàng)目打包掌握程度：應(yīng)用4.1項(xiàng)目打包&項(xiàng)目?jī)?yōu)化視總練打開create-react-app腳手架的打包文檔說明在根目錄創(chuàng)建.duction文件，配置生產(chǎn)環(huán)境的接口基礎(chǔ)路徑在項(xiàng)目根目錄中，打開終端輸入命令：yarnbuild，進(jìn)行項(xiàng)目打包，生成build文件夾（打包好的項(xiàng)目?jī)?nèi)容）將build目錄中的文件內(nèi)容，部署到都服務(wù)器中即可也可以通過終端中的提示，使用serve-sbuild來本地查看（需要全局安裝工具包serve）課堂問答視知識(shí)總結(jié)4.1.1項(xiàng)目打包總練練習(xí)動(dòng)動(dòng)手，自己來打包項(xiàng)目吧！提示在根目錄創(chuàng)建.duction文件，配置生產(chǎn)環(huán)境的接口基礎(chǔ)路徑在項(xiàng)目根目錄中，打開終端輸入命令：yarnbuild，進(jìn)行項(xiàng)目打包，生成build文件夾（打包好的項(xiàng)目?jī)?nèi)容）將build目錄中的文件內(nèi)容，部署到都服務(wù)器中即可也可以通過終端中的提示，使用serve-sbuild來本地查看（需要全局安裝工具包serve）7分鐘練4.1.2項(xiàng)目打包視總05：44默認(rèn)情況下腳手架配置是隱藏的，我們可以通過兩種方式來修改webpack的配置項(xiàng)要點(diǎn)提示修改腳手架配置說明掌握程度：應(yīng)用4.2項(xiàng)目打包&項(xiàng)目?jī)?yōu)化視總-reate-react-app中隱藏了webpack的配置，隱藏在react-scripts包中兩種方式來修改-運(yùn)行命令npmruneject釋放webpack配置（注意：不可逆）-通過第三方包重寫webpack配置（比如：react-app-rewired等）課堂問答視知識(shí)總結(jié)4.2.1修改腳手架配置說明總12：46按需加載打包有什么好處要點(diǎn)提示項(xiàng)目?jī)?yōu)化-antd-mobile按需加載掌握程度：應(yīng)用4.3項(xiàng)目打包&項(xiàng)目?jī)?yōu)化視總打開antd-mobile在create-react-app中的使用文檔安裝yarnaddreact-app-rewiredcustomize-cra（用于腳手架重寫配置）修改package.json中的scripts在項(xiàng)目根目錄創(chuàng)建文件：config-overrides.js(用于覆蓋腳手架默認(rèn)配置)安裝yarnaddbabel-plugin-import插件（用于按需加載組件代碼和樣式）修改config-overrides.js文件，配置按需加載功能重啟項(xiàng)目（yarnstart）移除index.js中導(dǎo)入的antd-mobile樣式文件將index.css移動(dòng)到App后面，讓index.css中的頁面背景生效課堂問答視知識(shí)總結(jié)4.3.1項(xiàng)目?jī)?yōu)化-antd-mobile按需加載總15：30路由的懶加載要點(diǎn)提示項(xiàng)目?jī)?yōu)化-基于路由的代碼分割掌握程度：應(yīng)用4.4項(xiàng)目打包&項(xiàng)目?jī)?yōu)化視總目的：將代碼按照路由進(jìn)行分割，只在訪問該路由的時(shí)候才加載該組件內(nèi)容，提高首屏加載速度如何實(shí)現(xiàn)？React.lazy()方法+import()方法、Suspense組件（ReactCode-Splitting文檔）React.lazy()作用：處理動(dòng)態(tài)導(dǎo)入的組件，讓其像普通組件一樣使用import('組件路徑')，作用：告訴webpack，這是一個(gè)代碼分割點(diǎn)，進(jìn)行代碼分割Suspense組件：用來在動(dòng)態(tài)組件加載完成之前，顯示一些loading內(nèi)容，需要包裹動(dòng)態(tài)組件內(nèi)容課堂問答視知識(shí)總結(jié)4.4.1項(xiàng)目?jī)?yōu)化-基于路由的代碼分割總07：25react-virtualized組件優(yōu)化配置代理解決跨域問題要點(diǎn)提示項(xiàng)目?jī)?yōu)化-其他優(yōu)化和說明掌握程度：了解4.5項(xiàng)目打包&項(xiàng)目?jī)?yōu)化視總react-virtualized只加載用到的組件文檔腳手架配置解決跨域問題

-安裝第三方包

$npminstallhttp-proxy-middleware--save$#or$yarnaddhttp-proxy-middleware-創(chuàng)建src/setupProxy