react全局方法_前端面试题 ---react
高階組件相關
什么是高階組件,它有哪些運用?
高階組件就是一個函數,接收一個組件,經過處理后返回后的新的組件;
高階組件,不是真正意義上的組件,其實是一種模式;
可以對邏輯代碼進行抽離,或者添加某個共用方法;
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組件之間通訊主要要四種方式
react的refs有什么用?
react 主要提供了一種標準數據流的方式來更新視圖;
但是頁面某些場景是脫離數據流的,這個時候就可以使用 refs;
react refs 是用來獲組件引用的,取后可以調用dom的方法;
- 使用場景,獲取焦點 this,refs.inputPhone.focus();
- 與第三方dom庫整合
## refs 注意事項:
不能在無狀態組件中使用refs
## redux 關鍵知識點:
##react-router知識點:
什么是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有什么優點和缺點?
優點:
快速生成架手架
缺點:
介紹一下JSX?
JSX 使用js的形式來寫html代碼;
JSX是一種語法糖,是調用js本身的特性來動態創建UI,與于傳統模式下的模板語法不同;
介紹下Immutable?
Immutable是一種不同變的數據類型,
數據一旦被創建,就不能更改的數據,每當對它進行修改,就會返回新的immutable對象;
在做對象比較時,能提升性能;
immutable實現原理是持久化數據結構,結構共享,避免對數據對象進行深拷貝;
Setstate 被調用會發生什么?
對react的看法,它的優缺點?
優點:
不足:
- 什么是Fiber?是為了解決什么問題?
- 如果你能夠改進React的一樣功能,那會是哪一個功能?
- React 的事務?
- 為什么說react是一個ui框架?
總結
以上是生活随笔為你收集整理的react全局方法_前端面试题 ---react的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 2021年浙江省高考成绩查询时间,202
- 下一篇: linux下mips裸机编译,裸机交叉编