Q1?：什么是虛擬DOM鸳谜？
難度：:star:
虛擬DOM（VDOM）它是真實(shí)DOM的內(nèi)存表示,一種編程概念饵溅，一種模式赫冬。它會(huì)和真實(shí)的DOM同步并巍，比如通過ReactDOM這種庫目木，這個(gè)同步的過程叫做調(diào)和(reconcilation)。
虛擬DOM更多是一種模式懊渡，不是一種特定的技術(shù)刽射。
:link:?資料來源：?github.com/sudheerj
:link:?參考資料：?什么是虛擬DOM
Q2?：類組件和函數(shù)組件之間有什么區(qū)別军拟？
難度：:star::star:
類組件（?Class components?）
無論是使用函數(shù)或是類來聲明一個(gè)組件，它決不能修改它自己的?props?誓禁。
所有 React 組件都必須是純函數(shù)懈息，并禁止修改其自身?props?。
React是單項(xiàng)數(shù)據(jù)流现横，父組件改變了屬性漓拾，那么子組件視圖會(huì)更新。
屬性?props?是外界傳遞過來的戒祠，狀態(tài)?state?是組件本身的，狀態(tài)可以在組件中任意修改
組件的屬性和狀態(tài)改變都會(huì)更新視圖速种。
class Welcome extends React.Component {
? render() {
? ? return (
? ? ? <h1>Welcome { this.props.name }</h1>
? ? );
? }
}
ReactDOM.render(<Welcome name='react' />, document.getElementById('root'));
函數(shù)組件（functional component）
函數(shù)組件接收一個(gè)單一的?props?對(duì)象并返回了一個(gè)React元素
function?Welcome?(props) { return
Welcome {props.name}
} ReactDOM.render(, document.getElementById('root'));區(qū)別
函數(shù)組件和類組件當(dāng)然是有區(qū)別的姜盈，而且函數(shù)組件的性能比類組件的性能要高，因?yàn)轭惤M件使用的時(shí)候要實(shí)例化配阵，而函數(shù)組件直接執(zhí)行函數(shù)取返回結(jié)果即可馏颂。為了提高性能，盡量使用函數(shù)組件棋傍。
區(qū)別函數(shù)組件類組件是否有this沒有有是否有生命周期沒有有是否有狀態(tài)state沒有有
:link:?資料來源：?github.com/Pau1fitz
:link:?參考資料：?函數(shù)組件與類組件區(qū)別
Q3?：React中的refs作用是什么救拉？
難度：:star::star:
Refs 是 React 提供給我們的安全訪問 DOM 元素或者某個(gè)組件實(shí)例的句柄。
我們可以為元素添加 ref 屬性然后在回調(diào)函數(shù)中接受該元素在 DOM 樹中的句柄瘫拣，該值會(huì)作為回調(diào)函數(shù)的第一個(gè)參數(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 域包含了一個(gè) ref 屬性亿絮，該屬性聲明的回調(diào)函數(shù)會(huì)接收 input 對(duì)應(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>
? )
}
:link:?資料來源：?github.com/Pau1fitz
:link:?參考資料：?https://stackoverflow.com/que...
Q4?：描述React事件處理拢切。
難度：:star::star:
為了解決跨瀏覽器兼容性問題蒂萎，React中的事件處理程序?qū)鬟fSyntheticEvent實(shí)例，該實(shí)例是React跨瀏覽器本機(jī)事件的跨瀏覽器包裝器淮椰。這些綜合事件具有與您慣用的本機(jī)事件相同的界面五慈，除了它們?cè)谒袨g覽器中的工作方式相同。
有點(diǎn)有趣的是主穗，React實(shí)際上并未將事件附加到子節(jié)點(diǎn)本身泻拦。React將使用單個(gè)事件偵聽器在頂層偵聽所有事件。這對(duì)性能有好處黔牵，也意味著React在更新DOM時(shí)無需擔(dān)心跟蹤事件監(jiān)聽器聪轿。
:link:?資料來源：?tylermcginnis.com
:link:?參考資料：?https://www.cnblogs.com/xiang...
Q5?：state 和 props有什么區(qū)別？
難度：:star::star:
state 和 props都是普通的JavaScript對(duì)象猾浦。盡管它們兩者都具有影響渲染輸出的信息陆错，但它們?cè)诮M件方面的功能不同灯抛。即
props?是一個(gè)從外部傳進(jìn)組件的參數(shù)，主要作為就是從父組件向子組件傳遞數(shù)據(jù)音瓷，它具有可讀性和不變性对嚼，只能通過外部組件主動(dòng)傳入新的?props?來重新渲染子組件，否則子組件的props?以及展現(xiàn)形式不會(huì)改變绳慎。
state?的主要作用是用于組件保存纵竖、控制以及修改自己的狀態(tài)，它只能在?constructor?中初始化杏愤，它算是組件的私有屬性靡砌，不可通過外部訪問和修改，只能通過組件內(nèi)部的this.setState?來修改珊楼，修改?state?屬性會(huì)導(dǎo)致組件的重新渲染通殃。
:link:?資料來源：?https?:?//github.com/sudheerj
:link:?參考資料：?https://stackoverflow.com/que...
Q6?：如何創(chuàng)建refs？
難度：:star::star:
Refs?是使用?React.createRef()?方法創(chuàng)建的厕宗，并通過?ref?屬性添加到 React 元素上画舌。為了在整個(gè)組件中使用?refs?，只需將?ref?分配給構(gòu)造函數(shù)中的實(shí)例屬性
class MyComponent extends React.Component {
? constructor(props) {
? ? super(props);
? ? this.myRef = React.createRef();
? }
? render() {
? ? return <div 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>
? ? )
? }
}
我們還可以借助閉包在功能組件中使用它已慢。
:link:?資料來源：?github.com/sudheerj
:link:?參考資料：?https://segmentfault.com/a/11...
Q7：什么是高階組件曲聂？
難度：:star::star:
高階組件就是一個(gè)函數(shù)，且該函數(shù)接受一個(gè)組件作為參數(shù)佑惠，并返回一個(gè)新的組件朋腋。基本上兢仰，這是從React的組成性質(zhì)派生的一種模式乍丈，我們稱它們?yōu)?“純”組件，?因?yàn)樗鼈兛梢越邮苋魏蝿?dòng)態(tài)提供的子組件把将，但它們不會(huì)修改或復(fù)制其輸入組件的任何行為轻专。
const EnhancedComponent = higherOrderComponent(WrappedComponent);
高階組件（HOC）是 React 中用于復(fù)用組件邏輯的一種高級(jí)技巧
高階組件的參數(shù)為一個(gè)組件返回一個(gè)新的組件
組件是將 props 轉(zhuǎn)換為 UI，而高階組件是將組件轉(zhuǎn)換為另一個(gè)組件
:link:?資料來源：?github.com/sudheerj
:link:?參考資料：?https://css-tricks.com/what-a...
Q8：constructor中super與props參數(shù)一起使用的目的是什么察蹲？
難度：:star::star:
在調(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ù)相同亚兄。
:link:?資料來源：?github.com/sudheerj?https://www.fullstack.cafe/Re...
Q9?：什么是受控組件混稽？
難度：:star::star::star:
在HTML當(dāng)中，像?<input>?,?<textarea>?, 和?<select>?這類表單元素會(huì)維持自身狀態(tài)，并根據(jù)用戶輸入進(jìn)行更新匈勋。但在React中礼旅，可變的狀態(tài)通常保存在組件的狀態(tài)屬性中，并且只能用 setState() 方法進(jìn)行更新洽洁。
非受控組件
非受控組件痘系，即組件的狀態(tài)不受React控制的組件，例如下邊這個(gè)
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class Demo1 extends Component {
? ? render() {
? ? ? ? return (
? ? ? ? ? ? <input />
? ? ? ? )
? ? }
}
ReactDOM.render(<Demo1/>, document.getElementById('content'))
在這個(gè)最簡單的輸入框組件里,我們并沒有干涉input中的value展示,即用戶輸入的內(nèi)容都會(huì)展示在上面饿自。如果我們通過props給組件設(shè)置一個(gè)初始默認(rèn)值,defaultValue屬性是React內(nèi)部實(shí)現(xiàn)的一個(gè)屬性,目的類似于input的placeholder屬性汰翠。
受控組件
同樣的，受控組件就是組件的狀態(tài)受React控制昭雌。上面提到過复唤，既然通過設(shè)置input的value屬性, 無法改變輸入框值,那么我們把它和state結(jié)合在一起,再綁定onChange事件,實(shí)時(shí)更新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)}/>
? ? ? ? )
? ? }
}
:link:?資料來源：?github.com/Pau1fitz
:link:?參考資料：?https://www.php.cn/js-tutoria...
Q10?：以下使用React.createElement的等價(jià)項(xiàng)是什么烛卧？
難度：:star::star::star:
問題：
const element = (
? <h1 className="greeting">
? ? Hello, world!
? </h1>
);
以下等同于什么使用?React.createElement?苟穆？
答：
const element = React.createElement(
? 'h1',
? {className: 'greeting'},
? 'Hello, world!'
);
:link:?資料來源：?github.com/Pau1fitz
Q11?：什么是JSX？
難度：:star::star::star:
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 (
? ? ? <div className="my-component">
? ? ? <a href={props.url}>{props.name}</a>
? ? ? </div>
? ? );
? }
}
優(yōu)點(diǎn)：
1.允許使用熟悉的語法來定義 HTML 元素樹；
2.提供更加語義化且移動(dòng)的標(biāo)簽僵蛛；
3.程序結(jié)構(gòu)更容易被直觀化尚蝌；
4.抽象了 React Element 的創(chuàng)建過程；
5.可以隨時(shí)掌控 HTML 標(biāo)簽以及生成這些標(biāo)簽的代碼充尉；
6.是原生的 JavaScript飘言。
:link:?資料來源：?codementor.io
:link:?參考資料：?http://facebook.github.io/jsx/
Q12?：為什么不直接更新state狀態(tài)？
難度：:star::star::star:
如果進(jìn)行如下方式更新狀態(tài)驼侠，那么它將不會(huì)重新渲染組件姿鸿。
//Wrong
? ? This.state.message =”Hello world”;
而是使用?setState()?方法。它計(jì)劃對(duì)組件狀態(tài)對(duì)象的更新倒源。狀態(tài)改變時(shí)苛预，組件通過重新渲染做出響應(yīng)
//Correct
This.setState({message: ‘Hello World’});
注意：可以分配狀態(tài)的唯一位置是構(gòu)造函數(shù)。
:link:?資料來源：?https?:?//github.com/sudheerj
Q13?：ReactJS生命周期有哪些不同階段笋熬？
難度：:star::star::star:
React組件的生命周期分為四個(gè)不同階段：
初始化：?在此階段热某，react組件準(zhǔn)備設(shè)置初始狀態(tài)和默認(rèn)道具。
掛載：?react組件已準(zhǔn)備好掛載在瀏覽器DOM中。此階段涵蓋?componentWillMount?和componentDidMount?生命周期方法昔馋。
更新：?在此階段筹吐，組件以兩種方式進(jìn)行更新，即發(fā)送新道具和更新狀態(tài)绒极。此階段涵蓋了 shouldComponentUpdate骏令，componentWillUpdate和componentDidUpdate 生命周期方法。
卸載：?在最后一個(gè)階段垄提，不需要該組件榔袋，并且可以從瀏覽器DOM上卸載該組件。此階段包括componentWillUnmount?生命周期方法铡俐。
:link:?資料來源：?github.com/sudheerj
Q14?：ReactJS的生命周期方法是什么凰兑？
難度：:star::star::star:
componentWillMount：?在渲染之前執(zhí)行，用于根組件中的應(yīng)用程序級(jí)別配置审丘。
componentDidMount：?僅在客戶端的第一次渲染之后執(zhí)行吏够。 這是AJAX請(qǐng)求和DOM或狀態(tài)更新應(yīng)該發(fā)生的地方。此方法也用于與其他JavaScript框架以及任何延遲執(zhí)行的函數(shù)(如setTimeout?或?setInterval?)進(jìn)行集成滩报，在這里使用它來更新狀態(tài)锅知，以便我們可以觸發(fā)其他生命周期方法。
componentWillReceiveProps：?只要在另一個(gè)渲染被調(diào)用之前更新?props?就被調(diào)用脓钾。 當(dāng)我們更新狀態(tài)時(shí)售睹，從?setNewNumber?觸發(fā)它。
shouldComponentUpdate：?確定是否將更新組件可训。默認(rèn)情況下昌妹，它返回true。如果您確定組件在狀態(tài)或道具更新后不需要渲染握截，則可以返回false值飞崖。這是提高性能的好地方，因?yàn)槿绻M件收到新的道具谨胞，它可以防止重新渲染固歪。
componentWillUpdate：?在由shouldComponentUpdate確認(rèn)返回正值的優(yōu)點(diǎn)和狀態(tài)更改時(shí)，在重新渲染組件之前執(zhí)行畜眨。
componentDidUpdate：?通常用于更新DOM以響應(yīng)屬性或狀態(tài)更改昼牛。
componentWillUnmount：?它將用于取消任何傳出的網(wǎng)絡(luò)請(qǐng)求，或刪除與該組件關(guān)聯(lián)的所有事件偵聽器康聂。
:link:?資料來源：?github.com/sudheerj?https://www.fullstack.cafe/Re...
Q15?：React中的這三個(gè)點(diǎn)（...）是做什么的贰健？
難度：:star::star::star:
...在此React（使用JSX）代碼中做什么？它叫什么恬汁？
<Modal {...this.props} title='Modal heading' animation={false}>
擴(kuò)展傳值符號(hào)伶椿。它是在ES2018中添加的（數(shù)組/可迭代對(duì)象的傳播較早辜伟，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}>
擴(kuò)展符號(hào)不僅適用于該用例，而且對(duì)于創(chuàng)建具有現(xiàn)有對(duì)象的大多數(shù)（或全部）屬性的新對(duì)象非常方便-在更新狀態(tài)時(shí)會(huì)遇到很多問題偎痛，因?yàn)槟鸁o法修改狀態(tài)直：
this.setState(prevState => {
? ? return {foo: {...prevState.foo, a: "updated"}};
});
:link:?資料來源：?stackoverflow.com
Q16?：使用React Hooks有什么優(yōu)勢旱捧？
難度：:star::star::star:
hooks 是react 16.8 引入的特性，他允許你在不寫class的情況下操作state 和react的其他特性踩麦。
hooks 只是多了一種寫組件的方法枚赡，使編寫一個(gè)組件更簡單更方便，同時(shí)可以自定義hook把公共的邏輯提取出來谓谦，讓邏輯在多個(gè)組件之間共享贫橙。
Hook 是什么
Hook 是什么？ Hook 是一個(gè)特殊的函數(shù)反粥，它可以讓你“鉤入” React 的特性卢肃。例如，useState 是允許你在 React 函數(shù)組件中添加 state 的 Hook才顿。稍后我們將學(xué)習(xí)其他 Hook莫湘。
什么時(shí)候我會(huì)用 Hook？ 如果你在編寫函數(shù)組件并意識(shí)到需要向其添加一些 state郑气，以前的做法是必須將其它轉(zhuǎn)化為 class⊙犯現(xiàn)在你可以在現(xiàn)有的函數(shù)組件中使用 Hook。
ReactHooks的優(yōu)點(diǎn)
無需復(fù)雜的DOM結(jié)構(gòu)
簡潔易懂
:link:?資料來源：?hackernoon.com
Q17?：React中的useState竣贪？
難度：:star::star::star:
案例：
import { useState } from 'react';
function Example() {
? const [count, setCount] = useState(0);
? return (
? ? <div>
? ? ? <p>You clicked {count} times</p>
? ? ? <button onClick={() => setCount(count + 1)}>
? ? ? ? Click me
? ? ? </button>
? ? </div>
? )
}
語法:
function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];
其中 state 是他的值, setState 是用來設(shè)置值的函數(shù), initialState 是初始值
useState-initialState
該初始值可以接受任何參數(shù),但是記得當(dāng)他接受為一個(gè)函數(shù)時(shí),就變成了?Lazy initialization?(延遲初始化)
該函數(shù)返回值即為initialState
const [count, setCount] = useState(0);
const [count, setCount] = useState(()=>0);
// 這兩種初始化方式 是相等的,但是在函數(shù)為初始值時(shí)會(huì)被執(zhí)行一次
const [count, setCount] = useState(()=>{
? ? console.log('這里只會(huì)在初始化的時(shí)候執(zhí)行')
? ? // class 中的 constructor 的操作都可以移植到這里
? ? return 0
});
// 當(dāng)?shù)谝淮螆?zhí)行完畢后 就和另一句的代碼是相同的效果了
useState-setState
也許很多人 在使用 class 的 setState 時(shí)候,會(huì)經(jīng)常使用他的回調(diào)函數(shù),
但是這里很遺憾,他只接受新的值,如果想要對(duì)應(yīng)的回調(diào),可以使用useEffect,這個(gè)問題等會(huì)會(huì)提供一個(gè)跳轉(zhuǎn)鏈接
Q18?：React中的StrictMode是什么？
難度：:star::star::star:
React的StrictMode是一種幫助程序組件巩螃，可以幫助您編寫更好的react組件演怎，您可以使用包裝一些組件，?<StrictMode />?并且基本上可以：
驗(yàn)證內(nèi)部組件是否遵循某些推薦做法避乏，如果不在控制臺(tái)中爷耀，則會(huì)發(fā)出警告。
驗(yàn)證不贊成使用的方法拍皮，如果使用了嚴(yán)格模式歹叮，則會(huì)在控制臺(tái)中警告您。
通過識(shí)別潛在風(fēng)險(xiǎn)來幫助您預(yù)防某些副作用铆帽。
:link:?參考資料：?http://react.html.cn/docs/str...
Q19?：為什么類方法需要綁定咆耿？
難度：:star::star::star:
在JavaScript中，?this?的值取決于當(dāng)前上下文爹橱。在React類的組件方法中萨螺，開發(fā)人員通常希望它引用組件的當(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>
? ? )
? }
}
:link:?資料來源：?toptal.com
Q20?：描述Flux與MVC？
難度：:star::star::star::star:
傳統(tǒng)的MVC模式在分離數(shù)據(jù)（模型）吻商，UI（視圖）和邏輯（控制器）的關(guān)注方面效果很好掏颊，但是MVC架構(gòu)經(jīng)常遇到兩個(gè)主要問題：
數(shù)據(jù)流定義不佳：?跨視圖進(jìn)行的級(jí)聯(lián)更新通常會(huì)導(dǎo)致糾結(jié)的事件網(wǎng)，難以調(diào)試艾帐。
缺乏數(shù)據(jù)完整性：?可以從任何地方對(duì)模型數(shù)據(jù)進(jìn)行突變乌叶，從而在整個(gè)UI上產(chǎn)生不可預(yù)測的結(jié)果。
使用Flux模式掩蛤，復(fù)雜的UI不再受到級(jí)聯(lián)更新的困擾枉昏。任何給定的React組件都將能夠根據(jù)商店提供的數(shù)據(jù)重建其狀態(tài)。Flux模式還通過限制對(duì)共享數(shù)據(jù)的直接訪問來增強(qiáng)數(shù)據(jù)完整性揍鸟。
:link:?資料來源：?codementor.io?https://www.fullstack.cafe/Re...
Q21?：React context是什么兄裂？
難度：:star::star::star::star:
React文檔官網(wǎng)并未對(duì)?Context?給出“是什么”的定義，更多是描述使用的?Context?的場景阳藻，以及如何使用?Context?晰奖。
官網(wǎng)對(duì)于使用?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ù)時(shí)腥泥，可以使用?Context?來實(shí)現(xiàn)?跨層級(jí)?的組件數(shù)據(jù)傳遞匾南。
