更新:收藏前點個贊親，為啥我每次寫的東西收藏都是贊的n倍！！

花了一個月時間總結的React面試題 希望能幫助到你

全文近萬字建議保存仔細過一遍

目錄

• 面試中常提的重要概念
• React生命周期
• Redux
• Router
• 重要的方法

面試中常提的重要概念

1 什么是模塊化

是從代碼的角度進行分析的。把一些可復用的代碼抽成一個單獨的模塊，便于項目維護和開發

2 什么是組件化

是從ui的角度進行分析的 把一些可復用的ui元素抽成一個單獨的組件便于項目的維護和開發

3 組件化的好處

隨著項目的規模增大 手里的組件越來越多 很方便就能把現有的組件拼接成一個完整的頁面

4 DOM和虛擬DOM

DOM的本質 ：瀏覽器中用js對象表示頁面上的元素 并提供操作DOM的API

虛擬DOM的本質：這是框架中的概念 是程序員用js對象來模擬頁面上的DOM和DOM的嵌套 為的是實現DOM的高效更新

虛擬DOM是如何工作的？

虛擬DOM只不過是真實的DOM的javascript對象表示。與更新真實的DOM相比，更新javascript對象更容易，更快捷。

React將整個DOM副本保存為虛擬DOM。每次更新時，它都會維護兩個虛擬DOM，比較之前的狀態和當前的狀態，并確定哪些對象已被更改。并將這些變化更新到實際的DOM上

5 React如何提高性能

5.1 適當地使用shouldComponentUpdate生命周期方法。 它避免了子組件的不必要的渲染。 如果樹中有100個組件，則不重新渲染整個組件樹來提高應用程序性能。

5.2 使用create-react-app來構建項目，這會創建整個項目結構，并進行大量優化。

5.3 不可變性是提高性能的關鍵。不要對數據進行修改，而是始終在現有集合的基礎上創建新的集合，以保持盡可能少的復制，從而提高性能。

5.4 在顯示列表或表格時始終使用 Keys，這會讓 React 的更新速度更快

5.5 多使用無狀態組件(Function)

5.6 代碼分離是將代碼插入到單獨的文件中，只加載模塊或部分所需的文件的技術。

6 React如何在重新加載頁面時保留數據

單頁面應用程序首先在DOM中加載index.html，然后在用戶瀏覽頁面時加載內容，或者從同一index.html中后端API中獲取任何數據。如果我們通過點擊瀏覽器中的重新加載按鈕 重新加載頁面index.html，整個React應用程序將重新加載，我們將丟失應用程序的狀態。

如何保留應用狀態？

每當重新加載應用程序時，我們使用瀏覽器localstorage來保存應用程序的狀態。我們將整個存儲數據保存在localstorage中，每當有頁面刷新或重新加載時，我們從localstorage加載狀態。

7 如何在React中應用樣式

1 外部樣式表

通過import導入外部樣式表，然后應用className 注意不是class

2 內斂樣式

給style內接收的是一個對象形式的css，注意css中的'-'自動去掉 并且下一個單詞首字母大寫

style={{backgroundColor:'red'}}

3 定義樣式對象并應用

const footerStyle = {width: '100%',backgroundColor: 'red',padding: '20px',font: '20px',color: 'white',fontWeight: 'bold'} <div style={footerStyle}></div>

8 state

8.1 一句話解釋state和props的區別

state是組件內部維護的一組用于反映組件ui變化的狀態集合 是可變的

props一般存在于子組件 通過父組件的state變化傳遞給子組件作業propss來更新視圖

8.2 state使用細節

1 state必須是一個對象

2 this.setState方法一般情況是異步的 注意<一般情況下>特殊 在一些異步函數中 (定時器，ajax,Promise)中setState是同步的

8.3 什么時候可以定義一個state或者說是一個變量可否可以作為一個state

state不能定義過多，因為如果使用了state就會給這個變量增加一些響應式掛載

1 如果這個變量是通過props從父組件獲取 他就不是一個狀態

2 如果這個變量可以通過其他狀態state或是屬性props 通過數據處理得到 那么他不是一個狀態

3 如果變量在render中沒有使用到 那么他就不是一個狀態

4 如果變量在整個生命周期中都保持不變 那么他不是一個狀態

9 什么是jsx

JSX 是JavaScript XML 的簡寫。是 javascript的語法擴展，它利用 JavaScript 的表現力和類似 HTML 的模板語法，來生成React元素，并將這些元素在DOM中呈現

下面是JSX的一個例子：

render(){return( <div><h1>{{name}}</h1></div>); }

瀏覽器無法識別jsx 需要babel（jsx轉化器）將jsx轉化為js對象

10 什么是props

Props 是 React 中屬性的簡寫。它們是只讀組件，必須保持純，即不可變。

它們總是在整個應用中從父組件傳遞到子組件。

子組件永遠不能將 prop 送回父組件。這有助于維護單向數據流，通常用于呈現動態生成的數據。

11 什么是React

React是一個簡單的javascript UI庫，用于構建高效、快速的用戶頁面。它是一個輕量級庫，因此很受歡迎。它遵循組件設計模式、聲明式編程范式和函數式編程概念，以使前端應用程序更高效。它使用虛擬dom來優秀地操作dom。它遵循從高階組件到低階組件的單項數據流

12 React 中 keys 的作用是什么？

在開發過程中，我們需要保證某個元素的 key 在其同級元素中具有唯一性。在 React Diff 算法中 React 會借助元素的 Key 值來判斷該元素是新近創建的還是被移動而來的元素，從而減少不必要的元素重渲染。此外，React 還需要借助 Key 值來判斷元素與本地狀態的關聯關系，因此我們絕不可忽視轉換函數中 Key 的重要性。

13純函數

純函數是始終接受一個或多個參數并計算參數然后返回數據或是函數的函數。

14高階函數

高階函數就是將 函數作為參數 或 返回函數 的函數 或者都有

這些高階函數可以操縱其他函數

15什么是函數式編程

函數式編程是聲明式編程的一部分（聲明式編程（注重過程）命令式編程（注重結果））

函數式編程的幾個部分：1 不可變性 2純函數 3數據轉換 4高階函數 5遞歸 6組合

在react中，我們將功能劃分為小型可重用的純函數，我們必須將這些可重用的函數放在一起，最終使其成為產品。

將所有較小的函數組合成更大的函數，最終得到一個應用程序，這稱為組合。

16 diff算法

三次對比

1 tree diff 新舊dom樹逐層對比

2 component diff 每一層進行組件級別的對比 只是對比組件類別

3 element diff 組件相同時 進行元素級別的對比

17 組件

組件的類別分為

17.1 函數/無狀態組件/展示組件

函數或是無狀態組件是一個純函數，他可接收參數并返回react元素，并且沒有任何副作用。但這些組件沒有生命周期函數，所以也叫展示組件

export const Header = () => {return(<div style={{backgroundColor:'red'}}><h1>Hello World</h1></div>) }

17.2 類/有狀態組件

這就是我們在編寫react中最經常創建的組件類同 通過class xx extends React.Component這類組件可以通過setState()來改變組件的狀態，并且可以使用生命周期函數

17.3 容器組件

容器組件用來包含展示其它組件或其它容器組件，但里面從來都沒有html。

17.4 高階組件

其實和高階函數的意思差不多。意思是將組件作為參數并生成另一個組件的組件。

17.5 受控和非受控組件

例如input option radio 他們的狀態是不受react控制的 而是控件本身具有的 我們把這樣的組件稱為非受控組件

非受控->受控組件的轉化

首先把狀態綁定到非受控組件的value、checked上

然后監聽該組件的onChange事件 用e.target 獲取input上面的數據 然后通過setState設置數據給state內的數據

18 更新組件的正確方式和錯誤方式

//錯誤方式 this.state.name = '馬東什么' //正確方式 this.setState({name:'馬東什么'})//錯誤方式 this.setState({title: this.state.name + this.props.type }) //正確方式 this.setState((state, props) => {title: state.name + props.type });

19超越繼承的組合compose

在react中，我們總是使用組合而不是繼承，組件中的組合 直接上例子

import { UserForm } from './userForm'; import { CompanyForm } from './companyForm';export class FormList extends React.Component {render() {render() {return (<div className="dashboard"> <UserForm /><CompanyForm /></div>);} }

20 什么是 Fragments

react中我們需要有一個父元素去包裹其他react元素

return (<div><div>一步 01</div>,<div>一步 02</div>,<div>一步 03</div></div> )

解決這個問題第一種方法是數組的方式

return [<div>一步 01</div>,<div>一步 02</div>,<div>一步 03</div>];

第二種方式就是 Fragments

return (<React.Fragment><div>一步 01</div>,<div>一步 02</div>,<div>一步 03</div></React.Fragment> )

并且它可以簡寫<>

return (<><div>一步 01</div>,<div>一步 02</div>,<div>一步 03</div></> )

21類型檢查

隨著時間推移應用程序變得越來越大,因此類型檢查非常重要。ProTypes為組件提供類型檢查

import PropTypes from 'prop-types';

具體實現通過上下文的示例

22 什么是上下文

在react中，我們會遇見這么一個情況，如果爺爺想傳東西給孫子，那么需要這么做

爺爺->孫子->兒子

如果層級特別深 那么如果通過props層層傳遞是明顯不合理的。這時我們就需要用到context上下文 通過設置上下文 任意一個后代元素都可以直接取到上下文的內容 不需要層層傳遞

//首先在父組件定義上下文 并且需要先標明上下文的類型通過 21的內容 //定義類型 static childContextTypes={color:PropTypes.string } //定義上下文屬性 getChildContext(){//這里返回什么 上下文的內容就是什么return {color:this.state.color}//先定義出這個屬性constructor(props){super(props);this.state={color:"red"} } 然后是后代元素 可以使子元素也可以是孫子元素 等等等 //后代必須驗證 不驗證就沒有 上下文 static contextTypes={color:PropTypes.string }然后就可以直接通過this.context.color來取出上下文的這個屬性return (<div><h1 style={{color:this.context.color}}>孫子</h1></div> )

React生命周期

初始化階段

default 是默認 預設的意思 init是初始化 這兩個單詞含義不同

getDefaultProps() 設計初始的props getInitialState() 可以定義this.state 并且此時可以訪問this.props

其實都可以在里construstor設置 這兩個鉤子函數很少用

componentWillMount 此時可以修改status 但是千萬不要在這里拿數據 render()

componentDidMount 很重要的鉤子函數

此時已經講組件渲染出來了 推薦在這里拿數據并更新（這里可以具體查下為什么在這個階段去請求數據）

其實上面這個階段可以分為 inti階段和Mounting階段

更新階段

componentWillReceiveProps(nextProps) 接收新的props時用

!!shouldComponentUpdata(nextProps,nextState)

react性能優化非常重要的額一環。組件接收新的state或props時 調用 ，我們可以設置在此時對比前后兩個props和state是否相同，如果相同 則返回false阻止更新 因為相同的屬性狀態一定會產生相同的dom樹，這樣就不用創造新的dom樹和舊的dom樹進行diff算法對比。節省大量的性能優化 尤其是在dom結構復雜的時候

案例

再用redux進行狀態管理時 很重要的一個優化就是判斷狀態是否改變

當點擊商品分類時 點擊不同的分配組件的數據都會更新 但是如果點擊的是和現在展示的相同的分類 這時讓組件再更新一遍就很浪費性能

就可以使用這個鉤子函數 判斷 狀態是否改變 只有改變時 才會出發更新

componentWillUpdata(nextProps,nextState)

此時可以修改state

render()

componentDidupdata()

更新完成 此時可以獲取DOM節點

卸載

componentWillUnmount()

組件要卸載時調用，一些監聽和定時器需要在此時清除

Redux

Redux是React的一個狀態管理倉庫，為了解決React組件通信和組件間狀態共享

為何要使用Redux

React 是單向數據流，也就是 props 只能從父組件一層一層向子組件傳遞

而當數據流動復雜時 也就時子組件的狀態改變會影響父組件的改變 而父組件改變又會引起其他子組件改變

這時由于 props 的單向傳遞

就需要父組件將需要改變的狀態 和能夠改變這個狀態的函數 用props 一層一層傳遞下去 然后子組件一改變 一直逐層調用回調函數 完成各個組件的更新

在這種情況下 就需要使用redux

redux 只能使用dispatch來完成組件的更新

當子組件狀態改變時 dispatch監控 然后傳到reducer reducer判斷是哪鐘狀態改變

然后直接去改變store(狀態庫)里的數據 然后store直接將數據分發到需要改變的組件中

省去了反復回調的麻煩

圖片解釋

圖片出處：justjavac：4 張動圖解釋為什么（什么時候）使用 Redux

項目第一天

項目第五天

項目第20天

使用redux

介紹redux

官方的解釋是 redux 是javascript的狀態容器

我的理解是 redux是為了解決react組件間的通信和組件間的狀態共享而提出的一種解決方案 它包括 store+action+reducer

1 store 用來存儲react狀態機 （state）的對象 跟組件connect后 store 的改變就會驅動 組件的更新

2 action 用于接收state的改變命令 是改變state的唯一途徑和入口

3 reducer 是action的處理器 1監控是action的哪種type變化 用于修改store中的state值 返回一個新的state

組件間的通信

1 由于connect后 各個connect組件共享store

所以各個組件可以通過store來進行數據通信

規則 view由dispatch引起改變 然后 去觸發reducer改變 store 然后引起組件的更新

2通過對象驅動組件進入生命周期

對于一個react組件來說 只能對自己的state改變驅動自己的生命周期

或是通過外部傳入props進行驅動

而通過redux可以通過store來改變state 來驅動組件更新

3方便進行數據管理和切片

redux通過對store的管理和控制，可以很方便的實現頁面狀態的管理和切片

redux 三大原則

1單一數據源

2狀態是只讀的

3狀態得修改均有純函數完成

Router

種類

1.react-router是瀏覽器和原生應用的通用部分。

2.react-router-dom是用于瀏覽器的。

3.react-router-native是用于原生應用的。

這里只說react-router-dom

react-router-dom是應用程序中路由的庫。React庫中沒有路由功能，需要單獨安裝react-router-dom

1.它提供兩個路由器 BrowserRouter和HashRouter

BrowserRouter，這是對Router接口的實現。使得頁面和瀏覽器的history保持一致。等于：window.location。

HashRouter，和上面的一樣，只是使用的是url的hash部分，等于：window.location.hash

前者：http://127.0.0.1:3000/user/type

后者：http://127.0.0.1:3000/#/user/type不一定是這樣，但#是少不了的）

如果你使用的是一個非靜態的站點、要處理各種不同的url那么你就需要使用BrowserRouter。

相反的如果你的server只處理靜態的url，那么就使用HashRouter。

2.react-router-dom組件

BrowserRouter和HashRouter是路由器

Route用于路由匹配

Link組件用于在應用程序中創建鏈接。它講在HTML中渲染為錨標記

NavLink是突出顯示當前活動鏈接的特殊鏈接。

Switch 不是必需的，但在組合路由時很有用。

Redirect 用于強制路由重定向

//示例 // normal link <Link to="/gotoA">Home</Link>// link which highlights currentlu active route with the given class name <NavLink to="/gotoB" activeClassName="active">React </NavLink>// you can redirect to this url <Redirect to="/gotoC" />//示例 import React from 'react' // import react router DOM elements import { Switch, Route, Redirect } from 'react-router-dom' import ComponentA from '../common/compa' import ComponentB from '../common/compb' import ComponentC from '../common/compc' import ComponentD from '../common/compd' import ComponentE from '../common/compe'const Layout = ({ match }) => {return(<div className=""><Switch><Route exact path={`${match.path}/gotoA`} component={ComponentA} /><Route path={`${match.path}/gotoB`} component={ComponentB} /><Route path={`${match.path}/gotoC`} component={ComponentC} /><Route path={`${match.path}/gotoD`} component={ComponentD} /><Route path={`${match.path}/gotoE`} component={ComponentE} /></Switch></div>)}export default Layout

Link、Redirect

<Link to{{pathname: '/me',search: '?sort=asc',hash: '#hash',state: { fromHome: true } }} /><Redirect to {{pathname: '/register',search: '?utm=something',state: { referrer: someplage.com } }}>

重要的方法

1 combineReducers from 'redux'

隨著應用變得復雜，需要對reducer函數進行拆分,拆分后每一塊獨立負責管理state的一部分

combineReducers 輔助函數的作用是，把一個由多個不同reducer函數作為value的object，

合并成一個最終的reducer函數，然后就可以對這個reducer函數調用createStore

2 applyMiddleware from 'redux'

添加中間件

中間件：redux提供了通過利用中間件來擴展自身功能以滿足用戶需求

因為在整個數據操作過程中 reducer是純函數 不能做額外的處理

在view視圖層顯然也不行

所以只能在dispatch過程中做額外的處理 比如保存日志等等操作

而這些額外的處理就叫做中間件 middlew

而

applyMiddleware(...middlewares) 可以在其中傳入多個中間件 在action過程中添加更多處理過程

并且每個中間件都有自己的'熔斷'處理，當他認為這個action不需要后面的中間件進行處理時，后面的中間件也就不能對這個action進行處理

而為什么不同的中間件可以組合使用 因為redux要求所有的中間件必須提供統一的接口

3 redux-thunk中間件

thunkMiddleware等同于react-thunk 都是為了實現action的異步

將同步的action轉化成異步的action 適合用于api請求場景

4 applyMiddleware(thunkMiddleware)(createStore)(reducers) 這種寫法什么意思

正常寫法：const store = createStore(reducer,applyMiddleware(thunk));

applyMiddleware函數參數是中間件，會返回一個函數，那個函數會接受一個store然后在返回一個函數，而這個函數還會返回一個函數，參數是reducer

5 withRouter from 'react-router-dom'

將組件和withRouter組件綁定 可以獲取到history對象

withRouter 會在render時把更新后的match,location,history傳遞給包裹組件

6 bindActionCreators from redux

他將單個或多個ActionCreator轉化為dispatch(action)的函數集合形式。

開發者不用再手動dispatch(actionCreator(type))，而是可以直接調用方法。

好處

1 將dispath觸發規則單獨抽離出去 便于維護

2 多個組件可重復調用

總結

以上是生活随笔為你收集整理的react div组件设置可点击不可点击_React面试全解的全部內容，希望文章能夠幫你解決所遇到的問題。

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