溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這期內容當中小編將會給大家帶來有關有哪些高級React面試題，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
難度：?
虛擬DOM（VDOM）它是真實DOM的內存表示,一種編程概念，一種模式。它會和真實的DOM同步，比如通過ReactDOM這種庫，這個同步的過程叫做調和(reconcilation)。
虛擬DOM更多是一種模式，不是一種特定的技術。
資料來源：https://github.com/sudheerj/reactjs-interview-questions
參考資料：https://www.javascriptcn.com/read-65385.html
難度：??
類組件（Class components）
無論是使用函數或是類來聲明一個組件，它決不能修改它自己的 props。
props。React是單項數據流，父組件改變了屬性，那么子組件視圖會更新。
props是外界傳遞過來的，狀態 state是組件本身的，狀態可以在組件中任意修改class Welcome extends React.Component {
render() {
return (
<h2>Welcome { this.props.name }</h2>
);
}
}
ReactDOM.render(<Welcome name='react' />, document.getElementById('root'));函數組件（functional component）
props 對象并返回了一個React元素function Welcome (props) {
return <h2>Welcome {props.name}</h2>
}
ReactDOM.render(<Welcome name='react' />, document.getElementById('root'));區別
函數組件和類組件當然是有區別的，而且函數組件的性能比類組件的性能要高，因為類組件使用的時候要實例化，而函數組件直接執行函數取返回結果即可。為了提高性能，盡量使用函數組件。
| 區別 | 函數組件 | 類組件 |
|---|---|---|
是否有 this | 沒有 | 有 |
| 是否有生命周期 | 沒有 | 有 |
是否有狀態 state | 沒有 | 有 |
資料來源：https://github.com/Pau1fitz/react-interview
參考資料：https://overreacted.io/how-are-function-components-different-from-classes/
難度：??
Refs 是 React 提供給我們的安全訪問 DOM 元素或者某個組件實例的句柄。
我們可以為元素添加 ref 屬性然后在回調函數中接受該元素在 DOM 樹中的句柄，該值會作為回調函數的第一個參數返回：
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 屬性，該屬性聲明的回調函數會接收 input 對應的 DOM 元素，我們將其綁定到 this 指針以便在其他的類函數中使用。
另外值得一提的是，refs 并不是類組件的專屬，函數式組件同樣能夠利用閉包暫存其值：
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中的事件處理程序將傳遞SyntheticEvent實例，該實例是React跨瀏覽器本機事件的跨瀏覽器包裝器。這些綜合事件具有與您慣用的本機事件相同的界面，除了它們在所有瀏覽器中的工作方式相同。
有點有趣的是，React實際上并未將事件附加到子節點本身。React將使用單個事件偵聽器在頂層偵聽所有事件。這對性能有好處，也意味著React在更新DOM時無需擔心跟蹤事件監聽器。
資料來源：https://tylermcginnis.com/react-interview-questions/
參考資料：https://www.cnblogs.com/xiangming25/p/6430461.html
難度：??
state 和 props都是普通的JavaScript對象。盡管它們兩者都具有影響渲染輸出的信息，但它們在組件方面的功能不同。即
props是一個從外部傳進組件的參數，主要作為就是從父組件向子組件傳遞數據，它具有可讀性和不變性，只能通過外部組件主動傳入新的props來重新渲染子組件，否則子組件的props以及展現形式不會改變。state的主要作用是用于組件保存、控制以及修改自己的狀態，它只能在constructor中初始化，它算是組件的私有屬性，不可通過外部訪問和修改，只能通過組件內部的this.setState來修改，修改state屬性會導致組件的重新渲染。資料來源： 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() 方法創建的，并通過 ref 屬性添加到 React 元素上。為了在整個組件中使用refs，只需將 ref 分配給構造函數中的實例屬性
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
難度：??
高階組件就是一個函數，且該函數接受一個組件作為參數，并返回一個新的組件。基本上，這是從React的組成性質派生的一種模式，我們稱它們為“純”組件， 因為它們可以接受任何動態提供的子組件，但它們不會修改或復制其輸入組件的任何行為。
const EnhancedComponent = higherOrderComponent(WrappedComponent);
資料來源： https://github.com/sudheerj/reactjs-interview-questions
參考資料：https://css-tricks.com/what-are-higher-order-components-in-react/
難度：??
在調用方法之前，子類構造函數無法使用this引用super()。
在ES6中，在子類的constructor中必須先調用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行為僅在構造函數中有所不同。外部構造函數相同。
資料來源：
https://github.com/sudheerj/reactjs-interview-questions
https://www.fullstack.cafe/React)
難度：???
在HTML當中，像<input>,<textarea>, 和 <select>這類表單元素會維持自身狀態，并根據用戶輸入進行更新。但在React中，可變的狀態通常保存在組件的狀態屬性中，并且只能用 setState() 方法進行更新。
非受控組件
非受控組件，即組件的狀態不受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展示,即用戶輸入的內容都會展示在上面。如果我們通過props給組件設置一個初始默認值,defaultValue屬性是React內部實現的一個屬性,目的類似于input的placeholder屬性。
ps: 此處如果使用value代替defaultValue,會發現輸入框的值無法改變
受控組件
同樣的，受控組件就是組件的狀態受React控制。上面提到過，既然通過設置input的value屬性, 無法改變輸入框值,那么我們把它和state結合在一起,再綁定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組件內部構建標簽的類XML語法。JSX為react.js開發的一套語法糖，也是react.js的使用基礎。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>
);
}
}優點：
1.允許使用熟悉的語法來定義 HTML 元素樹；
2.提供更加語義化且移動的標簽；
3.程序結構更容易被直觀化；
4.抽象了 React Element 的創建過程；
5.可以隨時掌控 HTML 標簽以及生成這些標簽的代碼；
6.是原生的 JavaScript。
資料來源： https://www.codementor.io/blog/5-essential-reactjs-interview-questions-du1084ym1
參考資料：http://facebook.github.io/jsx/
難度：???
如果進行如下方式更新狀態，那么它將不會重新渲染組件。
//Wrong
This.state.message =”Hello world”;而是使用setState()方法。它計劃對組件狀態對象的更新。狀態改變時，組件通過重新渲染做出響應
//Correct
This.setState({message: ‘Hello World’});注意：可以分配狀態的唯一位置是構造函數。
資料來源：https://github.com/sudheerj/reactjs-interview-questions
難度：???
React組件的生命周期分為四個不同階段：
資料來源： https://github.com/sudheerj/reactjs-interview-questions
難度：???
setTimeout或setInterval)進行集成，在這里使用它來更新狀態，以便我們可以觸發其他生命周期方法。props就被調用。 當我們更新狀態時，從setNewNumber觸發它。資料來源：
https://github.com/sudheerj/reactjs-interview-questions
https://www.fullstack.cafe/React)
難度：???
...在此React（使用JSX）代碼中做什么？它叫什么？
<Modal {...this.props} title='Modal heading' animation={false}>擴展傳值符號。它是在ES2018中添加的（數組/可迭代對象的傳播較早，ES2015）。
例如，如果this.props包含a：1和b：2，則
<Modal {...this.props} title='Modal heading' animation={false}>與以下內容相同：
<Modal a={this.props.a} b={this.props.b} title='Modal heading' animation={false}>擴展符號不僅適用于該用例，而且對于創建具有現有對象的大多數（或全部）屬性的新對象非常方便-在更新狀態時會遇到很多問題，因為您無法修改狀態直：
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 是一個特殊的函數，它可以讓你“鉤入” React 的特性。例如，useState 是允許你在 React 函數組件中添加 state 的 Hook。稍后我們將學習其他 Hook。
什么時候我會用 Hook？ 如果你在編寫函數組件并意識到需要向其添加一些 state，以前的做法是必須將其它轉化為 class。現在你可以在現有的函數組件中使用 Hook。
ReactHooks的優點
資料來源： 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 是用來設置值的函數, initialState 是初始值
該初始值可以接受任何參數,但是記得當他接受為一個函數時,就變成了Lazy initialization (延遲初始化)
該函數返回值即為initialState
const [count, setCount] = useState(0);
const [count, setCount] = useState(()=>0);
// 這兩種初始化方式 是相等的,但是在函數為初始值時會被執行一次
const [count, setCount] = useState(()=>{
console.log('這里只會在初始化的時候執行')
// class 中的 constructor 的操作都可以移植到這里
return 0
});
// 當第一次執行完畢后 就和另一句的代碼是相同的效果了也許很多人 在使用 class 的 setState 時候,會經常使用他的回調函數,
但是這里很遺憾,他只接受新的值,如果想要對應的回調,可以使用useEffect,這個問題等會會提供一個跳轉鏈接
難度：???
React的StrictMode是一種幫助程序組件，可以幫助您編寫更好的react組件，您可以使用包裝一些組件，<StrictMode />并且基本上可以：
參考資料：http://react.html.cn/docs/strict-mode.html
難度：???
在JavaScript中，this的值取決于當前上下文。在React類的組件方法中，開發人員通常希望它引用組件的當前實例，因此有必要將這些方法綁定到該實例。通常，這是在構造函數中完成的，例如：
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
難度：????
傳統的MVC模式在分離數據（模型），UI（視圖）和邏輯（控制器）的關注方面效果很好，但是MVC架構經常遇到兩個主要問題：
使用Flux模式，復雜的UI不再受到級聯更新的困擾。任何給定的React組件都將能夠根據商店提供的數據重建其狀態。Flux模式還通過限制對共享數據的直接訪問來增強數據完整性。
資料來源：
https://www.codementor.io/blog/5-essential-reactjs-interview-questions-du1084ym1
https://www.fullstack.cafe/React)
難度：????
React文檔官網并未對Context給出“是什么”的定義，更多是描述使用的Context的場景，以及如何使用Context。
官網對于使用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.
簡單說就是，當你不想在組件樹中通過逐層傳遞props或者state的方式來傳遞數據時，可以使用Context來實現跨層級的組件數據傳遞。
使用props或者state傳遞數據，數據自頂下流。
使用Context，可以跨越組件進行數據傳遞。
資料來源： https://github.com/WebPredict/react-interview-questions
難度：????
React Fiber 并不是所謂的纖程（微線程、協程），而是一種基于瀏覽器的單線程調度算法，背后的支持 API 是大名鼎鼎的：requestIdleCallback。
Fiberl是一種將 recocilation （遞歸 diff），拆分成無數個小任務的算法；它隨時能夠停止，恢復。停止恢復的時機取決于當前的一幀（16ms）內，還有沒有足夠的時間允許計算。
上述就是小編為大家分享的有哪些高級React面試題了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
