react常見(jiàn)面試題
1什燕、為什么state值不能修改铣缠，而用this.setState去修改横殴？
setState是異步的。是否調(diào)用render進(jìn)行再次渲染茬缩。setState本質(zhì)是通過(guò)一個(gè)隊(duì)列實(shí)現(xiàn)state更新的赤惊，執(zhí)行setState時(shí)，會(huì)將要更新的state合并后放入狀態(tài)隊(duì)列凰锡，而不會(huì)立即更新未舟。如果沒(méi)有通過(guò)this.setState,而是直接this.state修改圈暗，會(huì)導(dǎo)致這個(gè)修改沒(méi)有放入隊(duì)列中，下次執(zhí)行this.setState合并隊(duì)列時(shí)裕膀，就會(huì)忽略這次的修改员串，從而導(dǎo)致數(shù)據(jù)沒(méi)有更新。
簡(jiǎn)單點(diǎn)說(shuō)昼扛，就是setState就是放入隊(duì)列寸齐，而this.state會(huì)跳過(guò)隊(duì)列，從而導(dǎo)致有可能這次的修改值會(huì)被忽略掉
2抄谐、react的鉤子函數(shù)有哪些渺鹦？請(qǐng)求放在那個(gè)函數(shù)中？為什么蛹含？渲染頁(yè)面鉤子函數(shù)的執(zhí)行順序什么毅厚？
鉤子函數(shù)：componentWillMount、render浦箱、componentDidMount吸耿、shouldComponentUpdate、componentWillUpdate憎茂、componentDidUpdate
請(qǐng)求放在componentDidMount珍语，因?yàn)檫@個(gè)在組件加載的時(shí)候只會(huì)執(zhí)行一次
執(zhí)行順序;componentWillMount、render竖幔、componentDidMount板乙、shouldComponentUpdate、componentWillUpdate拳氢、render募逞、componentDidUpdate
componentWillReceiveProps是在props發(fā)生改變的時(shí)候執(zhí)行
3、state與props有什么區(qū)別馋评？
props是外部組件傳入的數(shù)據(jù)放接，一般是父組件傳到子組件的數(shù)據(jù)。
props里面的數(shù)據(jù)不能修改留特，只能通過(guò)綁定父組件的方法來(lái)修改props里面的值纠脾，然后再傳到子組件。
而state是組件的私有變量蜕青。主要用于組件的保存苟蹈，控制以及修改自己的狀態(tài)，不
能通過(guò)外部的訪問(wèn)以及修改右核，只能通過(guò)內(nèi)部的this.setState方法來(lái)修改state里面的內(nèi)容慧脱。
4、react如何去操作dom的贺喝？
通過(guò)refs可以實(shí)現(xiàn)對(duì)dom的操作菱鸥。通過(guò)給組件添加ref=‘XXXXX’,然后在方法立馬通過(guò)調(diào)用this.refs.XXXXX宗兼，從而進(jìn)行對(duì)dom的操作
5、react在setState之后執(zhí)行了哪些操作氮采？
setState的基本過(guò)程是殷绍，在執(zhí)行setState之后，會(huì)執(zhí)行shouldComponentUpdate鹊漠、componentWillUpdate篡帕、render、componentDidUpdate贸呢。在執(zhí)行render的時(shí)候 this.state才會(huì)被更新。之前兩個(gè)鉤子函數(shù)都不會(huì)更新
6拢军、react性能優(yōu)化是哪個(gè)周期函數(shù)楞陷？
shouldComponentUpdate這個(gè)函數(shù)用來(lái)判斷是否需要調(diào)用render方法重新描繪dom，因?yàn)閐om的描繪非常的消耗性能茉唉，如果可以在shouldComponentUpdate中寫(xiě)出更優(yōu)化的dom diff算法可以極大的提高性能
7固蛾、diff算法
1.把樹(shù)形結(jié)構(gòu)按照層級(jí)劃分，之比較同級(jí)元素
2.給列表結(jié)構(gòu)的每個(gè)單元添加唯一的key屬性度陆，方便比較
3.react只會(huì)匹配相同的calss的component
4.合并操作艾凯，調(diào)用component的setState方法的時(shí)候，react將其標(biāo)記為dirty懂傀，到每一個(gè)事件循環(huán)結(jié)束趾诗，react會(huì)檢查所有標(biāo)記dirty的component重新繪制
5.選擇性子樹(shù)渲染，可以重寫(xiě)shouldComponentUpdate蹬蚁，提高diff算法的性能
8恃泪、react性能優(yōu)化的方案
重寫(xiě)shouldComponentUpdate來(lái)避免不必要的dom操作
使用key來(lái)幫助react來(lái)識(shí)別列表中所有子組件的最小變化
使用production版本的react.js
9、函數(shù)式組件和類組件有啥不同犀斋？
類組件不僅允許你使用更多的功能贝乎，如組件自身的狀態(tài)和生命周期鉤子函數(shù)，也能直接訪問(wèn)store并維持狀態(tài)
函數(shù)式組件僅是接收props叽粹，并將組件自身渲染到頁(yè)面時(shí)該組件就是一個(gè)無(wú)狀態(tài)組件览效，可以使用一個(gè)純函數(shù)來(lái)創(chuàng)建這樣的組件
10、什么是redux虫几？
redux的基本思想是整個(gè)應(yīng)用的state保持在一個(gè)單一的store中锤灿。store就是一個(gè)簡(jiǎn)單的JavaScript對(duì)象，而改變應(yīng)用的state的唯一方式就是在應(yīng)用用觸發(fā)action持钉，然后為這些action編寫(xiě)reducers來(lái)修改state衡招。整個(gè)state的轉(zhuǎn)化都是在reducers中完成的，并且不會(huì)有任何副作用
1.store通過(guò)reducer創(chuàng)建了初始狀態(tài)每强；
2.view通過(guò)store.getState()將store中保存的state掛載在了自己的狀態(tài)上始腾；
3.用戶產(chǎn)生了操作州刽，調(diào)用了actions 的方法；
4.actions的方法被調(diào)用浪箭，創(chuàng)建了帶有標(biāo)示性信息的action穗椅；
5.actions將action通過(guò)調(diào)用store.dispatch方法發(fā)送到了reducer中；
6.reducer接收到action并根據(jù)標(biāo)識(shí)信息判斷之后返回了新的state奶栖；
7.store的state被reducer更改為新state的時(shí)候匹表，store.subscribe方法里的回調(diào)函數(shù)會(huì)執(zhí)行，此時(shí)就可以通知view去重新獲取state宣鄙；
11袍镀、在redux中，什么是store冻晤？
store是一個(gè)JavaScript對(duì)象苇羡，它保存了整個(gè)應(yīng)用的state，于此同時(shí)鼻弧，store也承擔(dān)了以下的職責(zé)：
1.允許通過(guò)getState（）訪問(wèn)state
2.通過(guò)dispatch（action）改變state
3.通過(guò)subscribe（listener）注冊(cè)listeners
4.通過(guò)subscribe（listener）返回函數(shù)處理listener的注冊(cè)
12设江、在redux中，什么是action攘轩？
action是一個(gè)純JavaScript對(duì)象叉存，他們必須有一個(gè)type屬性表明正在執(zhí)行action的類型。實(shí)質(zhì)上action是將數(shù)據(jù)從應(yīng)用程序發(fā)送到store的有效載荷
13度帮、在redux中歼捏，什么是reducer？
一個(gè)reducer是一個(gè)純函數(shù)笨篷，該函數(shù)以先前的state和一個(gè)action作為參數(shù)甫菠，并返回下一個(gè)state
14、什么是純函數(shù)冕屯？
一個(gè)純函數(shù)是一個(gè)不依懶于且不改變其作用域之外的變量狀態(tài)的函數(shù)寂诱，這也意味著一個(gè)純函數(shù)對(duì)于同樣的參數(shù)總是返回同樣的結(jié)果
#vue與react的區(qū)別？
1安聘、react是嚴(yán)格上針對(duì)mvc的view層痰洒，vue則是mvvm模式
2、操作dom的方式不同浴韭，vue是通過(guò)指令操作dom丘喻，而react通過(guò)js進(jìn)行操作
3、數(shù)據(jù)綁定不同念颈，vue實(shí)現(xiàn)的是雙向綁定泉粉，而react是單向數(shù)據(jù)流
4、react的state內(nèi)容不可以直接修改，需要通過(guò)setState去修改嗡靡，vue的state不是必須的跺撼，數(shù)據(jù)主要有data屬性在vue對(duì)象中管理的
5、React是通過(guò)JSX渲染模板讨彼。而Vue是通過(guò)一種拓展的HTML語(yǔ)法進(jìn)行渲染歉井；
Vue本質(zhì)是MVVM框架，由MVC發(fā)展而來(lái)哈误；React是前端組件化框架哩至，由后端組件化發(fā)展而來(lái)；
