溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)React的35個(gè)面試題，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
主題: React
難度: ?
虛擬 DOM (VDOM)是真實(shí) DOM 在內(nèi)存中的表示。UI 的表示形式保存在內(nèi)存中，并與實(shí)際的 DOM 同步。這是一個(gè)發(fā)生在渲染函數(shù)被調(diào)用和元素在屏幕上顯示之間的步驟，整個(gè)過(guò)程被稱為調(diào)和。
主題: React
難度: ??
state 和生命周期鉤子。props 渲染到頁(yè)面時(shí)，就是無(wú)狀態(tài)組件，就屬于函數(shù)組件，也被稱為啞組件或展示組件。函數(shù)組件和類組件當(dāng)然是有區(qū)別的，而且函數(shù)組件的性能比類組件的性能要高，因?yàn)轭惤M件使用的時(shí)候要實(shí)例化，而函數(shù)組件直接執(zhí)行函數(shù)取返回結(jié)果即可。為了提高性能，盡量使用函數(shù)組件。
| 區(qū)別 | 函數(shù)組件 | 類組件 |
|---|---|---|
是否有 this | 沒(méi)有 | 有 |
| 是否有生命周期 | 沒(méi)有 | 有 |
是否有狀態(tài) state | 沒(méi)有 | 有 |
主題: React
難度: ??
Refs 提供了一種訪問(wèn)在render方法中創(chuàng)建的 DOM 節(jié)點(diǎn)或者 React 元素的方法。在典型的數(shù)據(jù)流中，props 是父子組件交互的唯一方式，想要修改子組件，需要使用新的pros重新渲染它。凡事有例外，某些情況下咱們需要在典型數(shù)據(jù)流外，強(qiáng)制修改子代，這個(gè)時(shí)候可以使用 Refs。
咱們可以在組件添加一個(gè) ref 屬性來(lái)使用，該屬性的值是一個(gè)回調(diào)函數(shù)，接收作為其第一個(gè)參數(shù)的底層 DOM 元素或組件的掛載實(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>
)
}
}請(qǐng)注意，input 元素有一個(gè)ref屬性，它的值是一個(gè)函數(shù)。該函數(shù)接收輸入的實(shí)際 DOM 元素，然后將其放在實(shí)例上，這樣就可以在 handleSubmit 函數(shù)內(nèi)部訪問(wèn)它。
經(jīng)常被誤解的只有在類組件中才能使用 refs，但是refs也可以通過(guò)利用 JS 中的閉包與函數(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>
)
}主題: React
難度: ??
為了解決跨瀏覽器的兼容性問(wèn)題，SyntheticEvent 實(shí)例將被傳遞給你的事件處理函數(shù)，SyntheticEvent是 React 跨瀏覽器的瀏覽器原生事件包裝器，它還擁有和瀏覽器原生事件相同的接口，包括 stopPropagation() 和 preventDefault()。
比較有趣的是，React 實(shí)際上并不將事件附加到子節(jié)點(diǎn)本身。React 使用單個(gè)事件偵聽器偵聽頂層的所有事件。這對(duì)性能有好處，也意味著 React 在更新 DOM 時(shí)不需要跟蹤事件監(jiān)聽器。
主題: React
難度: ??
props和state是普通的 JS 對(duì)象。雖然它們都包含影響渲染輸出的信息，但是它們?cè)诮M件方面的功能是不同的。即
state 是組件自己管理數(shù)據(jù)，控制自己的狀態(tài)，可變；props 是外部傳入的數(shù)據(jù)參數(shù)，不可變；state的叫做無(wú)狀態(tài)組件，有state的叫做有狀態(tài)組件；props，少用 state，也就是多寫無(wú)狀態(tài)組件。主題: React
難度: ??
Refs 是使用 React.createRef() 創(chuàng)建的，并通過(guò) ref 屬性附加到 React 元素。在構(gòu)造組件時(shí)，通常將 Refs 分配給實(shí)例屬性，以便可以在整個(gè)組件中引用它們。
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>
)
}
}主題: React
難度: ??
高階組件(HOC)是接受一個(gè)組件并返回一個(gè)新組件的函數(shù)?；旧希@是一個(gè)模式，是從 React 的組合特性中衍生出來(lái)的，稱其為純組件，因?yàn)樗鼈兛梢越邮苋魏蝿?dòng)態(tài)提供的子組件，但不會(huì)修改或復(fù)制輸入組件中的任何行為。
const EnhancedComponent = higherOrderComponent(WrappedComponent);
HOC 可以用于以下許多用例
super 并將 props 作為參數(shù)傳入的作用是啥？主題: React
難度: ??
在調(diào)用 super() 方法之前，子類構(gòu)造函數(shù)無(wú)法使用this引用，ES6 子類也是如此。將 props 參數(shù)傳遞給 super() 調(diào)用的主要原因是在子構(gòu)造函數(shù)中能夠通過(guò)this.props來(lái)獲取傳入的 props。
傳遞 props
class MyComponent extends React.Component {
constructor(props) {
super(props);
console.log(this.props); // { name: 'sudheer',age: 30 }
}
}沒(méi)傳遞 props
class MyComponent extends React.Component {
constructor(props) {
super();
console.log(this.props); // undefined
// 但是 Props 參數(shù)仍然可用
console.log(props); // Prints { name: 'sudheer',age: 30 }
}
render() {
// 構(gòu)造函數(shù)外部不受影響
console.log(this.props) // { name: 'sudheer',age: 30 }
}
}上面示例揭示了一點(diǎn)。props 的行為只有在構(gòu)造函數(shù)中是不同的，在構(gòu)造函數(shù)之外也是一樣的。
主題: React
難度: ???
在 HTML 中，表單元素如 <input>、<textarea>和<select>通常維護(hù)自己的狀態(tài)，并根據(jù)用戶輸入進(jìn)行更新。當(dāng)用戶提交表單時(shí)，來(lái)自上述元素的值將隨表單一起發(fā)送。
而 React 的工作方式則不同。包含表單的組件將跟蹤其狀態(tài)中的輸入值，并在每次回調(diào)函數(shù)(例如onChange)觸發(fā)時(shí)重新渲染組件，因?yàn)闋顟B(tài)被更新。以這種方式由 React 控制其值的輸入表單元素稱為受控組件。
主題: React
難度: ???
問(wèn)題：
const element = (
<h2 className="greeting">
Hello, world!
</h2>
)上述代碼如何使用 React.createElement 來(lái)實(shí)現(xiàn):
const element = React.createElement(
'h2',
{className: 'greeting'},
'Hello, world!'
);主題: React
難度: ???
當(dāng) Facebook 第一次發(fā)布 React 時(shí)，他們還引入了一種新的 JS 方言 JSX，將原始 HTML 模板嵌入到 JS 代碼中。JSX 代碼本身不能被瀏覽器讀取，必須使用Babel和webpack等工具將其轉(zhuǎn)換為傳統(tǒng)的JS。很多開發(fā)人員就能無(wú)意識(shí)使用 JSX，因?yàn)樗呀?jīng)與 React 結(jié)合在一直了。
class MyComponent extends React.Component {
render() {
let props = this.props;
return (
<p className="my-component">
<a href={props.url}>{props.name}</a>
</p>
);
}
}主題: React
難度: ???
請(qǐng)看下面的代碼：
答案：
1.在構(gòu)造函數(shù)沒(méi)有將 props 傳遞給 super，它應(yīng)該包括以下行
constructor(props) {
super(props);
// ...
}2.事件監(jiān)聽器(通過(guò)addEventListener()分配時(shí))的作用域不正確，因?yàn)?ES6 不提供自動(dòng)綁定。因此，開發(fā)人員可以在構(gòu)造函數(shù)中重新分配clickHandler來(lái)包含正確的綁定:
constructor(props) {
super(props);
this.clickHandler = this.clickHandler.bind(this);
// ...
}state 呢 ?主題: React
難度: ???
如果試圖直接更新 state ，則不會(huì)重新渲染組件。
// 錯(cuò)誤 This.state.message = 'Hello world';
需要使用setState()方法來(lái)更新 state。它調(diào)度對(duì)組件state對(duì)象的更新。當(dāng)state改變時(shí)，組件通過(guò)重新渲染來(lái)響應(yīng)：
// 正確做法
This.setState({message: ‘Hello World’});主題: React
難度: ???
在組件生命周期中有四個(gè)不同的階段：
componentWillMount和componentDidMount生命周期方法。shouldComponentUpdate、componentWillUpdate和componentDidUpdate生命周期方法。componentWillUnmount 生命周期方法。除以上四個(gè)常用生命周期外，還有一個(gè)錯(cuò)誤處理的階段：
Error Handling：在這個(gè)階段，不論在渲染的過(guò)程中，還是在生命周期方法中或是在任何子組件的構(gòu)造函數(shù)中發(fā)生錯(cuò)誤，該組件都會(huì)被調(diào)用。這個(gè)階段包含了 componentDidCatch 生命周期方法。
主題: React
難度: ???
componentWillMount:在渲染之前執(zhí)行，用于根組件中的 App 級(jí)配置。componentDidMount：在第一次渲染之后執(zhí)行，可以在這里做AJAX請(qǐng)求，DOM 的操作或狀態(tài)更新以及設(shè)置事件監(jiān)聽器。componentWillReceiveProps：在初始化render的時(shí)候不會(huì)執(zhí)行，它會(huì)在組件接受到新的狀態(tài)(Props)時(shí)被觸發(fā)，一般用于父組件狀態(tài)更新時(shí)子組件的重新渲染shouldComponentUpdate：確定是否更新組件。默認(rèn)情況下，它返回true。如果確定在 state 或 props 更新后組件不需要在重新渲染，則可以返回false，這是一個(gè)提高性能的方法。componentWillUpdate：在shouldComponentUpdate返回 true 確定要更新組件之前件之前執(zhí)行。componentDidUpdate：它主要用于更新DOM以響應(yīng)props或state更改。componentWillUnmount：它用于取消任何的網(wǎng)絡(luò)請(qǐng)求，或刪除與組件關(guān)聯(lián)的所有事件監(jiān)聽器。主題: React
難度: ???
... 在React（使用JSX）代碼中做什么？它叫什么？
<Modal {...this.props} title='Modal heading' animation={false}/>這個(gè)叫擴(kuò)展操作符號(hào)或者展開操作符，例如，如果this.props包含a：1和b：2，則
<Modal {...this.props} title='Modal heading' animation={false}>等價(jià)于下面內(nèi)容：
<Modal a={this.props.a} b={this.props.b} title='Modal heading' animation={false}>擴(kuò)展符號(hào)不僅適用于該用例，而且對(duì)于創(chuàng)建具有現(xiàn)有對(duì)象的大多數(shù)（或全部）屬性的新對(duì)象非常方便，在更新state 咱們就經(jīng)常這么做：
this.setState(prevState => {
return {foo: {...prevState.foo, a: "updated"}};
});主題: React
難度: ???
首先，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)置鉤子。
主題: React
難度: ???
Hooks是 React 16.8 中的新添加內(nèi)容。它們?cè)试S在不編寫類的情況下使用state和其他 React 特性。使用 Hooks，可以從組件中提取有狀態(tài)邏輯，這樣就可以獨(dú)立地測(cè)試和重用它。Hooks 允許咱們?cè)诓桓淖兘M件層次結(jié)構(gòu)的情況下重用有狀態(tài)邏輯，這樣在許多組件之間或與社區(qū)共享 Hooks 變得很容易。
useState() 是什么？主題: React
難度: ???
下面說(shuō)明useState(0)的用途：
...
const [count, setCounter] = useState(0);
const [moreStuff, setMoreStuff] = useState(...);
...
const setCount = () => {
setCounter(count + 1);
setMoreStuff(...);
...
};useState 是一個(gè)內(nèi)置的 React Hook。useState(0) 返回一個(gè)元組，其中第一個(gè)參數(shù)count是計(jì)數(shù)器的當(dāng)前狀態(tài)，setCounter 提供更新計(jì)數(shù)器狀態(tài)的方法。
咱們可以在任何地方使用setCounter方法更新計(jì)數(shù)狀態(tài)-在這種情況下，咱們?cè)?code>setCount函數(shù)內(nèi)部使用它可以做更多的事情，使用 Hooks，能夠使咱們的代碼保持更多功能，還可以避免過(guò)多使用基于類的組件。
主題: React
難度: ???
React 的StrictMode是一種輔助組件，可以幫助咱們編寫更好的 react 組件，可以使用<StrictMode />包裝一組組件，并且可以幫咱們以下檢查：
主題: React
難度: ???
在 JS 中，this 值會(huì)根據(jù)當(dāng)前上下文變化。在 React 類組件方法中，開發(fā)人員通常希望 this 引用組件的當(dāng)前實(shí)例，因此有必要將這些方法綁定到實(shí)例。通常這是在構(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>
)
}
}主題: React
難度: ???
在構(gòu)建 React 應(yīng)用程序時(shí)，在多層嵌套組件來(lái)使用另一個(gè)嵌套組件提供的數(shù)據(jù)。最簡(jiǎn)單的方法是將一個(gè) prop 從每個(gè)組件一層層的傳遞下去，從源組件傳遞到深層嵌套組件，這叫做prop drilling。
prop drilling的主要缺點(diǎn)是原本不需要數(shù)據(jù)的組件變得不必要地復(fù)雜，并且難以維護(hù)。
為了避免prop drilling，一種常用的方法是使用React Context。通過(guò)定義提供數(shù)據(jù)的Provider組件，并允許嵌套的組件通過(guò)Consumer組件或useContext Hook 使用上下文數(shù)據(jù)。
主題: React
難度: ???
傳統(tǒng)的 MVC 模式在分離數(shù)據(jù)(Model)、UI(View和邏輯(Controller)方面工作得很好，但是 MVC 架構(gòu)經(jīng)常遇到兩個(gè)主要問(wèn)題:
數(shù)據(jù)流不夠清晰:跨視圖發(fā)生的級(jí)聯(lián)更新常常會(huì)導(dǎo)致混亂的事件網(wǎng)絡(luò)，難于調(diào)試。
缺乏數(shù)據(jù)完整性:模型數(shù)據(jù)可以在任何地方發(fā)生突變，從而在整個(gè)UI中產(chǎn)生不可預(yù)測(cè)的結(jié)果。
使用 Flux 模式的復(fù)雜用戶界面不再遭受級(jí)聯(lián)更新，任何給定的React 組件都能夠根據(jù) store 提供的數(shù)據(jù)重建其狀態(tài)。Flux 模式還通過(guò)限制對(duì)共享數(shù)據(jù)的直接訪問(wèn)來(lái)加強(qiáng)數(shù)據(jù)完整性。
主題: React
難度: ???
盡管非受控組件通常更易于實(shí)現(xiàn)，因?yàn)橹恍枋褂?code>refs即可從 DOM 中獲取值，但通常建議優(yōu)先選擇受控制的組件，而不是非受控制的組件。
這樣做的主要原因是受控組件支持即時(shí)字段驗(yàn)證，允許有條件地禁用/啟用按鈕，強(qiáng)制輸入格式。
主題: React
難度: ????
這段代碼有什么問(wèn)題:
this.setState((prevState, props) => {
return {
streak: prevState.streak + props.count
}
})答案：
沒(méi)有什么問(wèn)題。這種方式很少被使用，咱們可以將一個(gè)函數(shù)傳遞給setState，該函數(shù)接收上一個(gè) state 的值和當(dāng)前的props，并返回一個(gè)新的狀態(tài)，如果咱們需要根據(jù)以前的狀態(tài)重新設(shè)置狀態(tài)，推薦使用這種方式。
主題: React
難度: ????
Context 通過(guò)組件樹提供了一個(gè)傳遞數(shù)據(jù)的方法，從而避免了在每一個(gè)層級(jí)手動(dòng)的傳遞 props 屬性。
主題: React
難度: ????
Fiber 是 React 16 中新的協(xié)調(diào)引擎或重新實(shí)現(xiàn)核心算法。它的主要目標(biāo)是支持虛擬DOM的增量渲染。React Fiber 的目標(biāo)是提高其在動(dòng)畫、布局、手勢(shì)、暫停、中止或重用等方面的適用性，并為不同類型的更新分配優(yōu)先級(jí)，以及新的并發(fā)原語(yǔ)。
React Fiber 的目標(biāo)是增強(qiáng)其在動(dòng)畫、布局和手勢(shì)等領(lǐng)域的適用性。它的主要特性是增量渲染:能夠?qū)秩竟ぷ鞣指畛蓧K，并將其分散到多個(gè)幀中。
主題: React
難度: ????
當(dāng)應(yīng)用程序在開發(fā)模式下運(yùn)行時(shí)，React 將自動(dòng)檢查咱們?cè)诮M件上設(shè)置的所有 props，以確保它們具有正確的數(shù)據(jù)類型。對(duì)于不正確的類型，開發(fā)模式下會(huì)在控制臺(tái)中生成警告消息，而在生產(chǎn)模式中由于性能影響而禁用它。強(qiáng)制的 props 用 isRequired定義的。
下面是一組預(yù)定義的 prop 類型:
例如，咱們?yōu)橛脩艚M件定義了如下的propTypes
import PropTypes from 'prop-types';
class User extends React.Component {
render() {
return (
<h2>Welcome, {this.props.name}</h2>
<h3>Age, {this.props.age}
);
}
}
User.propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number.isRequired
};主題: React
難度: ????
構(gòu)造函數(shù)和getInitialState之間的區(qū)別就是ES6和ES5本身的區(qū)別。在使用ES6類時(shí)，應(yīng)該在構(gòu)造函數(shù)中初始化state，并在使用React.createClass時(shí)定義getInitialState方法。
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = { /* initial state */ };
}
}等價(jià)于：
var MyComponent = React.createClass({
getInitialState() {
return { /* initial state */ };
},
});主題: React
難度: ????
對(duì)于某些屬性，React 非常聰明，如果傳遞給它的值是虛值，可以省略該屬性。例如：
var InputComponent = React.createClass({
render: function() {
var required = true;
var disabled = false;
return (
<input type="text" disabled={disabled} required={required} />
);
}
});渲染結(jié)果：
<input type="text" required>
另一種可能的方法是：
var condition = true;
var component = (
<p
value="foo"
{ ...( condition && { disabled: true } ) } />
);render props 和高階組件嗎？主題: React
難度: ????
通常，render props和高階組件僅渲染一個(gè)子組件。React團(tuán)隊(duì)認(rèn)為，Hooks 是服務(wù)此用例的更簡(jiǎn)單方法。
這兩種模式仍然有一席之地(例如，一個(gè)虛擬的 scroller 組件可能有一個(gè) renderItem prop，或者一個(gè)可視化的容器組件可能有它自己的 DOM 結(jié)構(gòu))。但在大多數(shù)情況下，Hooks 就足夠了，可以幫助減少樹中的嵌套。
主題: React
難度: ????
React 中最常見的問(wèn)題之一是組件不必要地重新渲染。React 提供了兩個(gè)方法，在這些情況下非常有用：
React.memo():這可以防止不必要地重新渲染函數(shù)組件PureComponent:這可以防止不必要地重新渲染類組件這兩種方法都依賴于對(duì)傳遞給組件的props的淺比較，如果 props 沒(méi)有改變，那么組件將不會(huì)重新渲染。雖然這兩種工具都非常有用，但是淺比較會(huì)帶來(lái)額外的性能損失，因此如果使用不當(dāng)，這兩種方法都會(huì)對(duì)性能產(chǎn)生負(fù)面影響。
通過(guò)使用 React Profiler，可以在使用這些方法前后對(duì)性能進(jìn)行測(cè)量，從而確保通過(guò)進(jìn)行給定的更改來(lái)實(shí)際改進(jìn)性能。
主題: React
難度: ?????
純函數(shù)是不依賴并且不會(huì)在其作用域之外修改變量狀態(tài)的函數(shù)。本質(zhì)上，純函數(shù)始終在給定相同參數(shù)的情況下返回相同結(jié)果。
setState時(shí)，React render 是如何工作的？主題: React
難度: ?????
咱們可以將"render"分為兩個(gè)步驟：
render方法被調(diào)用時(shí)，它返回一個(gè)新的組件的虛擬 DOM 結(jié)構(gòu)。當(dāng)調(diào)用setState()時(shí)，render會(huì)被再次調(diào)用，因?yàn)槟J(rèn)情況下shouldComponentUpdate總是返回true，所以默認(rèn)情況下 React 是沒(méi)有優(yōu)化的。主題: React
難度: ?????
有幾種常用方法可以避免在 React 中綁定方法：
1.將事件處理程序定義為內(nèi)聯(lián)箭頭函數(shù)
class SubmitButton extends React.Component {
constructor(props) {
super(props);
this.state = {
isFormSubmitted: false
};
}
render() {
return (
<button onClick={() => {
this.setState({ isFormSubmitted: true });
}}>Submit</button>
)
}
}2.使用箭頭函數(shù)來(lái)定義方法：
class SubmitButton extends React.Component {
state = {
isFormSubmitted: false
}
handleSubmit = () => {
this.setState({
isFormSubmitted: true
});
}
render() {
return (
<button onClick={this.handleSubmit}>Submit</button>
)
}
}3.使用帶有 Hooks 的函數(shù)組件
const SubmitButton = () => {
const [isFormSubmitted, setIsFormSubmitted] = useState(false);
return (
<button onClick={() => {
setIsFormSubmitted(true);
}}>Submit</button>
)
};上述就是小編為大家分享的React的35個(gè)面試題了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼