fetch封裝

npm install whatwg-fetch --save  // 適配其他瀏覽器
npm install es6-promise

export const handleResponse = (response) => {
  if (response.status === 403 || response.status === 401) {
    const oauthurl = response.headers.get('locationUrl');
    if (!_.isEmpty(oauthUrl)) {
      window.location.href = oauthurl;
      return;
    }
  }
  if (!response.ok) {
    return getErrorMessage(response).then(errorMessage => apiError(response.status, errorMessage));
  }
  if (isJson(response)) {
    return response.json();
  }
  if (isText(response)) {
    return response.text();
  }

  return response.blob();
};

const httpRequest = {
  request: ({
    method, headers, body, path, query,
  }) => {
    const options = {};
    let url = path;
    if (method) {
      options.method = method;
    }
    if (headers) {
      options.headers = {...options.headers,...headers};
    }
    if (body) {
      options.body = body;
    }
    if (query) {
      const params = Object.keys(query)
        .map(k => `${k}=${query[k]}`)
        .join('&');
      url = url.concat(`?${params}`);
    }
    return fetch(url, Object.assign({}, options, { credentials: 'same-origin' })).then(handleResponse);
  },
};

export default httpRequest;

react性能優(yōu)化方案

• 重寫(xiě)shouldComponentUpdate來(lái)避免不必要的dom操作
• 使用 production 版本的react.js
• 使用key來(lái)幫助React識(shí)別列表中所有子組件的最小變化

什么是 React Context?

Context 通過(guò)組件樹(shù)提供了一個(gè)傳遞數(shù)據(jù)的方法，從而避免了在每一個(gè)層級(jí)手動(dòng)的傳遞 props 屬性。

何為 JSX

JSX 是 JavaScript 語(yǔ)法的一種語(yǔ)法擴(kuò)展，并擁有 JavaScript 的全部功能。JSX 生產(chǎn) React "元素"，你可以將任何的 JavaScript 表達(dá)式封裝在花括號(hào)里，然后將其嵌入到 JSX 中。在編譯完成之后，JSX 表達(dá)式就變成了常規(guī)的 JavaScript 對(duì)象，這意味著你可以在 if 語(yǔ)句和 for 循環(huán)內(nèi)部使用 JSX，將它賦值給變量，接受它作為參數(shù)，并從函數(shù)中返回它。

props 是什么

• react的核心思想是組件化，頁(yè)面被分成很多個(gè)獨(dú)立，可復(fù)用的組件
• 而組件就是一個(gè)函數(shù)，可以接受一個(gè)參數(shù)作為輸入值，這個(gè)參數(shù)就是props，所以props就是從外部傳入組件內(nèi)部的數(shù)據(jù)
• 由于react的單向數(shù)據(jù)流模式，所以props是從父組件傳入子組件的數(shù)據(jù)

應(yīng)該在 React 組件的何處發(fā)起 Ajax 請(qǐng)求

在 React 組件中，應(yīng)該在 componentDidMount 中發(fā)起網(wǎng)絡(luò)請(qǐng)求。這個(gè)方法會(huì)在組件第一次“掛載”(被添加到 DOM)時(shí)執(zhí)行，在組件的生命周期中僅會(huì)執(zhí)行一次。更重要的是，你不能保證在組件掛載之前 Ajax 請(qǐng)求已經(jīng)完成，如果是這樣，也就意味著你將嘗試在一個(gè)未掛載的組件上調(diào)用 setState，這將不起作用。在 componentDidMount 中發(fā)起網(wǎng)絡(luò)請(qǐng)求將保證這有一個(gè)組件可以更新了。

react 強(qiáng)制刷新

component.forceUpdate() 一個(gè)不常用的生命周期方法, 它的作用就是強(qiáng)制刷新

官網(wǎng)解釋如下

默認(rèn)情況下，當(dāng)組件的 state 或 props 發(fā)生變化時(shí)，組件將重新渲染。如果 render() 方法依賴于其他數(shù)據(jù)，則可以調(diào)用 forceUpdate() 強(qiáng)制讓組件重新渲染。

調(diào)用 forceUpdate() 將致使組件調(diào)用 render() 方法，此操作會(huì)跳過(guò)該組件的 shouldComponentUpdate()。但其子組件會(huì)觸發(fā)正常的生命周期方法，包括 shouldComponentUpdate() 方法。如果標(biāo)記發(fā)生變化，React 仍將只更新 DOM。

通常你應(yīng)該避免使用 forceUpdate()，盡量在 render() 中使用 this.props 和 this.state。

shouldComponentUpdate 在初始化 和 forceUpdate 不會(huì)執(zhí)行

使用 React Hooks 好處是啥？

首先，Hooks 通常支持提取和重用跨多個(gè)組件通用的有狀態(tài)邏輯，而無(wú)需承擔(dān)高階組件或渲染 props 的負(fù)擔(dān)。Hooks 可以輕松地操作函數(shù)組件的狀態(tài)，而不需要將它們轉(zhuǎn)換為類組件。
Hooks 在類中不起作用，通過(guò)使用它們，咱們可以完全避免使用生命周期方法，例如 componentDidMount、componentDidUpdate、componentWillUnmount。相反，使用像useEffect這樣的內(nèi)置鉤子。

Redux內(nèi)部原理 內(nèi)部怎么實(shí)現(xiàn)dispstch一個(gè)函數(shù)的

以redux-thunk中間件作為例子，下面就是thunkMiddleware函數(shù)的代碼

// 部分轉(zhuǎn)為ES5代碼，運(yùn)行middleware函數(shù)會(huì)返回一個(gè)新的函數(shù)，如下：
return ({ dispatch, getState }) => {
    // next實(shí)際就是傳入的dispatch
    return function (next) {
        return function (action) {
            // redux-thunk核心
            if (typeof action === 'function') { 
                return action(dispatch, getState, extraArgument);
            }
            return next(action);
        };
    };
}

redux-thunk庫(kù)內(nèi)部源碼非常的簡(jiǎn)單，允許action是一個(gè)函數(shù)，同時(shí)支持參數(shù)傳遞，否則調(diào)用方法不變

• redux創(chuàng)建Store：通過(guò)combineReducers函數(shù)合并reducer函數(shù)，返回一個(gè)新的函數(shù)combination（這個(gè)函數(shù)負(fù)責(zé)循環(huán)遍歷運(yùn)行reducer函數(shù)，返回全部state）。將這個(gè)新函數(shù)作為參數(shù)傳入createStore函數(shù)，函數(shù)內(nèi)部通過(guò)dispatch，初始化運(yùn)行傳入的combination，state生成，返回store對(duì)象
• redux中間件：applyMiddleware函數(shù)中間件的主要目的就是修改dispatch函數(shù)，返回經(jīng)過(guò)中間件處理的新的dispatch函數(shù)
• redux使用：實(shí)際就是再次調(diào)用循環(huán)遍歷調(diào)用reducer函數(shù)，更新state

何為純函數(shù)(pure function)

一個(gè)純函數(shù)是一個(gè)不依賴于且不改變其作用域之外的變量狀態(tài)的函數(shù)，這也意味著一個(gè)純函數(shù)對(duì)于同樣的參數(shù)總是返回同樣的結(jié)果。

如何配置 React-Router 實(shí)現(xiàn)路由切換

（1）使用<Route> 組件

路由匹配是通過(guò)比較 <Route> 的 path 屬性和當(dāng)前地址的 pathname 來(lái)實(shí)現(xiàn)的。當(dāng)一個(gè) <Route> 匹配成功時(shí)，它將渲染其內(nèi)容，當(dāng)它不匹配時(shí)就會(huì)渲染 null。沒(méi)有路徑的 <Route> 將始終被匹配。

// when location = { pathname: '/about' }
<Route path='/about' component={About}/> // renders <About/>
<Route path='/contact' component={Contact}/> // renders null
<Route component={Always}/> // renders <Always/>

（2）結(jié)合使用 <Switch> 組件和 <Route> 組件

<Switch> 用于將 <Route> 分組。

<Switch>
    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
    <Route path="/contact" component={Contact} />
</Switch>

<Switch> 不是分組 <Route> 所必須的，但他通常很有用。 一個(gè) <Switch> 會(huì)遍歷其所有的子 <Route>元素，并僅渲染與當(dāng)前地址匹配的第一個(gè)元素。

（3）使用 <Link>、 <NavLink>、<Redirect> 組件

<Link> 組件來(lái)在你的應(yīng)用程序中創(chuàng)建鏈接。無(wú)論你在何處渲染一個(gè)<Link> ，都會(huì)在應(yīng)用程序的 HTML 中渲染錨（<a>）。

<Link to="/">Home</Link>   
// <a href='/'>Home</a>

是一種特殊類型的 當(dāng)它的 to屬性與當(dāng)前地址匹配時(shí)，可以將其定義為"活躍的"。

// location = { pathname: '/react' }
<NavLink to="/react" activeClassName="hurray">
    React
</NavLink>
// <a href='/react' className='hurray'>React</a>

當(dāng)我們想強(qiáng)制導(dǎo)航時(shí)，可以渲染一個(gè)<Redirect>，當(dāng)一個(gè)<Redirect>渲染時(shí)，它將使用它的to屬性進(jìn)行定向。

在 React 中，何為 state

State 和 props 類似，但它是私有的，并且完全由組件自身控制。State 本質(zhì)上是一個(gè)持有數(shù)據(jù)，并決定組件如何渲染的對(duì)象。

react16版本的reconciliation階段和commit階段是什么

• reconciliation階段包含的主要工作是對(duì)current tree 和 new tree 做diff計(jì)算，找出變化部分。進(jìn)行遍歷、對(duì)比等是可以中斷，歇一會(huì)兒接著再來(lái)。
• commit階段是對(duì)上一階段獲取到的變化部分應(yīng)用到真實(shí)的DOM樹(shù)中，是一系列的DOM操作。不僅要維護(hù)更復(fù)雜的DOM狀態(tài)，而且中斷后再繼續(xù)，會(huì)對(duì)用戶體驗(yàn)造成影響。在普遍的應(yīng)用場(chǎng)景下，此階段的耗時(shí)比diff計(jì)算等耗時(shí)相對(duì)短。

類組件和函數(shù)組件之間的區(qū)別是啥？

• 類組件可以使用其他特性，如狀態(tài) state 和生命周期鉤子。
• 當(dāng)組件只是接收 props 渲染到頁(yè)面時(shí)，就是無(wú)狀態(tài)組件，就屬于函數(shù)組件，也被稱為啞組件或展示組件。

函數(shù)組件和類組件當(dāng)然是有區(qū)別的，而且函數(shù)組件的性能比類組件的性能要高，因?yàn)轭惤M件使用的時(shí)候要實(shí)例化，而函數(shù)組件直接執(zhí)行函數(shù)取返回結(jié)果即可。為了提高性能，盡量使用函數(shù)組件。

React-Router 4怎樣在路由變化時(shí)重新渲染同一個(gè)組件？

當(dāng)路由變化時(shí)，即組件的props發(fā)生了變化，會(huì)調(diào)用componentWillReceiveProps等生命周期鉤子。那需要做的只是： 當(dāng)路由改變時(shí)，根據(jù)路由，也去請(qǐng)求數(shù)據(jù)：

class NewsList extends Component {
  componentDidMount () {
     this.fetchData(this.props.location);
  }

  fetchData(location) {
    const type = location.pathname.replace('/', '') || 'top'
    this.props.dispatch(fetchListData(type))
  }
  componentWillReceiveProps(nextProps) {
     if (nextProps.location.pathname != this.props.location.pathname) {
         this.fetchData(nextProps.location);
     } 
  }
  render () {
    ...
  }
}

利用生命周期componentWillReceiveProps，進(jìn)行重新render的預(yù)處理操作。

react 生命周期

初始化階段：

• getDefaultProps:獲取實(shí)例的默認(rèn)屬性
• getInitialState:獲取每個(gè)實(shí)例的初始化狀態(tài)
• componentWillMount：組件即將被裝載、渲染到頁(yè)面上
• render:組件在這里生成虛擬的 DOM 節(jié)點(diǎn)
• componentDidMount:組件真正在被裝載之后

運(yùn)行中狀態(tài)：

• componentWillReceiveProps:組件將要接收到屬性的時(shí)候調(diào)用
• shouldComponentUpdate:組件接受到新屬性或者新?tīng)顟B(tài)的時(shí)候（可以返回 false，接收數(shù)據(jù)后不更新，阻止 render 調(diào)用，后面的函數(shù)不會(huì)被繼續(xù)執(zhí)行了）
• componentWillUpdate:組件即將更新不能修改屬性和狀態(tài)
• render:組件重新描繪
• componentDidUpdate:組件已經(jīng)更新

銷毀階段：

• componentWillUnmount:組件即將銷毀

shouldComponentUpdate 是做什么的，（react 性能優(yōu)化是哪個(gè)周期函數(shù)？）

shouldComponentUpdate 這個(gè)方法用來(lái)判斷是否需要調(diào)用 render 方法重新描繪 dom。因?yàn)?dom 的描繪非常消耗性能，如果我們能在 shouldComponentUpdate 方法中能夠?qū)懗龈鼉?yōu)化的 dom diff 算法，可以極大的提高性能。

在react17 會(huì)刪除以下三個(gè)生命周期
componentWillMount，componentWillReceiveProps ， componentWillUpdate

非嵌套關(guān)系組件的通信方式？

即沒(méi)有任何包含關(guān)系的組件，包括兄弟組件以及不在同一個(gè)父級(jí)中的非兄弟組件。

• 可以使用自定義事件通信（發(fā)布訂閱模式）
• 可以通過(guò)redux等進(jìn)行全局狀態(tài)管理
• 如果是兄弟組件通信，可以找到這兩個(gè)兄弟節(jié)點(diǎn)共同的父節(jié)點(diǎn), 結(jié)合父子間通信方式進(jìn)行通信。

在 Redux 中，何為 store

Store 是一個(gè) javascript 對(duì)象，它保存了整個(gè)應(yīng)用的 state。與此同時(shí)，Store 也承擔(dān)以下職責(zé)：

• 允許通過(guò) getState() 訪問(wèn) state
• 運(yùn)行通過(guò) dispatch(action) 改變 state
• 通過(guò) subscribe(listener) 注冊(cè) listeners
• 通過(guò) subscribe(listener) 返回的函數(shù)處理 listeners 的注銷

react 最新版本解決了什么問(wèn)題，增加了哪些東西

React 16.x的三大新特性 Time Slicing、Suspense、 hooks

• Time Slicing（解決CPU速度問(wèn)題）使得在執(zhí)行任務(wù)的期間可以隨時(shí)暫停，跑去干別的事情，這個(gè)特性使得react能在性能極其差的機(jī)器跑時(shí)，仍然保持有良好的性能
• Suspense （解決網(wǎng)絡(luò)IO問(wèn)題） 和lazy配合，實(shí)現(xiàn)異步加載組件。 能暫停當(dāng)前組件的渲染， 當(dāng)完成某件事以后再繼續(xù)渲染，解決從react出生到現(xiàn)在都存在的「異步副作用」的問(wèn)題，而且解決得非的優(yōu)雅，使用的是 T異步但是同步的寫(xiě)法，這是最好的解決異步問(wèn)題的方式
• 提供了一個(gè)內(nèi)置函數(shù)componentDidCatch，當(dāng)有錯(cuò)誤發(fā)生時(shí)，可以友好地展示 fallback 組件; 可以捕捉到它的子元素（包括嵌套子元素）拋出的異常; 可以復(fù)用錯(cuò)誤組件。

（1）React16.8 加入hooks，讓React函數(shù)式組件更加靈活，hooks之前，React存在很多問(wèn)題：

• 在組件間復(fù)用狀態(tài)邏輯很難
• 復(fù)雜組件變得難以理解，高階組件和函數(shù)組件的嵌套過(guò)深。
• class組件的this指向問(wèn)題
• 難以記憶的生命周期

hooks很好的解決了上述問(wèn)題，hooks提供了很多方法

• useState 返回有狀態(tài)值，以及更新這個(gè)狀態(tài)值的函數(shù)
• useEffect 接受包含命令式，可能有副作用代碼的函數(shù)。
• useContext 接受上下文對(duì)象（從 React.createContext返回的值）并返回當(dāng)前上下文值，
• useReducer useState 的替代方案。接受類型為 （state，action）=> newState的reducer，并返回與dispatch方法配對(duì)的當(dāng)前狀態(tài)。
• useCalLback 返回一個(gè)回憶的memoized版本，該版本僅在其中一個(gè)輸入發(fā)生更改時(shí)才會(huì)更改。純函數(shù)的輸入輸出確定性 o useMemo 純的一個(gè)記憶函數(shù) o useRef 返回一個(gè)可變的ref對(duì)象，其Current 屬性被初始化為傳遞的參數(shù)，返回的 ref 對(duì)象在組件的整個(gè)生命周期內(nèi)保持不變。
• useImperativeMethods 自定義使用ref時(shí)公開(kāi)給父組件的實(shí)例值
• useMutationEffect 更新兄弟組件之前，它在React執(zhí)行其DOM改變的同一階段同步觸發(fā)
• useLayoutEffect DOM改變后同步觸發(fā)。使用它來(lái)從DOM讀取布局并同步重新渲染

（2）React16.9

• 重命名 Unsafe 的生命周期方法。新的 UNSAFE_前綴將有助于在代碼 review 和 debug 期間，使這些有問(wèn)題的字樣更突出
• 廢棄 javascrip:形式的 URL。以javascript:開(kāi)頭的URL 非常容易遭受攻擊，造成安全漏洞。
• 廢棄"Factory"組件。 工廠組件會(huì)導(dǎo)致 React 變大且變慢。
• act（）也支持異步函數(shù)，并且你可以在調(diào)用它時(shí)使用 await。
• 使用 <React.ProfiLer> 進(jìn)行性能評(píng)估。在較大的應(yīng)用中追蹤性能回歸可能會(huì)很方便

（3）React16.13.0

• 支持在渲染期間調(diào)用setState，但僅適用于同一組件
• 可檢測(cè)沖突的樣式規(guī)則并記錄警告
• 廢棄 unstable_createPortal，使用CreatePortal
• 將組件堆棧添加到其開(kāi)發(fā)警告中，使開(kāi)發(fā)人員能夠隔離bug并調(diào)試其程序，這可以清楚地說(shuō)明問(wèn)題所在，并更快地定位和修復(fù)錯(cuò)誤。

什么是 React Fiber?

Fiber 是 React 16 中新的協(xié)調(diào)引擎或重新實(shí)現(xiàn)核心算法。它的主要目標(biāo)是支持虛擬DOM的增量渲染。React Fiber 的目標(biāo)是提高其在動(dòng)畫(huà)、布局、手勢(shì)、暫停、中止或重用等方面的適用性，并為不同類型的更新分配優(yōu)先級(jí)，以及新的并發(fā)原語(yǔ)。
React Fiber 的目標(biāo)是增強(qiáng)其在動(dòng)畫(huà)、布局和手勢(shì)等領(lǐng)域的適用性。它的主要特性是增量渲染:能夠?qū)秩竟ぷ鞣指畛蓧K，并將其分散到多個(gè)幀中。

到此這篇關(guān)于前端常見(jiàn)react面試題合集的文章就介紹到這了,更多相關(guān)react面試題內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論