一.React常用知識(shí)
1.react生命周期的運(yùn)用
2.react-router/react-router-dom的運(yùn)用
? ? ?- 路由組建? ? router/route/link/navlink/redirect/withRouter/switch
? ? =>react-router-dom
route下的屬性path /exact /render /component
redirect下的屬性from to /to?
? ? ?- 跳轉(zhuǎn)路由
-傳參
-browserRouter和hashRouter，MemoryRouter 和?StaticRouter的區(qū)別
1.前者利用H5的 history 接口芭届，前臺(tái)路由就是后臺(tái)收到的路由丘侠，你點(diǎn)到其他頁(yè)面一刷新，得，根本沒這個(gè)文件祥款，服務(wù)器也很無辜较锡，到底讓我渲染個(gè)啥？后臺(tái)也可以簡(jiǎn)單的解決這個(gè)問題：甭管你請(qǐng)求的啥地址伏钠，我先把入口文件扔給你横漏。node處理方式如下（需要express）：
app.get('*',(request,response)=>{
? response.sendFile(path.resolve(__dirname,'../index.html'))
})
而hashRouter則刷新不會(huì)出現(xiàn)這個(gè)問題且通過#進(jìn)行連接
2.MemoryRouter 和 StaticRouter??分別是非瀏覽器環(huán)境和服務(wù)器端渲染用的
react-router中switch的作用
有<Switch>標(biāo)簽，則其中的<Route>在路徑相同的情況下熟掂，只匹配第一個(gè)缎浇，這個(gè)可以避免重復(fù)匹配
3.react父子組建的傳值
? ?-子組建接收父組建屬性或方法 this.props
? -父組建接收子組建的屬性? 通過執(zhí)行父組建的屬性傳參，然后通過執(zhí)行父組建的方法得到回調(diào)參數(shù)
-父組建執(zhí)行子組建的方法 通過傳屬性name作為執(zhí)行條件再配合
component willReceiveProps(nextProps){
if(nextProps.name!==this.props.name){
? ? ? ?//執(zhí)行子組建大方法...
? ? }??
}
還可以通過ref={(node)=>this.node=node}在父組建中得到子組建的實(shí)列然后將實(shí)例保存在this.node上打掘，然后通過this.node.childfunc()執(zhí)行其子組建的方法
4.非父子組建傳值?
? ? ?- redux? =>react-redux
action.dispatch=>store=>reducer?
action處理異步請(qǐng)求和dispatch命令 store接收然后去reducer進(jìn)行加工返回到store然后去頁(yè)面渲染store的數(shù)據(jù)? ,其中store利用createStore將reducer存入store华畏，createStore的第二個(gè)參數(shù)可以是中間件，applymiddleware(redux-thunk)主要用于異步請(qǐng)求axio可以返回一個(gè)方法而不再是單一的對(duì)象
? ? -mobx簡(jiǎn)化版redux
需要在入口文件配置index.js
import { Provider } from 'mobx-react'
import store from './mobxStore'
ReactDOM.render(
? ??<Provider store={store}>
? ? <App />
? ??</Provider>
? , document.getElementById('app')
)
src下創(chuàng)建mobxStore文件夾新建index.js尊蚁，導(dǎo)入action是為了新建方法亡笑，并修改值，observable為了監(jiān)聽方法值的變化横朋，導(dǎo)出的時(shí)候默認(rèn)new store(),頁(yè)面執(zhí)行mobx中的方法需要在class前面注入仑乌，此時(shí)執(zhí)行store重的方法this.props.store.changetodoIds()從而修改了todoIds的值
5.組建模塊化，提煉公用組建以及公用的方法
封裝公共組建琴锭，封裝異步請(qǐng)求方法（fetch /apicaller)
md5加密/日期時(shí)間格式的轉(zhuǎn)化/cookie的封裝/全局公共請(qǐng)求參數(shù)/簽名
6.跨域代理的配置
? webpack devserver配置代理
devServer:{
? ? ? ?contentBase:'./dist',
? ? ? compress:true,
? ? ? open:true,//自動(dòng)開啟瀏覽器
? ? ? port:9000晰甚，
? ? ? hot:true,//熱更新
? ? ? proxy:{
? ? ? ? ?'/api':? {
? ? ? ? ? ? ? ? ? ?target:'http://localhost:3000',
? ? ? ? ? ? ? ? ?pathRewrite:? {'^/api':'? '}
? ? ? ? ? ?}
? ? ? ?}
7.react性能優(yōu)化
? 1-----? ?sholudComponentUpdate：主要是用來手動(dòng)阻止組件渲染，一般在這個(gè)函數(shù)中做組件的性能優(yōu)化决帖。
和這種方法實(shí)現(xiàn)同樣效果的還可以React.PureComponent
2-----? ?react中map循環(huán)key的作用 ： key是React中用于追蹤哪些列表中元素被修改厕九、刪除或者被添加的輔助標(biāo)識(shí)。在diff算法中地回，key用來判斷該元素節(jié)點(diǎn)是被移動(dòng)過來的還是新創(chuàng)建的元素扁远，減少不必要的元素重復(fù)渲染俊鱼。
3----環(huán)境設(shè)置為生產(chǎn)模式，壓縮代碼
4-----路由懶加載畅买，異步加載模塊并闲，減少不必要的渲染
5---this的綁定
第一種是在構(gòu)造函數(shù)中綁定this，第二種是在render()函數(shù)里面綁定this谷羞，第三種就是使用箭頭函數(shù)帝火，都能實(shí)現(xiàn)上述方法；
但是哪一種方法的性能最好湃缎，是我們要考慮的問題犀填。應(yīng)該大家都知道答案：第一種的性能最好。
因?yàn)榈谝环N雁歌，構(gòu)造函數(shù)每一次渲染的時(shí)候只會(huì)執(zhí)行一遍宏浩；
而第二種方法，在每次render()的時(shí)候都會(huì)重新執(zhí)行一遍函數(shù)靠瞎；
第三種方法的話比庄，每一次render()的時(shí)候，都會(huì)生成一個(gè)新的箭頭函數(shù)乏盐，即使兩個(gè)箭頭函數(shù)的內(nèi)容是一樣的佳窑。
第三種方法我們可以舉一個(gè)例子，因?yàn)閞eact判斷是否需要進(jìn)行render是淺層比較父能，簡(jiǎn)單來說就是通過===來判斷的神凑，如果state或者prop的類型是字符串或者數(shù)字，只要值相同何吝，那么淺層比較就會(huì)認(rèn)為其相同溉委；
但是如果前者的類型是復(fù)雜的對(duì)象的時(shí)候，我們知道對(duì)象是引用類型爱榕，淺層比較只會(huì)認(rèn)為這兩個(gè)prop是不是同一個(gè)引用瓣喊，如果不是，哪怕這兩個(gè)對(duì)象中的內(nèi)容完全一樣黔酥，也會(huì)被認(rèn)為是兩個(gè)不同的prop藻三。
8.react運(yùn)行原理
采用虛擬dom 和diff算法結(jié)合
react是通過創(chuàng)建與更新虛擬元素來管理整個(gè)Virtual DOM的。
9.react對(duì)比vue運(yùn)行原理
? ? react 與vue都是函數(shù)式編程跪者，即聲明式編程棵帽，先構(gòu)建規(guī)則，然后去應(yīng)用規(guī)則渣玲，而傳統(tǒng)的則是命令時(shí)編程逗概，下命令
10.針對(duì)低版本的瀏覽器并不支持所謂的vue/react框架的原因
解決方案：查詢?yōu)g覽器版本，針對(duì)低版本的瀏覽器彈出提示版本過低
源地址：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function
https://blog.csdn.net/sinat_17775997/article/details/90417127
11.? ? 虛擬dom
在react中忘衍，React把真實(shí)DOM樹轉(zhuǎn)為JavaScript對(duì)象樹仗谆，也就是所謂的虛擬DOM指巡。
在每次更新后，會(huì)重新計(jì)算Virtual DOM隶垮，并和上一次的Virtual DOM進(jìn)行對(duì)比，對(duì)發(fā)生的部分進(jìn)行批量更新,生成真實(shí)dom去渲染頁(yè)面
虛擬dom實(shí)現(xiàn)了根據(jù)事件所需找到對(duì)應(yīng)節(jié)點(diǎn)去變更秘噪，減少重新渲染所有節(jié)點(diǎn)的次數(shù)狸吞，減少dom操作次數(shù)，提高頁(yè)面渲染效率
vdom核心api?h('<標(biāo)簽名>',{...屬性名},[...子元素])
patch(container,vnode)初始化節(jié)點(diǎn)初次渲染
patch(vnode,newVnode)需要變更的節(jié)點(diǎn)指煎，原來的節(jié)點(diǎn)與新節(jié)點(diǎn)對(duì)比蹋偏，重新渲染。
二.項(xiàng)目打包環(huán)境的配置
-1.webpack原理構(gòu)建機(jī)制
a.解析webpack配置參數(shù)至壤，合并從shell傳入和webpack.config.js文件里配置的參數(shù)威始，生產(chǎn)最后的配置結(jié)果。
b.注冊(cè)所有配置的插件像街，好讓插件監(jiān)聽webpack構(gòu)建生命周期的事件節(jié)點(diǎn)黎棠，以做出對(duì)應(yīng)的反應(yīng)。
c.從配置的entry入口文件開始解析文件構(gòu)建AST語法樹镰绎，找出每個(gè)文件所依賴的文件脓斩，遞歸下去。
d在解析文件遞歸的過程中根據(jù)文件類型和loader配置找出合適的loader用來對(duì)文件進(jìn)行轉(zhuǎn)換畴栖。
e.遞歸完后得到每個(gè)文件的最終結(jié)果随静，根據(jù)entry配置生成代碼塊chunk。
f.輸出所有chunk到文件系統(tǒng)吗讶。
需要注意的是燎猛，在構(gòu)建生命周期中有一系列插件在合適的時(shí)機(jī)做了合適的事情，比如UglifyJsPlugin會(huì)在loader轉(zhuǎn)換遞歸完后對(duì)結(jié)果再使用UglifyJs壓縮覆蓋之前的結(jié)果
-2 .webpack 常見的配置
? ? a.入口? =>entry
? ? b.出口=>output /filename/path
? ? c.loader
是用來加載處理各種形式的資源,本質(zhì)上是一個(gè)函數(shù),? ? ? 接受文件作為參數(shù),返回轉(zhuǎn)化后的結(jié)構(gòu),loader 用于對(duì)模塊的 源代碼進(jìn)行轉(zhuǎn)換即?文件轉(zhuǎn)換器照皆，例如把es6轉(zhuǎn)換為es5重绷，scss轉(zhuǎn)換為css。
? ? d.plugins
用于擴(kuò)展webpack的功能纵寝，在webpack構(gòu)建生命周期的節(jié)點(diǎn)上加入擴(kuò)展hook為webpack加入功能论寨。
e.chunk多個(gè)文件組成的一個(gè)代碼塊，例如把一個(gè)可執(zhí)行模塊和它所有依賴的模塊組合和一個(gè)chunk這體現(xiàn)了webpack的打包機(jī)制爽茴。
-3 .webpack 性能優(yōu)化
---優(yōu)化構(gòu)建速度
? ? ?Webpack在啟動(dòng)后會(huì)根據(jù)Entry配置的入口出發(fā)葬凳，遞歸地解析所依賴的文件。這個(gè)過程分為搜索文件和把匹配的文件進(jìn)行分析室奏、轉(zhuǎn)化的兩個(gè)過程火焰，因此可以從這兩個(gè)角度來進(jìn)行優(yōu)化配置。
https://juejin.im/post/5b652b036fb9a04fa01d616b
三.echarts在react中的運(yùn)用
四.期貨/股票行情的運(yùn)用? websocket /mqtt
? ? ---websocket 與普通http請(qǐng)求的區(qū)別?
?---
五.ES6語法的運(yùn)用
? 1.es6解構(gòu)
? 2.箭頭函數(shù)
? ? ?箭頭函數(shù)和普通函數(shù)的區(qū)別
