高階組件相關

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

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

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

• getDerivedStateFromProps
• getSnapshotBeforeUpdate

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

• componentWillMount
• componentWillReceiveProps
• componetWillUpdate

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

通過共用父組件傳值, 適合，層級簡單的； props來實現，子調父回調函數；

redux，全局可調用，從store中取；

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

自定義事件,向事件對象添加監聽器，和觸發事件來實現組件之間的通訊；

react的refs有什么用？
react 主要提供了一種標準數據流的方式來更新視圖；
但是頁面某些場景是脫離數據流的，這個時候就可以使用 refs;
react refs 是用來獲組件引用的,取后可以調用dom的方法；

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

## refs 注意事項：
不能在無狀態組件中使用refs

## redux 關鍵知識點：

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

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

##react-router知識點：

history 路由監聽

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

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

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

默認不引入polyfill,需要在入口引入babel-polyfill

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

介紹一下JSX?
JSX 使用js的形式來寫html代碼；
JSX是一種語法糖，是調用js本身的特性來動態創建UI，與于傳統模式下的模板語法不同；
介紹下Immutable?
Immutable是一種不同變的數據類型，
數據一旦被創建，就不能更改的數據，每當對它進行修改，就會返回新的immutable對象；
在做對象比較時，能提升性能；
immutable實現原理是持久化數據結構，結構共享，避免對數據對象進行深拷貝；
Setstate 被調用會發生什么？

對react的看法，它的優缺點？

優點：

提供了聲明式的編程思想

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

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

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

不足：

侵入性強，對老代碼只能重做，不能部分集成（比如vue）；

• 什么是Fiber？是為了解決什么問題？
• 如果你能夠改進React的一樣功能，那會是哪一個功能？
• React 的事務？
• 為什么說react是一個ui框架？

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。