這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)React的35個(gè)面試題，文章內(nèi)容豐富且以專(zhuān)業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
創(chuàng)新互聯(lián)專(zhuān)業(yè)提供綿陽(yáng)主機(jī)托管服務(wù)，為用戶提供五星數(shù)據(jù)中心、電信、雙線接入解決方案，用戶可自行在線購(gòu)買(mǎi)綿陽(yáng)主機(jī)托管服務(wù)，并享受7*24小時(shí)金牌售后服務(wù)。
主題: 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ù)組件和類(lèi)組件當(dāng)然是有區(qū)別的，而且函數(shù)組件的性能比類(lèi)組件的性能要高，因?yàn)轭?lèi)組件使用的時(shí)候要實(shí)例化，而函數(shù)組件直接執(zhí)行函數(shù)取返回結(jié)果即可。為了提高性能，盡量使用函數(shù)組件。
| 區(qū)別 | 函數(shù)組件 | 類(lèi)組件 |
|---|---|---|
是否有 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 (
)
}
}請(qǐng)注意，input 元素有一個(gè)ref屬性，它的值是一個(gè)函數(shù)。該函數(shù)接收輸入的實(shí)際 DOM 元素，然后將其放在實(shí)例上，這樣就可以在 handleSubmit 函數(shù)內(nèi)部訪問(wèn)它。
經(jīng)常被誤解的只有在類(lèi)組件中才能使用 refs，但是refs也可以通過(guò)利用 JS 中的閉包與函數(shù)組件一起使用。
function CustomForm ({handleSubmit}) {
let inputElement
return (
)
}主題: React
難度: ??
為了解決跨瀏覽器的兼容性問(wèn)題，SyntheticEvent 實(shí)例將被傳遞給你的事件處理函數(shù)，SyntheticEvent是 React 跨瀏覽器的瀏覽器原生事件包裝器，它還擁有和瀏覽器原生事件相同的接口，包括 stopPropagation() 和 preventDefault()。
比較有趣的是，React 實(shí)際上并不將事件附加到子節(jié)點(diǎn)本身。React 使用單個(gè)事件偵聽(tīng)器偵聽(tīng)頂層的所有事件。這對(duì)性能有好處，也意味著 React 在更新 DOM 時(shí)不需要跟蹤事件監(jiān)聽(tīng)器。
主題: 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，也就是多寫(xiě)無(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 ;
}
}或者這樣用：
class UserForm extends Component {
handleSubmit = () => {
console.log("Input Value is: ", this.input.value)
}
render () {
return (
)
}
}主題: 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() 方法之前，子類(lèi)構(gòu)造函數(shù)無(wú)法使用this引用，ES6 子類(lèi)也是如此。將 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 中，表單元素如 、