天天操狠狠干,欧美穴,91国产对白刺激,五月天精品,99久久久免费视频,日韩一级片视频,女女调教视频,美女啪啪网站

關(guān)注入坑互聯(lián)網(wǎng) ，回復(fù)“加群”

加入我們一起學(xué)習(xí)，天天進(jìn)步

1.什么是虛擬DOM？

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

2.React有什么特點(diǎn)？

①它使用虛擬DOM而不是真正的DOM。

②它可以用服務(wù)器端渲染。

③它遵循單向數(shù)據(jù)流或數(shù)據(jù)綁定。

3.React主要優(yōu)點(diǎn)

①它提高了應(yīng)用的性能

②可以方便地在客戶(hù)端和服務(wù)器端使用

③由于 JSX，代碼的可讀性很好

④React 很容易與 Meteor，Angular 等其他框架集成

⑤使用React，編寫(xiě)UI測(cè)試用例變得非常容易

4.React有哪些限制？

①React 只是一個(gè)庫(kù)，而不是一個(gè)完整的框架

②它的庫(kù)非常龐大，需要時(shí)間來(lái)理解

③新手程序員可能很難理解

④編碼變得復(fù)雜，因?yàn)樗褂脙?nèi)聯(lián)模板和 JSX

5.什么是JSX？

JSX 是J avaScript XML 的簡(jiǎn)寫(xiě)。是 React 使用的一種文件，它利用 JavaScript 的表現(xiàn)力和類(lèi)似 HTML 的模板語(yǔ)法。這使得 HTML 文件非常容易理解。此文件能使應(yīng)用非?？煽?，并能夠提高其性能。下面是JSX的一個(gè)例子：

render(){    return(                <div>            <h1> Hello World from Edureka!!</h1>        </div>    );}

6.虛擬DOM（Virtual DOM）實(shí)現(xiàn)原理?

Virtual DOM 是一個(gè)輕量級(jí)的 JavaScript 對(duì)象，它最初只是 real DOM 的副本。它是一個(gè)節(jié)點(diǎn)樹(shù)，它將元素、它們的屬性和內(nèi)容作為對(duì)象及其屬性。React 的渲染函數(shù)從 React 組件中創(chuàng)建一個(gè)節(jié)點(diǎn)樹(shù)。然后它響應(yīng)數(shù)據(jù)模型中的變化來(lái)更新該樹(shù)，該變化是由用戶(hù)或系統(tǒng)完成的各種動(dòng)作引起的。

Virtual DOM 工作過(guò)程有三個(gè)簡(jiǎn)單的步驟：

①每當(dāng)?shù)讓訑?shù)據(jù)發(fā)生改變時(shí)，整個(gè) UI 都將在 Virtual DOM 描述中重新渲染。

②然后計(jì)算之前 DOM 表示與新表示的之間的差異。

③完成計(jì)算后，將只用實(shí)際更改的內(nèi)容更新 real DOM。

7.如何使瀏覽器讀取JSX

瀏覽器只能處理 JavaScript 對(duì)象，而不能讀取常規(guī) JavaScript 對(duì)象中的 JSX。所以為了使瀏覽器能夠讀取 JSX，首先，需要用像 Babel 這樣的 JSX 轉(zhuǎn)換器將 JSX 文件轉(zhuǎn)換為 JavaScript 對(duì)象，然后再將其傳給瀏覽器。

8.React生命周期是怎樣的?

目前React 16.8 +的生命周期分為三個(gè)階段,分別是掛載階段、更新階段、卸載階段

①、掛載階段:

constructor: 構(gòu)造函數(shù)，最先被執(zhí)行,我們通常在構(gòu)造函數(shù)里初始化state對(duì)象或者給自定義方法綁定this

getDerivedStateFromProps: static getDerivedStateFromProps(nextProps, prevState),這是個(gè)靜態(tài)方法,當(dāng)我們接收到新的屬性想去修改我們state，可以使用getDerivedStateFromProps

render: render函數(shù)是純函數(shù)，只返回需要渲染的東西，不應(yīng)該包含其它的業(yè)務(wù)邏輯,可以返回原生的DOM、React組件、Fragment、Portals、字符串和數(shù)字、Boolean和null等內(nèi)容

componentDidMount: 組件裝載之后調(diào)用，此時(shí)我們可以獲取到DOM節(jié)點(diǎn)并操作，比如對(duì)canvas，svg的操作，服務(wù)器請(qǐng)求，訂閱都可以寫(xiě)在這個(gè)里面，但是記得在componentWillUnmount中取消訂閱

②、更新階段:

getDerivedStateFromProps: 此方法在更新個(gè)掛載階段都可能會(huì)調(diào)用

shouldComponentUpdate: shouldComponentUpdate(nextProps, nextState),有兩個(gè)參數(shù)nextProps和nextState，表示新的屬性和變化之后的state，返回一個(gè)布爾值，true表示會(huì)觸發(fā)重新渲染，false表示不會(huì)觸發(fā)重新渲染，默認(rèn)返回true,我們通常利用此生命周期來(lái)優(yōu)化React程序性能

render: 更新階段也會(huì)觸發(fā)此生命周期

getSnapshotBeforeUpdate: getSnapshotBeforeUpdate(prevProps, prevState),這個(gè)方法在render之后，componentDidUpdate之前調(diào)用，有兩個(gè)參數(shù)prevProps和prevState，表示之前的屬性和之前的state，這個(gè)函數(shù)有一個(gè)返回值，會(huì)作為第三個(gè)參數(shù)傳給componentDidUpdate，如果你不想要返回值，可以返回null，此生命周期必須與componentDidUpdate搭配使用

componentDidUpdate: componentDidUpdate(prevProps, prevState, snapshot),該方法在getSnapshotBeforeUpdate方法之后被調(diào)用，有三個(gè)參數(shù)prevProps，prevState，snapshot，表示之前的props，之前的state，和snapshot。第三個(gè)參數(shù)是getSnapshotBeforeUpdate返回的,如果觸發(fā)某些回調(diào)函數(shù)時(shí)需要用到 DOM 元素的狀態(tài)，則將對(duì)比或計(jì)算的過(guò)程遷移至 getSnapshotBeforeUpdate，然后在 componentDidUpdate 中統(tǒng)一觸發(fā)回調(diào)或更新?tīng)顟B(tài)。

③、卸載階段:

componentWillUnmount: 當(dāng)我們的組件被卸載或者銷(xiāo)毀了就會(huì)調(diào)用，我們可以在這個(gè)函數(shù)里去清除一些定時(shí)器，取消網(wǎng)絡(luò)請(qǐng)求，清理無(wú)效的DOM元素等垃圾清理工作

9.React的請(qǐng)求應(yīng)該放在哪個(gè)生命周期中?

由于JavaScript中異步事件的性質(zhì)，當(dāng)您啟動(dòng)API調(diào)用時(shí)，瀏覽器會(huì)在此期間返回執(zhí)行其他工作。當(dāng)React渲染一個(gè)組件時(shí)，它不會(huì)等待componentWillMount它完成任何事情 - React繼續(xù)前進(jìn)并繼續(xù)render,沒(méi)有辦法“暫停”渲染以等待數(shù)據(jù)到達(dá)。

而且在componentWillMount請(qǐng)求會(huì)有一系列潛在的問(wèn)題,首先,在服務(wù)器渲染時(shí),如果在 componentWillMount 里獲取數(shù)據(jù)，fetch data會(huì)執(zhí)行兩次，一次在服務(wù)端一次在客戶(hù)端，這造成了多余的請(qǐng)求,其次,在React 16進(jìn)行React Fiber重寫(xiě)后,componentWillMount可能在一次渲染中多次調(diào)用.

目前官方推薦的異步請(qǐng)求是在componentDidmount中進(jìn)行.

10.解釋 React 中 render() 的目的。

每個(gè)React組件強(qiáng)制要求必須有一個(gè) render()。它返回一個(gè) React 元素，是原生 DOM 組件的表示。如果需要渲染多個(gè) HTML 元素，則必須將它們組合在一個(gè)封閉標(biāo)記內(nèi)，例如 <form>、<group>、<div>等。此函數(shù)必須保持純凈，即必須每次調(diào)用時(shí)都返回相同的結(jié)果。

11.在 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)器。

12.state 和 props 區(qū)別是啥？

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)組件。

13.在構(gòu)造函數(shù)調(diào)用 super 并將 props 作為參數(shù)傳入的作用是啥？

在調(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ù)之外也是一樣的。

14.為什么不直接更新 state 呢 ?

如果試圖直接更新 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’});

15.React中的狀態(tài)是什么？它是如何使用的？

狀態(tài)是 React 組件的核心，是數(shù)據(jù)的來(lái)源，必須盡可能簡(jiǎn)單?；旧蠣顟B(tài)是確定組件呈現(xiàn)和行為的對(duì)象。與props 不同，它們是可變的，并創(chuàng)建動(dòng)態(tài)和交互式組件?？梢酝ㄟ^(guò) this.state() 訪問(wèn)它們。

16.如何更新組件的狀態(tài)？

可以用 this.setState()更新組件的狀態(tài)。

class MyComponent extends React.Component {    constructor() {        super();        this.state = {            name: 'Maxx',            id: '101'        }    }    render()        {            setTimeout(()=>{this.setState({name:'Jaeha', id:'222'})},2000)            return (              				<div>                	<h1>Hello {this.state.name}</h1>					<h2>Your Id is {this.state.id}</h2>                </div>            );        }    }ReactDOM.render(    <MyComponent/>, document.getElementById('content'));

17.什么是高階組件（HOC）？能用HOC做什么？

高階組件是重用組件邏輯的高級(jí)方法，是一種源于 React 的組件模式。HOC 是自定義組件，在它之內(nèi)包含另一個(gè)組件。它們可以接受子組件提供的任何動(dòng)態(tài)，但不會(huì)修改或復(fù)制其輸入組件中的任何行為。你可以認(rèn)為 HOC 是“純（Pure）”組件。

HOC可用于許多任務(wù)，例如：

代碼重用，邏輯和引導(dǎo)抽象

渲染劫持

狀態(tài)抽象和控制

Props 控制

18.React 中 key 的重要性是什么？

key 用于識(shí)別唯一的 Virtual DOM 元素及其驅(qū)動(dòng) UI 的相應(yīng)數(shù)據(jù)。它們通過(guò)回收 DOM 中當(dāng)前所有的元素來(lái)幫助 React 優(yōu)化渲染。這些 key 必須是唯一的數(shù)字或字符串，React 只是重新排序元素而不是重新渲染它們。這可以提高應(yīng)用程序的性能

19.React組件間通信方式?

父組件向子組件通訊: 父組件可以向子組件通過(guò)傳 props 的方式，向子組件進(jìn)行通訊

子組件向父組件通訊: props+回調(diào)的方式,父組件向子組件傳遞props進(jìn)行通訊，此props為作用域?yàn)楦附M件自身的函數(shù)，子組件調(diào)用該函數(shù)，將子組件想要傳遞的信息，作為參數(shù)，傳遞到父組件的作用域中

兄弟組件通信: 找到這兩個(gè)兄弟節(jié)點(diǎn)共同的父節(jié)點(diǎn),結(jié)合上面兩種方式由父節(jié)點(diǎn)轉(zhuǎn)發(fā)信息進(jìn)行通信

跨層級(jí)通信: Context設(shè)計(jì)目的是為了共享那些對(duì)于一個(gè)組件樹(shù)而言是“全局”的數(shù)據(jù)，例如當(dāng)前認(rèn)證的用戶(hù)、主題或首選語(yǔ)言,對(duì)于跨越多層的全局?jǐn)?shù)據(jù)通過(guò)Context通信再適合不過(guò)

發(fā)布訂閱模式: 發(fā)布者發(fā)布事件，訂閱者監(jiān)聽(tīng)事件并做出反應(yīng),我們可以通過(guò)引入event模塊進(jìn)行通信

全局狀態(tài)管理工具: 借助Redux或者M(jìn)obx等全局狀態(tài)管理工具進(jìn)行通信,這種工具會(huì)維護(hù)一個(gè)全局狀態(tài)中心Store,并根據(jù)不同的事件產(chǎn)生新的狀態(tài)

20.介紹一下什么是Redux？

Redux 是當(dāng)今最熱門(mén)的前端開(kāi)發(fā)庫(kù)之一。它是 JavaScript 程序的可預(yù)測(cè)狀態(tài)容器，用于整個(gè)應(yīng)用的狀態(tài)管理。使用 Redux 開(kāi)發(fā)的應(yīng)用易于測(cè)試，可以在不同環(huán)境中運(yùn)行，并顯示一致的行為。

Redux主要結(jié)構(gòu):

Store：保存數(shù)據(jù)的地方，你可以把它看成一個(gè)容器，整個(gè)應(yīng)用只能有一個(gè)Store。

State：Store對(duì)象包含所有數(shù)據(jù)，如果想得到某個(gè)時(shí)點(diǎn)的數(shù)據(jù)，就要對(duì)Store生成快照，這種時(shí)點(diǎn)的數(shù)據(jù)集合，就叫做State。

Action：State的變化，會(huì)導(dǎo)致View的變化。但是，用戶(hù)接觸不到State，只能接觸到View。所以，State的變化必須是View導(dǎo)致的。Action就是View發(fā)出的通知，表示State應(yīng)該要發(fā)生變化了。

Action Creator：View要發(fā)送多少種消息，就會(huì)有多少種Action。如果都手寫(xiě)，會(huì)很麻煩，所以我們定義一個(gè)函數(shù)來(lái)生成Action，這個(gè)函數(shù)就叫Action Creator。

Reducer：Store收到Action以后，必須給出一個(gè)新的State，這樣View才會(huì)發(fā)生變化。這種State的計(jì)算過(guò)程就叫做Reducer。Reducer是一個(gè)函數(shù)，它接受Action和當(dāng)前State作為參數(shù)，返回一個(gè)新的State。

dispatch：是View發(fā)出Action的唯一方法。

21.Redux的工作流程

首先，用戶(hù)（通過(guò)View）發(fā)出Action，發(fā)出方式就用到了dispatch方法。

然后，Store自動(dòng)調(diào)用Reducer，并且傳入兩個(gè)參數(shù)：當(dāng)前State和收到的Action，Reducer會(huì)返回新的State

State一旦有變化，Store就會(huì)調(diào)用監(jiān)聽(tīng)函數(shù)，來(lái)更新View。

22.如何在 Redux 中定義 Action？

React 中的 Action 必須具有 type 屬性，該屬性指示正在執(zhí)行的 ACTION 的類(lèi)型。必須將它們定義為字符串常量，并且還可以向其添加更多的屬性。在 Redux 中，action 被名為 Action Creators 的函數(shù)所創(chuàng)建。以下是 Action 和Action Creator 的示例：

function addTodo(text) {       return {                type: ADD_TODO,                     text    }}

23.解釋 Reducer 的作用。

Reducers 是純函數(shù)，它規(guī)定應(yīng)用程序的狀態(tài)怎樣因響應(yīng) ACTION 而改變。Reducers 通過(guò)接受先前的狀態(tài)和 action 來(lái)工作，然后它返回一個(gè)新的狀態(tài)。它根據(jù)操作的類(lèi)型確定需要執(zhí)行哪種更新，然后返回新的值。如果不需要完成任務(wù)，它會(huì)返回原來(lái)的狀態(tài)。

24.Redux 有哪些優(yōu)點(diǎn)？

結(jié)果的可預(yù)測(cè)性 - 由于總是存在一個(gè)真實(shí)來(lái)源，即 store ，因此不存在如何將當(dāng)前狀態(tài)與動(dòng)作和應(yīng)用的其他部分同步的問(wèn)題。

可維護(hù)性 - 代碼變得更容易維護(hù)，具有可預(yù)測(cè)的結(jié)果和嚴(yán)格的結(jié)構(gòu)。

服務(wù)器端渲染 - 你只需將服務(wù)器上創(chuàng)建的 store 傳到客戶(hù)端即可。這對(duì)初始渲染非常有用，并且可以?xún)?yōu)化應(yīng)用性能，從而提供更好的用戶(hù)體驗(yàn)。

開(kāi)發(fā)人員工具 - 從操作到狀態(tài)更改，開(kāi)發(fā)人員可以實(shí)時(shí)跟蹤應(yīng)用中發(fā)生的所有事情。

社區(qū)和生態(tài)系統(tǒng) - Redux 背后有一個(gè)巨大的社區(qū)，這使得它更加迷人。一個(gè)由才華橫溢的人組成的大型社區(qū)為庫(kù)的改進(jìn)做出了貢獻(xiàn)，并開(kāi)發(fā)了各種應(yīng)用。

易于測(cè)試 - Redux 的代碼主要是小巧、純粹和獨(dú)立的功能。這使代碼可測(cè)試且獨(dú)立。

組織 - Redux 準(zhǔn)確地說(shuō)明了代碼的組織方式，這使得代碼在團(tuán)隊(duì)使用時(shí)更加一致和簡(jiǎn)單。

25.什么是React 路由？

React 路由是一個(gè)構(gòu)建在 React 之上的強(qiáng)大的路由庫(kù)，它有助于向應(yīng)用程序添加新的屏幕和流。這使 URL 與網(wǎng)頁(yè)上顯示的數(shù)據(jù)保持同步。它負(fù)責(zé)維護(hù)標(biāo)準(zhǔn)化的結(jié)構(gòu)和行為，并用于開(kāi)發(fā)單頁(yè) Web 應(yīng)用。React 路由有一個(gè)簡(jiǎn)單的API。

26.為什么需要 React 中的路由？

Router 用于定義多個(gè)路由，當(dāng)用戶(hù)定義特定的 URL 時(shí)，如果此 URL 與 Router 內(nèi)定義的任何 “路由” 的路徑匹配，則用戶(hù)將重定向到該特定路由。所以基本上我們需要在自己的應(yīng)用中添加一個(gè) Router 庫(kù)，允許創(chuàng)建多個(gè)路由，每個(gè)路由都會(huì)向我們提供一個(gè)獨(dú)特的視圖

<switch>    <route exact path=’/’ component={Home}/>    <route path=’/posts/:id’ component={Newpost}/>    <route path=’/posts’   component={Post}/></switch>

27.如何避免組件的重新渲染？

React 中最常見(jiàn)的問(wèn)題之一是組件不必要地重新渲染。React 提供了兩個(gè)方法，在這些情況下非常有用：

React.memo():這可以防止不必要地重新渲染函數(shù)組件

PureComponent:這可以防止不必要地重新渲染類(lèi)組件

這兩種方法都依賴(lài)于對(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)性能。

28.react性能優(yōu)化方案

（1）重寫(xiě)shouldComponentUpdate來(lái)避免不必要的dom操作。

（2）使用 production 版本的react.js。

（3）使用key來(lái)幫助React識(shí)別列表中所有子組件的最小變化。