高階組件相關(guān)

什么是高階組件，它有哪些運(yùn)用？
高階組件就是一個(gè)函數(shù)，接收一個(gè)組件，經(jīng)過處理后返回后的新的組件；
高階組件，不是真正意義上的組件，其實(shí)是一種模式；
可以對(duì)邏輯代碼進(jìn)行抽離，或者添加某個(gè)共用方法；
eg：
react-redux ：connect就是一個(gè)高階組件,接收一個(gè)component,并返回一個(gè)新的componet,處理了監(jiān)聽store和后續(xù)的處理 ；
react-router ：withrouter 為一個(gè)組件注入 history對(duì)象；高階組件和父組件的區(qū)別？
高階組件可以重寫傳入組件的state,function,props;可以對(duì)代碼邏輯進(jìn)行抽離，重寫 ；
父組件只是控制子組件的view層；
react diff算法是如何提高性能的？
傳統(tǒng)的頁面更新，是直接操作dom來實(shí)現(xiàn)的，比如原生js或者jquery，但是這種方式性能開銷比較大；
react 在初始化的時(shí)候會(huì)生成一個(gè)虛擬dom,每次更新視圖會(huì)比較前后虛擬dom的區(qū)別；
這個(gè)比較方法就是diff算法，diff算法很早就已經(jīng)出現(xiàn)了；但是react的diff算法有一個(gè)很大區(qū)別；
傳遞diff算法：通過循環(huán)遞規(guī)對(duì)節(jié)點(diǎn)進(jìn)行依次對(duì)比，時(shí)間算法復(fù)雜度是 o(n^3)，n代表節(jié)點(diǎn)數(shù)；
react diff 算法： 采用逐層比較的方式；把時(shí)間算法復(fù)雜度從O（n^3）次方，降低到O(n)次方；
什么是react虛擬dom，為什么虛擬dom可以提高性能？
虛擬dom是真實(shí)dom的一份映射表，react中我們只要改變state,
react就會(huì)調(diào)用batching（批處理）、diff算法自動(dòng)更新虛擬dom；
虛擬dom再來操作真實(shí)dom,從而改變視圖；
什么是Fiber？是為了解決什么問題？
為什么setState不設(shè)計(jì)成同步的？
## 保持內(nèi)部的一致性，和狀態(tài)的安全性
保持state,props.refs一致性；
## 性能優(yōu)化
react會(huì)對(duì)依據(jù)不同的調(diào)用源，給不同的 setState調(diào)用分配不同的優(yōu)先級(jí)；
調(diào)用源包括：事件處理、網(wǎng)絡(luò)請(qǐng)求、動(dòng)畫 ；
## 更多可能性
異步獲取數(shù)據(jù)后，統(tǒng)一渲染頁面；保持一致性，
react生命周期？
react 生命周期主流的主要有2個(gè)大的版本；
一個(gè)是 v16.3之前的：
一個(gè)是v16.3之后的；
v16.3之前 的生命周期主要分為4個(gè)階段,8個(gè)生命周期：

• 初始化值階段 initialization： getDefaultProps,getInitialState;
• 初始階段 mount： componentWillMount,componentDidMount;
• 更新階段 update：componetWillReceiveProps ,shouldComponetUpdate ,componentWillUpdate,
• 銷毀階段 unmount：componetWillMount;

v16.3之后的生命周期:
新引入了兩個(gè)生命周期：

• getDerivedStateFromProps
• getSnapshotBeforeUpdate

提示3個(gè)不安全的生命周期（在v17中要被刪除）

• componentWillMount
• componentWillReceiveProps
• componetWillUpdate

react組件通訊有哪幾種方式？
react組件之間通訊主要要四種方式

通過共用父組件傳值, 適合，層級(jí)簡單的； props來實(shí)現(xiàn)，子調(diào)父回調(diào)函數(shù)；

redux，全局可調(diào)用，從store中取；

context，注入全局變量：getChildContext; 獲取全局變量：this.context.color;

自定義事件,向事件對(duì)象添加監(jiān)聽器，和觸發(fā)事件來實(shí)現(xiàn)組件之間的通訊；

react的refs有什么用？
react 主要提供了一種標(biāo)準(zhǔn)數(shù)據(jù)流的方式來更新視圖；
但是頁面某些場(chǎng)景是脫離數(shù)據(jù)流的，這個(gè)時(shí)候就可以使用 refs;
react refs 是用來獲組件引用的,取后可以調(diào)用dom的方法；

• 使用場(chǎng)景，獲取焦點(diǎn) this,refs.inputPhone.focus();
• 與第三方dom庫整合

## refs 注意事項(xiàng)：
不能在無狀態(tài)組件中使用refs

## redux 關(guān)鍵知識(shí)點(diǎn)：

flux思想（四個(gè)部分:dispatcher,stores,views,actions）--flux相當(dāng)于mvc中的m和c， react相當(dāng)于v層；

redux常用中間件（redux-logger 提供日志輸出 ,redux-thunk處理異步操作,redux-promise處理異步操作-actionCreator返回值是promise）

##react-router知識(shí)點(diǎn)：

history 路由監(jiān)聽

history 類型，配置服務(wù)器要注意哪些地方
什么是redux,和vuex有什么區(qū)別?
redux主要用來做程序狀態(tài)管理js庫，提供可預(yù)測(cè)的狀態(tài)變化；
主要由三部分組成
store 總狀態(tài)==等同于react中的state----- vuex中的 （state）vuex中多了一個(gè)getter計(jì)算屬性
reducer 數(shù)據(jù)處理方法==等同于父級(jí)方法----- vuex中的(mutation同步,action異步)
action 參數(shù)==等于于回調(diào)參數(shù)；-----
多個(gè)vuex中引入module可以把store劃分成多個(gè)單元 ；
redux常用的中間件？

• redux-logger
• redux-thunk
• redux-promise
• redux-saga
• redux-observable

redux中的connect有什么作用？
redux中的connect方法主要是把UI組件生成容器組件，connect的意思就是就是把兩個(gè)連接起來；
import {connect} from "react-redux"
const VisibleTodoList=connet(
mapStateToProps, //參數(shù)
mapDispatchToProps //處理方法
)(TodoList)
create-react-app有什么優(yōu)點(diǎn)和缺點(diǎn)？
優(yōu)點(diǎn)：
快速生成架手架
缺點(diǎn)：

默認(rèn)不引入polyfill,需要在入口引入babel-polyfill

默認(rèn)只支持css熱加載，不支持html,js熱加載（推薦使用：react-hot-loader）

介紹一下JSX?
JSX 使用js的形式來寫html代碼；
JSX是一種語法糖，是調(diào)用js本身的特性來動(dòng)態(tài)創(chuàng)建UI，與于傳統(tǒng)模式下的模板語法不同；
介紹下Immutable?
Immutable是一種不同變的數(shù)據(jù)類型，
數(shù)據(jù)一旦被創(chuàng)建，就不能更改的數(shù)據(jù)，每當(dāng)對(duì)它進(jìn)行修改，就會(huì)返回新的immutable對(duì)象；
在做對(duì)象比較時(shí)，能提升性能；
immutable實(shí)現(xiàn)原理是持久化數(shù)據(jù)結(jié)構(gòu)，結(jié)構(gòu)共享，避免對(duì)數(shù)據(jù)對(duì)象進(jìn)行深拷貝；
Setstate 被調(diào)用會(huì)發(fā)生什么？

對(duì)react的看法，它的優(yōu)缺點(diǎn)？

優(yōu)點(diǎn)：

提供了聲明式的編程思想

提供了組件化的開發(fā)思想，大大提高前端開發(fā)的效率

引入了虛擬dom的概念，使得react可以跨端進(jìn)行類各界面開發(fā)，react native,react vr,ssr;

引入了diff算法，提高了渲染效率

不足：

侵入性強(qiáng)，對(duì)老代碼只能重做，不能部分集成（比如vue）；

• 什么是Fiber？是為了解決什么問題？
• 如果你能夠改進(jìn)React的一樣功能，那會(huì)是哪一個(gè)功能？
• React 的事務(wù)？
• 為什么說react是一個(gè)ui框架？

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的react全局方法_前端面试题 ---react的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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