溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)有哪些高級React面試題，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
難度：?
虛擬DOM（VDOM）它是真實DOM的內(nèi)存表示,一種編程概念，一種模式。它會和真實的DOM同步，比如通過ReactDOM這種庫，這個同步的過程叫做調(diào)和(reconcilation)。
虛擬DOM更多是一種模式，不是一種特定的技術(shù)。
資料來源：https://github.com/sudheerj/reactjs-interview-questions
參考資料：https://www.javascriptcn.com/read-65385.html
難度：??
類組件（Class components）
無論是使用函數(shù)或是類來聲明一個組件，它決不能修改它自己的 props。
props。React是單項數(shù)據(jù)流，父組件改變了屬性，那么子組件視圖會更新。
props是外界傳遞過來的，狀態(tài) state是組件本身的，狀態(tài)可以在組件中任意修改class Welcome extends React.Component {
render() {
return (
<h2>Welcome { this.props.name }</h2>
);
}
}
ReactDOM.render(<Welcome name='react' />, document.getElementById('root'));函數(shù)組件（functional component）
props 對象并返回了一個React元素function Welcome (props) {
return <h2>Welcome {props.name}</h2>
}
ReactDOM.render(<Welcome name='react' />, document.getElementById('root'));區(qū)別
函數(shù)組件和類組件當(dāng)然是有區(qū)別的，而且函數(shù)組件的性能比類組件的性能要高，因為類組件使用的時候要實例化，而函數(shù)組件直接執(zhí)行函數(shù)取返回結(jié)果即可。為了提高性能，盡量使用函數(shù)組件。
| 區(qū)別 | 函數(shù)組件 | 類組件 |
|---|---|---|
是否有 this | 沒有 | 有 |
| 是否有生命周期 | 沒有 | 有 |
是否有狀態(tài) state | 沒有 | 有 |
資料來源：https://github.com/Pau1fitz/react-interview
參考資料：https://overreacted.io/how-are-function-components-different-from-classes/
難度：??
Refs 是 React 提供給我們的安全訪問 DOM 元素或者某個組件實例的句柄。
我們可以為元素添加 ref 屬性然后在回調(diào)函數(shù)中接受該元素在 DOM 樹中的句柄，該值會作為回調(diào)函數(shù)的第一個參數(shù)返回：
class UnControlledForm extends Component {
handleSubmit = () => {
console.log("Input Value: ", this.input.value)
}
render () {
return (
<form onSubmit={this.handleSubmit}>
<input
type='text'
ref={(input) => this.input = input} />
<button type='submit'>Submit</button>
</form>
)
}
}上述代碼中的 input 域包含了一個 ref 屬性，該屬性聲明的回調(diào)函數(shù)會接收 input 對應(yīng)的 DOM 元素，我們將其綁定到 this 指針以便在其他的類函數(shù)中使用。
另外值得一提的是，refs 并不是類組件的專屬，函數(shù)式組件同樣能夠利用閉包暫存其值：
function CustomForm ({handleSubmit}) {
let inputElement
return (
<form onSubmit={() => handleSubmit(inputElement.value)}>
<input
type='text'
ref={(input) => inputElement = input} />
<button type='submit'>Submit</button>
</form>
)
}資料來源：https://github.com/Pau1fitz/react-interview
參考資料：https://stackoverflow.com/questions/29503213/use-state-or-refs-in-react-js-form-components
難度：??
為了解決跨瀏覽器兼容性問題，React中的事件處理程序?qū)鬟fSyntheticEvent實例，該實例是React跨瀏覽器本機事件的跨瀏覽器包裝器。這些綜合事件具有與您慣用的本機事件相同的界面，除了它們在所有瀏覽器中的工作方式相同。
有點有趣的是，React實際上并未將事件附加到子節(jié)點本身。React將使用單個事件偵聽器在頂層偵聽所有事件。這對性能有好處，也意味著React在更新DOM時無需擔(dān)心跟蹤事件監(jiān)聽器。
資料來源：https://tylermcginnis.com/react-interview-questions/
參考資料：https://www.cnblogs.com/xiangming25/p/6430461.html
難度：??
state 和 props都是普通的JavaScript對象。盡管它們兩者都具有影響渲染輸出的信息，但它們在組件方面的功能不同。即
props是一個從外部傳進組件的參數(shù)，主要作為就是從父組件向子組件傳遞數(shù)據(jù)，它具有可讀性和不變性，只能通過外部組件主動傳入新的props來重新渲染子組件，否則子組件的props以及展現(xiàn)形式不會改變。state的主要作用是用于組件保存、控制以及修改自己的狀態(tài)，它只能在constructor中初始化，它算是組件的私有屬性，不可通過外部訪問和修改，只能通過組件內(nèi)部的this.setState來修改，修改state屬性會導(dǎo)致組件的重新渲染。資料來源： https://github.com/sudheerj/reactjs-interview-questions
參考資料：https://stackoverflow.com/questions/27991366/what-is-the-difference-between-state-and-props-in-react
難度：??
Refs 是使用 React.createRef() 方法創(chuàng)建的，并通過 ref 屬性添加到 React 元素上。為了在整個組件中使用refs，只需將 ref 分配給構(gòu)造函數(shù)中的實例屬性
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
render() {
return <p ref={this.myRef} />;
}
}和：
class UserForm extends Component {
handleSubmit = () => {
console.log("Input Value is: ", this.input.value)
}
render () {
return (
<form onSubmit={this.handleSubmit}>
<input
type='text'
ref={(input) => this.input = input} /> // Access DOM input in handle submit
<button type='submit'>Submit</button>
</form>
)
}
}我們還可以借助閉包在功能組件中使用它。
資料來源： https://github.com/sudheerj/reactjs-interview-questions
參考資料：https://segmentfault.com/a/1190000015113359
難度：??
高階組件就是一個函數(shù)，且該函數(shù)接受一個組件作為參數(shù)，并返回一個新的組件?；旧希@是從React的組成性質(zhì)派生的一種模式，我們稱它們?yōu)?strong>“純”組件， 因為它們可以接受任何動態(tài)提供的子組件，但它們不會修改或復(fù)制其輸入組件的任何行為。
const EnhancedComponent = higherOrderComponent(WrappedComponent);
資料來源： https://github.com/sudheerj/reactjs-interview-questions
參考資料：https://css-tricks.com/what-are-higher-order-components-in-react/
難度：??
在調(diào)用方法之前，子類構(gòu)造函數(shù)無法使用this引用super()。
在ES6中，在子類的constructor中必須先調(diào)用super才能引用this。
在constructor中可以使用this.props
使用props：
class MyComponent extends React.Component {
constructor(props) {
super(props);
console.log(this.props); // Prints { name: 'sudheer',age: 30 }
}
}不使用props：
class MyComponent extends React.Component {
constructor(props) {
super();
console.log(this.props); // Prints undefined
// But Props parameter is still available
console.log(props); // Prints { name: 'sudheer',age: 30 }
}
render() {
// No difference outside constructor
console.log(this.props) // Prints { name: 'sudheer',age: 30 }
}
}上面的代碼片段揭示了this.props行為僅在構(gòu)造函數(shù)中有所不同。外部構(gòu)造函數(shù)相同。
資料來源：
https://github.com/sudheerj/reactjs-interview-questions
https://www.fullstack.cafe/React)
難度：???
在HTML當(dāng)中，像<input>,<textarea>, 和 <select>這類表單元素會維持自身狀態(tài)，并根據(jù)用戶輸入進行更新。但在React中，可變的狀態(tài)通常保存在組件的狀態(tài)屬性中，并且只能用 setState() 方法進行更新。
非受控組件
非受控組件，即組件的狀態(tài)不受React控制的組件，例如下邊這個
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class Demo1 extends Component {
render() {
return (
<input />
)
}
}
ReactDOM.render(<Demo1/>, document.getElementById('content'))在這個最簡單的輸入框組件里,我們并沒有干涉input中的value展示,即用戶輸入的內(nèi)容都會展示在上面。如果我們通過props給組件設(shè)置一個初始默認值,defaultValue屬性是React內(nèi)部實現(xiàn)的一個屬性,目的類似于input的placeholder屬性。
ps: 此處如果使用value代替defaultValue,會發(fā)現(xiàn)輸入框的值無法改變
受控組件
同樣的，受控組件就是組件的狀態(tài)受React控制。上面提到過，既然通過設(shè)置input的value屬性, 無法改變輸入框值,那么我們把它和state結(jié)合在一起,再綁定onChange事件,實時更新value值就行了。
class Demo1 extends Component {
constructor(props) {
super(props);
this.state = {
value: props.value
}
}
handleChange(e) {
this.setState({
value: e.target.value
})
}
render() {
return (
<input value={this.state.value} onChange={e => this.handleChange(e)}/>
)
}
}資料來源：https://github.com/Pau1fitz/react-interview
參考資料：js-tutorial-382697.html
難度：???
問題：
const element = (
<h2 className="greeting">
Hello, world!
</h2>
);以下等同于什么使用React.createElement？
答：
const element = React.createElement(
'h2',
{className: 'greeting'},
'Hello, world!'
);資料來源：https://github.com/Pau1fitz/react-interview
難度：???
JSX即JavaScript XML。一種在React組件內(nèi)部構(gòu)建標(biāo)簽的類XML語法。JSX為react.js開發(fā)的一套語法糖，也是react.js的使用基礎(chǔ)。React在不使用JSX的情況下一樣可以工作，然而使用JSX可以提高組件的可讀性，因此推薦使用JSX。
class MyComponent extends React.Component {
render() {
let props = this.props;
return (
<p className="my-component">
<a href={props.url}>{props.name}</a>
</p>
);
}
}優(yōu)點：
1.允許使用熟悉的語法來定義 HTML 元素樹；
2.提供更加語義化且移動的標(biāo)簽；
3.程序結(jié)構(gòu)更容易被直觀化；
4.抽象了 React Element 的創(chuàng)建過程；
5.可以隨時掌控 HTML 標(biāo)簽以及生成這些標(biāo)簽的代碼；
6.是原生的 JavaScript。
資料來源： https://www.codementor.io/blog/5-essential-reactjs-interview-questions-du1084ym1
參考資料：http://facebook.github.io/jsx/
難度：???
如果進行如下方式更新狀態(tài)，那么它將不會重新渲染組件。
//Wrong
This.state.message =”Hello world”;而是使用setState()方法。它計劃對組件狀態(tài)對象的更新。狀態(tài)改變時，組件通過重新渲染做出響應(yīng)
//Correct
This.setState({message: ‘Hello World’});注意：可以分配狀態(tài)的唯一位置是構(gòu)造函數(shù)。
資料來源：https://github.com/sudheerj/reactjs-interview-questions
難度：???
React組件的生命周期分為四個不同階段：
資料來源： https://github.com/sudheerj/reactjs-interview-questions
難度：???
setTimeout或setInterval)進行集成，在這里使用它來更新狀態(tài)，以便我們可以觸發(fā)其他生命周期方法。props就被調(diào)用。 當(dāng)我們更新狀態(tài)時，從setNewNumber觸發(fā)它。資料來源：
https://github.com/sudheerj/reactjs-interview-questions
https://www.fullstack.cafe/React)
難度：???
...在此React（使用JSX）代碼中做什么？它叫什么？
<Modal {...this.props} title='Modal heading' animation={false}>擴展傳值符號。它是在ES2018中添加的（數(shù)組/可迭代對象的傳播較早，ES2015）。
例如，如果this.props包含a：1和b：2，則
<Modal {...this.props} title='Modal heading' animation={false}>與以下內(nèi)容相同：
<Modal a={this.props.a} b={this.props.b} title='Modal heading' animation={false}>擴展符號不僅適用于該用例，而且對于創(chuàng)建具有現(xiàn)有對象的大多數(shù)（或全部）屬性的新對象非常方便-在更新狀態(tài)時會遇到很多問題，因為您無法修改狀態(tài)直：
this.setState(prevState => {
return {foo: {...prevState.foo, a: "updated"}};
});資料來源： https://stackoverflow.com/questions/31048953/what-do-these-three-dots-in-react-do
難度：???
hooks 是react 16.8 引入的特性，他允許你在不寫class的情況下操作state 和react的其他特性。
hooks 只是多了一種寫組件的方法，使編寫一個組件更簡單更方便，同時可以自定義hook把公共的邏輯提取出來，讓邏輯在多個組件之間共享。
Hook 是什么
Hook 是什么？ Hook 是一個特殊的函數(shù)，它可以讓你“鉤入” React 的特性。例如，useState 是允許你在 React 函數(shù)組件中添加 state 的 Hook。稍后我們將學(xué)習(xí)其他 Hook。
什么時候我會用 Hook？ 如果你在編寫函數(shù)組件并意識到需要向其添加一些 state，以前的做法是必須將其它轉(zhuǎn)化為 class?，F(xiàn)在你可以在現(xiàn)有的函數(shù)組件中使用 Hook。
ReactHooks的優(yōu)點
資料來源： https://hackernoon.com/react-hooks-usestate-using-the-state-hook-89ec55b84f8c
難度：???
案例：
import { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
return (
<p>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</p>
)
}語法:
function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];
其中 state 是他的值, setState 是用來設(shè)置值的函數(shù), initialState 是初始值
該初始值可以接受任何參數(shù),但是記得當(dāng)他接受為一個函數(shù)時,就變成了Lazy initialization (延遲初始化)
該函數(shù)返回值即為initialState
const [count, setCount] = useState(0);
const [count, setCount] = useState(()=>0);
// 這兩種初始化方式 是相等的,但是在函數(shù)為初始值時會被執(zhí)行一次
const [count, setCount] = useState(()=>{
console.log('這里只會在初始化的時候執(zhí)行')
// class 中的 constructor 的操作都可以移植到這里
return 0
});
// 當(dāng)?shù)谝淮螆?zhí)行完畢后 就和另一句的代碼是相同的效果了也許很多人 在使用 class 的 setState 時候,會經(jīng)常使用他的回調(diào)函數(shù),
但是這里很遺憾,他只接受新的值,如果想要對應(yīng)的回調(diào),可以使用useEffect,這個問題等會會提供一個跳轉(zhuǎn)鏈接
難度：???
React的StrictMode是一種幫助程序組件，可以幫助您編寫更好的react組件，您可以使用包裝一些組件，<StrictMode />并且基本上可以：
參考資料：http://react.html.cn/docs/strict-mode.html
難度：???
在JavaScript中，this的值取決于當(dāng)前上下文。在React類的組件方法中，開發(fā)人員通常希望它引用組件的當(dāng)前實例，因此有必要將這些方法綁定到該實例。通常，這是在構(gòu)造函數(shù)中完成的，例如：
class SubmitButton extends React.Component {
constructor(props) {
super(props);
this.state = {
isFormSubmitted: false
};
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit() {
this.setState({
isFormSubmitted: true
});
}
render() {
return (
<button onClick={this.handleSubmit}>Submit</button>
)
}
}資料來源： https://www.toptal.com/react/interview-questions
難度：????
傳統(tǒng)的MVC模式在分離數(shù)據(jù)（模型），UI（視圖）和邏輯（控制器）的關(guān)注方面效果很好，但是MVC架構(gòu)經(jīng)常遇到兩個主要問題：
使用Flux模式，復(fù)雜的UI不再受到級聯(lián)更新的困擾。任何給定的React組件都將能夠根據(jù)商店提供的數(shù)據(jù)重建其狀態(tài)。Flux模式還通過限制對共享數(shù)據(jù)的直接訪問來增強數(shù)據(jù)完整性。
資料來源：
https://www.codementor.io/blog/5-essential-reactjs-interview-questions-du1084ym1
https://www.fullstack.cafe/React)
難度：????
React文檔官網(wǎng)并未對Context給出“是什么”的定義，更多是描述使用的Context的場景，以及如何使用Context。
官網(wǎng)對于使用Context的場景是這樣描述的：
In Some Cases, you want to pass data through the component tree without having to pass the props down manuallys at every level. you can do this directly in React with the powerful "context" API.
簡單說就是，當(dāng)你不想在組件樹中通過逐層傳遞props或者state的方式來傳遞數(shù)據(jù)時，可以使用Context來實現(xiàn)跨層級的組件數(shù)據(jù)傳遞。
使用props或者state傳遞數(shù)據(jù)，數(shù)據(jù)自頂下流。
使用Context，可以跨越組件進行數(shù)據(jù)傳遞。
資料來源： https://github.com/WebPredict/react-interview-questions
難度：????
React Fiber 并不是所謂的纖程（微線程、協(xié)程），而是一種基于瀏覽器的單線程調(diào)度算法，背后的支持 API 是大名鼎鼎的：requestIdleCallback。
Fiberl是一種將 recocilation （遞歸 diff），拆分成無數(shù)個小任務(wù)的算法；它隨時能夠停止，恢復(fù)。停止恢復(fù)的時機取決于當(dāng)前的一幀（16ms）內(nèi)，還有沒有足夠的時間允許計算。
上述就是小編為大家分享的有哪些高級React面試題了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼