問(wèn)題1：什么是虛擬DOM？

主題: React
難度: ⭐

虛擬 DOM (VDOM)是真實(shí) DOM 在內(nèi)存中的表示。UI 的表示形式保存在內(nèi)存中，并與實(shí)際的 DOM 同步。這是一個(gè)發(fā)生在渲染函數(shù)被調(diào)用和元素在屏幕上顯示之間的步驟，整個(gè)過(guò)程被稱為調(diào)和。

問(wèn)題2：類組件和函數(shù)組件之間的區(qū)別是啥？

主題: React
難度: ⭐⭐

• 類組件可以使用其他特性，如狀態(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ù)組件。

問(wèn)題 3：React 中 refs 干嘛用的？

主題: 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>   ) }

問(wèn)題 4：在 React 中如何處理事件

主題: 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)器。

問(wèn)題 5：state 和 props 區(qū)別是啥？

主題: React
難度: ⭐⭐

props和state是普通的 JS 對(duì)象。雖然它們都包含影響渲染輸出的信息，但是它們?cè)诮M件方面的功能是不同的。即

• state 是組件自己管理數(shù)據(jù)，控制自己的狀態(tài)，可變；
• props 是外部傳入的數(shù)據(jù)參數(shù)，不可變；
• 沒(méi)有state的叫做無(wú)狀態(tài)組件，有state的叫做有狀態(tài)組件；
• 多用 props，少用 state，也就是多寫(xiě)無(wú)狀態(tài)組件。

問(wèn)題 6：如何創(chuàng)建 refs

主題: 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>     )   } }

問(wèn)題 7：什么是高階組件？

主題: React
難度: ⭐⭐

高階組件(HOC)是接受一個(gè)組件并返回一個(gè)新組件的函數(shù)?；旧希@是一個(gè)模式，是從 React 的組合特性中衍生出來(lái)的，稱其為純組件，因?yàn)樗鼈兛梢越邮苋魏蝿?dòng)態(tài)提供的子組件，但不會(huì)修改或復(fù)制輸入組件中的任何行為。

const EnhancedComponent = higherOrderComponent(WrappedComponent);

HOC 可以用于以下許多用例

• 代碼重用、邏輯和引導(dǎo)抽象
• 渲染劫持
• state 抽象和操作
• props 處理

問(wèn)題 8：在構(gòu)造函數(shù)調(diào)用 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ù)之外也是一樣的。

問(wèn)題 9：什么是控制組件？

主題: 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 控制其值的輸入表單元素稱為受控組件。

問(wèn)題 10：如何 React.createElement ？

主題: React
難度: ⭐⭐⭐

問(wèn)題：

const element = (   <h1 className="greeting">     Hello, world!   </h1> )

上述代碼如何使用 React.createElement 來(lái)實(shí)現(xiàn):

const element = React.createElement(   'h1',   {className: 'greeting'},   'Hello, world!' );

問(wèn)題 11：講講什么是 JSX ？

主題: React
難度: ⭐⭐⭐

當(dāng) Facebook 第一次發(fā)布 React 時(shí)，他們還引入了一種新的 JS 方言 JSX，將原始 HTML 模板嵌入到 JS 代碼中。JSX 代碼本身不能被瀏覽器讀取，必須使用Babel和webpack等工具將其轉(zhuǎn)換為傳統(tǒng)的JS。很多開(kāi)發(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>     );   } }

問(wèn)題 12：根據(jù)下面定義的代碼，可以找出存在的兩個(gè)問(wèn)題嗎 ？

主題: React
難度: ⭐⭐⭐

請(qǐng)看下面的代碼：

答案：

1.在構(gòu)造函數(shù)沒(méi)有將 props 傳遞給 super，它應(yīng)該包括以下行

constructor(props) {   super(props);   // ... }

2.事件監(jiān)聽(tīng)器(通過(guò)addEventListener()分配時(shí))的作用域不正確，因?yàn)?ES6 不提供自動(dòng)綁定。因此，開(kāi)發(fā)人員可以在構(gòu)造函數(shù)中重新分配clickHandler來(lái)包含正確的綁定:

constructor(props) {   super(props);   this.clickHandler = this.clickHandler.bind(this);   // ... }

問(wèn)題 13：為什么不直接更新 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’});

問(wèn)題 14：React 組件生命周期有哪些不同階段？

主題: React
難度: ⭐⭐⭐

在組件生命周期中有四個(gè)不同的階段：

1. Initialization：在這個(gè)階段，組件準(zhǔn)備設(shè)置初始化狀態(tài)和默認(rèn)屬性。
2. Mounting：react 組件已經(jīng)準(zhǔn)備好掛載到瀏覽器 DOM 中。這個(gè)階段包括componentWillMount和componentDidMount生命周期方法。
3. Updating：在這個(gè)階段，組件以兩種方式更新，發(fā)送新的 props 和 state 狀態(tài)。此階段包括shouldComponentUpdate、componentWillUpdate和componentDidUpdate生命周期方法。
4. Unmounting：在這個(gè)階段，組件已經(jīng)不再被需要了，它從瀏覽器 DOM 中卸載下來(lái)。這個(gè)階段包含 componentWillUnmount 生命周期方法。

除以上四個(gè)常用生命周期外，還有一個(gè)錯(cuò)誤處理的階段：

Error Handling：在這個(gè)階段，不論在渲染的過(guò)程中，還是在生命周期方法中或是在任何子組件的構(gòu)造函數(shù)中發(fā)生錯(cuò)誤，該組件都會(huì)被調(diào)用。這個(gè)階段包含了 componentDidCatch 生命周期方法。

問(wèn)題 15：React 的生命周期方法有哪些？

主題: React
難度: ⭐⭐⭐

• componentWillMount:在渲染之前執(zhí)行，用于根組件中的 App 級(jí)配置。
• componentDidMount：在第一次渲染之后執(zhí)行，可以在這里做AJAX請(qǐng)求，DOM 的操作或狀態(tài)更新以及設(shè)置事件監(jiān)聽(tīng)器。
• 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)聽(tīng)器。

問(wèn)題 16：這三個(gè)點(diǎn)(…)在 React 干嘛用的？

主題: React
難度: ⭐⭐⭐

... 在React（使用JSX）代碼中做什么？它叫什么？

<Modal {...this.props} title='Modal heading'  animation={false}/>

這個(gè)叫擴(kuò)展操作符號(hào)或者展開(kāi)操作符，例如，如果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"}}; });

問(wèn)題 17：使用 React Hooks 好處是啥？

主題: 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)置鉤子。

問(wèn)題 18：什么是 React Hooks？

主題: React
難度: ⭐⭐⭐

Hooks是 React 16.8 中的新添加內(nèi)容。它們?cè)试S在不編寫(xiě)類的情況下使用state和其他 React 特性。使用 Hooks，可以從組件中提取有狀態(tài)邏輯，這樣就可以獨(dú)立地測(cè)試和重用它。Hooks 允許咱們?cè)诓桓淖兘M件層次結(jié)構(gòu)的情況下重用有狀態(tài)邏輯，這樣在許多組件之間或與社區(qū)共享 Hooks 變得很容易。

問(wèn)題 19：React 中的 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)部使用它可以做