[toc]
REACT
react ：
1.用來構(gòu)建用戶界面的 JAVASCRIPT 庫
2.react 專注于視圖層，通過組件來構(gòu)建界面應用。
為什么要組件化開發(fā)
可復用 可組件 可開發(fā)
jsx
javascript xml
自定義標簽 HTML也是屬于xml
一種javascript 的語法擴展，我們推薦在react中使用JSX來描述用戶界面。
<{來區(qū)別html和js
創(chuàng)建的是虛擬的DOM元素就是一個JS對象，最終REACT會最終渲染成真正的元素。
js對象：{type:"h1",props:{className:"red"},chileren:"hello"}
1.jsx元素 ->react元素
2.虛擬DOM （js對象）->render轉(zhuǎn)換成真實的DOM
1.jsx=js+html <{ 來區(qū)分HTML和js
2.若有多個相鄰的Jsx元素，最外層必須有個包圍的元素
3.{}是js表達式，變量，三元運算符，不可以放語句，純對象，可以放數(shù)組，但是數(shù)組成員不能放對象。
4.{}可以獲取返回值得內(nèi)容，不可放函數(shù)本身
5.return 后若有jsx元素，需要換行時，的拿（）包起來，表示一起返回，
6.行內(nèi)樣式的放在一個對象里，style={styleObj}
ReactDOM.render(<div style={styleObj}>{bind(obj)}</div>,window.root);
7.特殊屬相，與關鍵詞一樣的屬性，采用駝峰式命名法，與html標簽里設置屬性一樣。
react的組件
組件：函數(shù)組件，類組件
組件和jsx的區(qū)別：組件名首字母大寫
分類：函數(shù)組件和類組件
函數(shù)組件：沒有this，沒有狀態(tài)，通過props接收數(shù)據(jù)
類組件：有this，有狀態(tài)，有生命周期。通過state狀態(tài)，
獲取數(shù)據(jù)有兩種方式：props 只能接收，不能修改。在函數(shù)和類組件都有
state：只有類組件里面有，改變數(shù)據(jù)的值。
Object.keys(this.props) :屬性轉(zhuǎn)換成數(shù)組。還有JSON.stringfiy(this.props) 把純對象轉(zhuǎn)換成字符串
對props的屬性進行驗證：安裝npm install prop-types
受控組件和非受控組件：
非受控組件：通常說的是表單元素 表單元素的value是根據(jù)用戶輸入的內(nèi)容確定的
受控組件：value值不再是由用戶輸入值確定，而是有react的state狀態(tài)來控制，必須加onChange事件。
//jsonp 和改變響應頭的cros的方式解決跨域請求。
那axios里面覺得jsonp不好，就支持cros的跨域方式。
那如果jsonp支持的話就安裝 cnpm install jsonp
生命周期鉤子函數(shù)
組件調(diào)用開始：重新調(diào)用可能從頭開始。
constructor
componentWillMount 組件將要掛載
render：渲染組件
componentDidMount ：組件掛載完成
//數(shù)據(jù)更新前
shouldComponentUpdate(nextProps,nextState) 詢問是否要更新組件 return 值為true時，為false時則不更新。
componentWillUpdate 更新前觸發(fā)
render 渲染組件
componentDidUpdate 更新后觸發(fā)
組件銷毀
componentWillUnmount ：
屬性更新
componentWillReceiveProps(newProps)
將要接收屬性 true false
腳手架
生成腳手架：create-react-app my-app
官方提供的，快速搭建REAVT工程結(jié)構(gòu)的腳手架。
注意點：如果當前電腦安裝了yarn，基于腳手架安裝工程目錄的時候也是基于yarn安裝的，我們后期再手動安裝其他模塊，建議不要使用npm了，因為有時候會發(fā)生丟包，包錯亂等事項。
1.作用：快速構(gòu)建一個工程化結(jié)構(gòu)目錄
node_modules:安裝包
public:index.html,xxx.html 存放項目靜態(tài)頁面的，或者是無需webpack編譯，直接在頁面中導入的資源文件。
src:index.js,xxx.xx 當前項目大部分的邏輯代碼，和一些資源都是存放到這個文件夾下的。
.gitignore:packjage.json 依賴的模塊，安裝包。
腳手架生成的配置清單
react:16.4的版本
react-dom:16.4版本 構(gòu)建html
react-native:這是構(gòu)建app的
react-scripts ：1.1版本 把webpack所需要的插件及加載器全部融合一起了，
包括：webpack webpack-dev-server
babel eslint ....
腳手架為了美化結(jié)構(gòu)目錄，把配置好的webpack隱藏到react-script中，放到node_modules下。
常見的操作命令
yarn xxx 或者 npm run start
start ：開發(fā)環(huán)境下使用的
- yarn start
- 按照生成的webpack配置項，把項目整體進行打包編譯，把react的jsx語法編譯為es6語法，把css等進行處理。
- 創(chuàng)建一個本地服務的，端口號默認3000，并且自動打開瀏覽器預覽編譯后的代碼。
- 并且自動檢測文件的改動。一旦發(fā)生改動就會重新編譯，然后自動刷新瀏覽器。
build:生產(chǎn)環(huán)境下使用的
- cnpm run build 或 yarn bulid
- 生成一個build文件夾，用來存放打包或者文件。
- 基于默認的webpack配置項，把項目進行編譯打包
- 把build找那個的內(nèi)容步數(shù)到服務器上即可
test:測試模式下，一般不用
eject：
- yarn eject cnpm run eject
- 把默認隱藏的webpack配置項暴露出來，這樣我們可以在默認的基礎上進行修改，變成符合我們自己項目的配置結(jié)構(gòu)。
- 此操作是不可逆轉(zhuǎn)的，一旦暴露出配置項，將無法再把它隱藏。謹慎操作
- config 文件夾 ：存放的是webpack的一些配置項
- webpack-config.dev.js 執(zhí)行yarn start 走的是這個配置項。
- webpack.config.prod.js 執(zhí)行yarn build 走的是這個配置項
- scripts 當我們執(zhí)行yarn xxx的時候，首先找到這里對應的js文件，并且把它執(zhí)行，從而走到對應的webpack配置。
修改腳手架
安裝less
- yarn add less less-loader
- 修改webpack 配置項：
上傳的時候都會加上時間戳：js/index.js/?201808041111 get請求。后來有了webpack后，就加hash值，有了hash值處理為了不走緩存的。
修改本地啟動服務的端口號
openBrower：打開瀏覽器的
start.js的43行 ，協(xié)議，域名都可以改
$ set PORT=8000 設置環(huán)境變量的端口號8000（同樣的還有http post）
也可以在package.json里面改：
start:"set PORT=9000&set HTTPS=true&node scripts/start.js";
環(huán)境變量只要執(zhí)行一次。之后不變的了就。
擴展
仔細研究webpack 配置項和每一項的作用
研究webpack的優(yōu)化，打包編譯的時候快一點，把文件壓縮更小一些等。
render
render([JSX],[container],[callback]);
第二個虛擬DOM最后渲染到的容器，不建議是BODY，render渲染的時候會用新的DOM覆蓋了原有容器中的內(nèi)容。
第三個虛擬DOM插入到頁面中，觸發(fā)的回調(diào)函數(shù) 已經(jīng)成為真實的DOM
jsx的渲染原理
render([JSX],[container],[callback]);
jsx指的是javascript xml(html)
REACT獨有的語法=》virtual dom 虛擬DOM。
container:虛擬DOM最后渲染到的容器，不建議是BODY。
callback:把虛擬DOM插入到頁面中，觸發(fā)的回調(diào)函數(shù)。（現(xiàn)在已經(jīng)成為真實的DOM）。
原理：1.基于babel-preset-react-app這個語法解析包，把JSX語法元素變?yōu)镽EACT.createElement(...)這種格式；2.基于createElement把傳遞的參數(shù)，處理為jsx對象。react在渲染解析的時候，會把所有的html標簽都轉(zhuǎn)換為createelement的處理方式（返回一個元素對象）。具體的有type：標簽名；prop：屬性對象（給當前元素設置的屬性都在這里，沒有設置屬性結(jié)果是null，如果有兒子，則把兒子依次傳遞過來，沒有就啥都不傳。style,children
//jsx的渲染原理
//1.基于babel-react-app 這個語法解析包，把jsx語法元素變誒react.createElement(...)這種格式
//2.基于createElement把傳遞的參數(shù)處理為jsx對象，即JS對象。
//createElement():REACT在渲染解析的時候，會把所有的HTML標簽都轉(zhuǎn)換為CREATE-ELEMENT的處理方式，（返回一個元素對象）
//->type 標簽名 props:屬性對象(給當前元素設置的屬性都在這里，沒有設置屬性結(jié)果是null)
//如果有兒子，則把兒子一次傳遞過來，沒有就啥也不傳。
//返回對象的格式：
//(
// type:'div',
// props:{
// style:...,
// ....
// children:可能有可能沒有，有的話可能是一個數(shù)組，也可能是一個字符串。或者是一個對象。
// key:null,
// ref:null
// }
// )
//3.基于render把對象按照動態(tài)創(chuàng)建DOM元素的方式插入到指定的容器中即可。
http://babeljs.io/ 把所有的語法編譯es5
//創(chuàng)建組件的兩種辦法：
//1，函數(shù)式組件創(chuàng)建：執(zhí)行函數(shù)的jsx即可
//2.繼承是component類來創(chuàng)建組件，在組件render方法中返回JSX即可
//調(diào)取組件：單閉合 雙閉合
1.單閉合是用函數(shù)式組件創(chuàng)建的，不能寫屬性，沒有children。
2.雙閉合是用class extends Component{} 里面有children的屬性
//virtual dom 即為虛擬DOM 即 jsx react 獨有的語法
react的基礎知識
1.屬性
調(diào)取組件的時候，傳遞給組件的信息（render渲染的時候會把props傳遞給組件，props就是屬性）
屬性的作用：讓組件呈現(xiàn)不同的效果，具有多元化。
屬性的特點：傳遞進來的屬性在組件內(nèi)部不能修改，也就是它是“只讀”的。（只能重新調(diào)取組件，來修改屬性的值，并且重新傳遞值）。
/在jsx中，null,undefined都是表示空元素/
雖然不能修改屬性值，但是在類創(chuàng)建組件的方式中，我們給組件栓塞制默認值和一設置一些規(guī)則。
yarn add prop-types 安裝來改變數(shù)值和字符串。的安裝包
繼承component和PureComponent的區(qū)別:
React.PureComponent 與 React.Component 幾乎完全相同，但 React.PureComponent 通過prop和state的淺對比來實現(xiàn) shouldComponentUpate()。
如果React組件的 render() 函數(shù)在給定相同的props和state下渲染為相同的結(jié)果，在某些場景下你可以使用 React.PureComponent 來提升性能。
React.PureComponent 的 shouldComponentUpdate() 只會對對象進行淺對比。如果對象包含復雜的數(shù)據(jù)結(jié)構(gòu)，它可能會因深層的數(shù)據(jù)不一致而產(chǎn)生錯誤的否定判斷(表現(xiàn)為對象深層的數(shù)據(jù)已改變視圖卻沒有更新, 原文：false-negatives)。當你期望只擁有簡單的props和state時，才去繼承 PureComponent ，或者在你知道深層的數(shù)據(jù)結(jié)構(gòu)已經(jīng)發(fā)生改變時使用 forceUpate() 。或者，考慮使用 不可變對象 來促進嵌套數(shù)據(jù)的快速比較。
此外,React.PureComponent 的 shouldComponentUpate() 會忽略整個組件的子級。請確保所有的子級組件也是”Pure”的。
繼承的在constructor里面有兩個方法：即為實例上調(diào)取constructor上面的兩個方法：this.setState();//更改狀態(tài)
this.forceUpdate();//強制更新。不更改狀態(tài)也可以強制更新。
2.狀態(tài)
自己在組件內(nèi)部定義的。組件內(nèi)部更新，可以通知組件重新更新，用this.setState。，可以控制內(nèi)部渲染 ，不需要重新調(diào)取組件也可以重新渲染。
this.setState方法：不僅可以修改狀態(tài)，還可以通知組件重新渲染。this.state雖然狀態(tài)改變，但是不會渲染頁面。但是我們可以強制渲染：this.forceUpDate();
組件重新渲染的方式：
- 重新調(diào)取組件（或者重新調(diào)取的時候傳遞新的屬性值）
- 修改組件的狀態(tài)
- 操作DOM
- forceUpDate
- 。。。
輪播圖
真實項目中我們創(chuàng)建組件一般都用類的方式，很少使用函數(shù)式創(chuàng)建。
1.類創(chuàng)建組件
有生命周期函數(shù)，
有實例：狀態(tài)，上下文等都有
可以基于狀態(tài)等信息控制組件重新渲染（調(diào)用組件，組件內(nèi)容還是可以繼續(xù)更新的）
2.函數(shù)組件
只有傳遞的屬性，其他的都沒有，生命周期，狀態(tài)，上下文等都沒有。
調(diào)用組件后，如果不重新調(diào)用，組件中的內(nèi)容基本上是不修改的，靜態(tài)組件。
項目中的問題
1.由于最后webpack把所有的css都合并在一起，開發(fā)時為了保證樣式不沖突，需要保證每一個組件的最外層樣式類唯一（命名規(guī)范：組件名+樣式類名）
2.transition ：在主棧中，以最后一次為準。所以不要放在主棧中，放在定時器當中，岔開節(jié)奏。
[toc]
REACT 1
安裝包
npm root -g
后綴cmd是全局可執(zhí)行的命令。
create-react-app 執(zhí)行的是node_moules里面的index.js文件。
也可以直接考，除了考create-react-app文件，還有cmd文件。
npm install nrm -g
nrm ls：展開看到許多文件命令，看在哪個源下
然后nrm use cnpm 就可以直接使用的命令
cnpm就是淘寶鏡像
yarn 不能安裝在全局下，還是安裝在本地的localstroge.
把安裝在全局下，可以使用命令，因為全局安裝會生成cmd的命令。如果安裝在本地上，就需要自己在package里面的script里面配置一下模塊。
但是如果想在如webpack想在項目中用，就在本地安裝。
也可以自己去拷一下。文件夾和cmd命令文件。
swiper不支持es6的模板導入，所以報錯。解決：在public文件里面建一個statlic，然后把index文檔中，引入swiper的css和js,而且放到body里面。原因是webpack里面項目會自動編譯到head標簽里面，所以在編譯之后加引入。但是在react.js中寫的是window.Swiper。
開發(fā)環(huán)境(dev)和生產(chǎn)環(huán)境(prod)
復合組件
組件嵌套：父組件嵌套子組件
settings-editor-live templates-javascript-選中 模板
平行組件：沒有嵌套關系的組件，包含兄弟組件
1.父組件把信息傳遞給子組件（復合組件信息傳遞）
父組件可以基于屬性傳遞給子組件，（傳遞是單向的）父傳子，子不能傳父。對于嵌套層級較深的組件，可以依托這種范式一級級傳遞下去即可。
2.平行組件讓擁有共同的父級組件，可以進行信息交互。我們可以讓其擁有VOTE父組件，如果FOOTER把VOTE中的信息改了（子改動父），這樣我們就可以讓VOTE把最新修改的信息傳遞給body（父傳子）
？子組件如何修改父組件的信息
父組件基于屬性把自己的一個函數(shù)FN傳遞給子組件，子組件在某些操作下，把FN執(zhí)行，而執(zhí)行FN的過程我們就可以修改父組件中的一些信息了=>（原理類似于回調(diào)函數(shù)）
基于上下文管理傳遞的信息
因為上方的方法，的弊端：屬性只能一層層傳遞，對于復雜的組件嵌套操作不方便，而且需要在調(diào)取組件的時候，把傳遞的屬性一一列舉才可以；
而上下文也是依托組件嵌套關系完成的，但是它的優(yōu)勢在于：當前組件（祖先）設置一些上下文，后代所有組件（兒子或者孫子等）都可以隨時獲取（不需要調(diào)取組件的時候一一傳遞，基于某些方法直接獲取即可）這些信息使用。
REDUX
全局有一個公共的容器（所有組件都可以操作），我們可以在footer中把全局容器中的信息進行修改，而且只要全局信息修改，就可以通知所有用到該信息的組件重新渲染（類似于發(fā)布訂閱）？REDUX就是這種解決方案：redux只有一個作用，就是為了實現(xiàn)組件之間的信息交互。
過程
有一個公共容器，存儲需要共享的信息（倉庫）->createStore ，在管理員中reducer,管理員就是用來修改容器中的公共狀態(tài)。然后body如果需要這些公共信息的時候，從容器中獲取狀態(tài)信息用來展示即可，getState。footer想改變body的信息的時候，就通知管理員去修改狀態(tài)（派發(fā)任務：通知管理員做具體的事情 dispatch）。
在容器中有天生自帶的事件池，發(fā)布訂閱，當容器中狀態(tài)改變會通知事件池中的方法執(zhí)行。而body想事件池中追加方法：方法執(zhí)行控制body組件重新渲染即可，subscribe 監(jiān)聽。
總結(jié)：1.執(zhí)行createstore，創(chuàng)建一個容器（store）用來管理公用的狀態(tài)信息。創(chuàng)建一個事件池，用來存儲一些方法（方法一般都是用來通知某個組件重新渲染的）。當容器中的狀態(tài)改變，會自動通知事件池中的方法依次執(zhí)行。2.基于store.getState可以獲取容器中存儲的狀態(tài)信息（拿到狀態(tài)信息就可以做數(shù)據(jù)綁定操作了）。3.我們可以基于store.subscribe向事件池中追加方法（也可以移除事件池的方法）。4.想要修改狀態(tài)信息，首先雇一個管理員（reducer），它就是用來修改容器中狀態(tài)的。當我們在組件中進行某些操作想要修改狀態(tài)信息的時候，我們首先dispatch派發(fā)一個任務給reducer，并且告訴reducer，如何去修改狀態(tài)信息。
狀態(tài)信息都是reducer修改的。reducer記錄了所有修改狀態(tài)的行為范式，我們以后想要知道怎么改狀態(tài)，只需要看reducer即可。
公共的框架信息，
yarn add redux react-redux 安裝
redux:不局限于任何框架(vue/react/angular/jq....)
react-redux :把redux進一步封裝，專門給react框架開發(fā)的，操作起來更加簡潔。
vuex：類似于redux的操作思想，專門為vue框架定制的，
dua：把redux、react-redux進一步封裝，操作更簡潔
mobx：和redux不完全一致，也是用來管控公共狀態(tài)的，只不過操作起來更加簡單而已。
重要信息
jsx原理。ref輪播圖，腳手架。redux。數(shù)組的扁平化，淺克隆，深度克隆的方案：常用的簡單算法。
REDUX的工程化管理
1.reducer的模塊化拆分：每一個模塊有一個自己的對應的reducer，最后基于一些方法把所有的reducer合并即可。
2.基于ActionCreater統(tǒng)一管理每次派發(fā)需要的行為對象，而且和reducer一樣，也是分版塊管理的。
3.把dispatch和reducer校驗時候需要的行為標識，進行統(tǒng)一管理。把容器的東西redux放在store文件夾里。
action文件夾中存放的是action-creater的內(nèi)容 管理的行為對象
- pesonal.js：personal版塊的reducer
- vote.js：vote版塊的reducer
- .....
- index.js：把所有版塊進行合并
reducer文件夾里存放的是每個版塊的reducer
- pesonal.js：personal版塊的reducer
- vote.js：vote版塊的reducer
- .....
- index.js：把所有版塊進行合并
action-types.js：存放的是項目中需要的所有的行為標識
index.js：創(chuàng)建store容器
使用redux開發(fā)：
1.把創(chuàng)建好的store掛載到上下文上，那個組件需要，則從上下文獲取
2.需要獲取store中的狀態(tài)信息，我們需要機遇getstate獲取，并且展示；為了容器狀態(tài)更改組件重新渲染，我們還需要手動的subscribe。
3.需要派發(fā)的時候，我們自己還需要導入aciton，把對應模塊中寫的creator方法執(zhí)行，手動dispatch一下。
為了簡化基于redux開發(fā)時候，編寫業(yè)務邏輯的代碼，可以使用react-redux。
1.provider
我們把provider設置為當前項目的根組件，可以把store自動掛載到整個項目最外層根組件上下文中。項目所有其他組件都可以基于上下文獲取store了。
把store作為屬性，所有的子組件就作為Provider的內(nèi)容。
2.connect
可以自動從provider上下文獲取store。
可以把store中管理的狀態(tài)，和action中管理的行為對象，都基于屬性的方式傳遞給對應的組件。
當store中狀態(tài)改變，自動重新渲染當前組件，不需要我們自己subscribe了。
高階組件，一個組件里套了另一個組件。
react組件要
中間件
cnpm install redux-logger
代碼
[toc]
React 項目
分類
課程版塊:
課程列表
課程篩選
課程詳情 （操作購物車按鈕）
購物版塊：
- 購物車列表管理
- 刪除
- 支付
- 已支付列表
個人中心版塊：
基本信息
登錄
注冊
公共部分：
頭部導航
底部MENU
按模塊劃分，公共部分小組長
技術棧
- 基于REACT實現(xiàn)spa單頁面應用
- react
- react-dom
- react-router-dom 實現(xiàn)路由切換
- redux/react-redux/react-actions
- axios
- less
- 公共組件 ant degin
- 一些其他的插件
- 團隊的話基于GIT進行團隊協(xié)作開發(fā)
- 基于webpack進行項目編譯部署
- create-react-app
索要API接口文檔，及設計稿/需求文檔
搭建整個項目框架結(jié)構(gòu)
|-src
|-api
|-index.js axios常規(guī)配置
|- course.js 課程版塊的接口
|- personal.js 個人中心版塊的接口
|- cart.js 購物車版塊接口
| - component 公共組件
| - Nav.js
| - Menu.js
| - containers 業(yè)務組件 具體的頁面
| - course
| - personal
| - cart
| - store dev mobels
| - actions
| - index.js
| - course.js
|- ..
| - reducers
| - index.js
| - course.js
|- ..
| - action-types.js
| - index.js
1.withCredentials 在cors跨域請求數(shù)據(jù)的時候，我們設置這個字段為true，是為了保證請求中可以攜帶資源憑證，最主要的憑證就是COOKIE.在xml.resposetext中默認為false
2.設置響應攔截器，把從服務器獲取的信息進行攔截處理，把獲取信息中的響應主體內(nèi)容獲取即可其余的信息我們一般不怎么操作。
axios.interceptors.response.use(result=>result.data);
當前配置支隊post、put請求有效果.攔截通過請求逐日傳遞給服務器端的數(shù)據(jù)，默認傳遞的格式的是JSON格式，但是真實項目中url-encoded格式也較常用，如果服務器支持的是這種格式，我們在這里需要把信息做處理。
axios.defaults.transformRequst=(data={})=>{}
客戶端和服務器信息通信，一般傳遞的數(shù)據(jù)格式有以下幾種：
1.JSON格式
'{"A":"x","B":"y"}'
服務器返回給客戶端的一般都是JSON格式。
但是客戶端給服務端也有JSON格式的
2.X-WWW-FORMAT-URLENCODED
A=x&B=y&C=z....
客戶端傳遞給服務器的數(shù)據(jù)格式一般都是這種格式。get系列請求問號傳參，傳遞給服務器的就是這種格式，所有后臺為了方便處理，可能會要求POST請求主體傳遞的數(shù)據(jù)格式也是這種格式。并且通過相關方法實現(xiàn)表單序列化后，得到的也是這種方式。。
3.qs 實現(xiàn)對象和url-encoded格式字符串相互轉(zhuǎn)換的插件
4.Switch只能放自己創(chuàng)建的組件，并且是首字母大寫，不能放正常的標簽。
第一種
{/*<Switch>*/}
{/*不能寫正常的標簽*/}
{/*1*/}
{/*<Nav/>*/}
{/*2*/}
{/*<Route path='/course' component={Course} />*/}
{/*<Route path='/personal' component={Personal}/>*/}
{/*<Route path='/cart' component={Cart}/>*/}
{/*<Redirect to='/course'/>*/}
{/*3*/}
{/*<Menu/>*/}
{/*</Switch>*/}
第二種：
<div>
<header>
<Nav/>
</header>
<main>
<Switch>
<Route path='/course' component={Course} />
<Route path='/personal' component={Personal}/>
<Route path='/cart' component={Cart}/>
<Redirect to='/course'/>
</Switch>
</main>
<footer>
<Menu/>
</footer>
</div>
第三種
//=>解決方案二：把需要構(gòu)建的結(jié)構(gòu)全部放到APP組件中，在這個組件中控制自己的路由和結(jié)構(gòu)
//=>INDEX
<HashRouter>
<Switch>
<App>
<Route path='/course' component={Course}/>
<Route path='/personal' component={Personal}/>
<Route path='/cart' component={Cart}/>
</App>
<Redirect to='/course'/>
</Switch>
</HashRouter>
//=>APP
render() {
return <div>
{/*HEADER-NAV*/}
<header><Nav/></header>
{/*MAIN-BODY*/}
<main>
{this.props.children}
</main>
{/*FOOTER-MENU*/}
<footer><Menu/></footer>
</div>;
}
一級路由和大框架：組長
5.雖然我們會把很多js程序都下載src中，但是有一些程度我們需要直接寫在HTML頁面中。
src中的東西最后會打包到一個js文件中，這樣導致該js文件很大，頁面接在的時候，需要一段時間才能加載完成。
我們很多程序相對簡單，但是需要在html一加載就把它執(zhí)行了，此時寫在HTML中非常明智。
對于不支持COMMON.js或者ES6Module模塊規(guī)范的，我們最好也寫在HTML中的，例如swiper.js。
在項目中，為了避免樣式?jīng)_突，我們需要保證：
- 基于Less/sess這種有嵌套層級的預編譯語言開發(fā)，
- 最外層結(jié)構(gòu)樣式類名不要沖突，
- 把里層的所有樣式都嵌套到最外層樣式的里面編寫
star
基于NavLink實現(xiàn)路由切換的時候，路由可以切換，但是選中的樣式并沒有立即更新過來，只有頁面重新刷新才會更新，這是為啥？ - 路由切換把MAIN中的組件重新渲染，但是FOOTER中的組件始終是固定在底部的，每一次路由切換并不會重新渲染，所以選中樣式無法更新。
- 我們基于DOM操作自己控制樣式類，也可以把整個組件用withRouter包起來，不要把connect包起來，一層層包裹并不好。
6.SEO優(yōu)化技巧
SEO優(yōu)化：一種讓網(wǎng)站排名靠前的優(yōu)化技巧，百度飼養(yǎng)了一個寵物，百度蜘蛛，百度爬蟲，它會按照一定的規(guī)律定期收錄你網(wǎng)站中的內(nèi)容，當用戶輸入關鍵詞搜索的時候，百度會把匹配的網(wǎng)站呈現(xiàn)出來，誰的這個關鍵詞排名高，誰靠前，。
SEO競價：一種讓網(wǎng)站排名靠前的花錢技巧
1.給網(wǎng)站設置 title/keywords/description等、
2.h1只有一個，h1權(quán)重高，
項目經(jīng)驗：工作經(jīng)歷，時間。
