當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

react 动态添加组件属性_这么高质量React面试题（含答案），看到就是赚到了！...

發(fā)布時間：2025/4/17 编程问答 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 react 动态添加组件属性_这么高质量React面试题（含答案），看到就是赚到了！... 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

前言

本文篇幅較長，全是干貨，建議親們可以先收藏慢慢看哦

寫文不易，歡迎大家一起交流，喜歡文章記得關(guān)注我點個贊喲，感謝支持！

Q1 ：什么是虛擬DOM？

難度：:star:

虛擬DOM（VDOM）它是真實DOM的內(nèi)存表示,一種編程概念，一種模式。它會和真實的DOM同步，比如通過ReactDOM這種庫，這個同步的過程叫做調(diào)和(reconcilation)。

虛擬DOM更多是一種模式，不是一種特定的技術(shù)。

:link: 資料來源： github.com/sudheerj

:link: 參考資料：什么是虛擬DOM

Q2 ：類組件和函數(shù)組件之間有什么區(qū)別？

難度：:star::star:

類組件（ Class components ）
- 無論是使用函數(shù)或是類來聲明一個組件，它決不能修改它自己的 props 。
  - 所有 React 組件都必須是純函數(shù)，并禁止修改其自身 props 。

- React是單項數(shù)據(jù)流，父組件改變了屬性，那么子組件視圖會更新。
  - 屬性 props 是外界傳遞過來的，狀態(tài) state 是組件本身的，狀態(tài)可以在組件中任意修改
  - 組件的屬性和狀態(tài)改變都會更新視圖。

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ù)組件接收一個單一的 props 對象并返回了一個React元素

function Welcome (props) { return <h1>Welcome {props.name}</h1> } ReactDOM.render(<Welcome name='react' />, document.getElementById('root'));

區(qū)別

函數(shù)組件和類組件當然是有區(qū)別的，而且函數(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 元素或者某個組件實例的句柄。

我們可以為元素添加 ref 屬性然后在回調(diào)函數(shù)中接受該元素在 DOM 樹中的句柄，該值會作為回調(diào)函數(shù)的第一個參數(shù)返回：

class UnControlledForm extends Component {handleSubmit = () => {console.log("Input Value: ", this.input.value)}render () {return (<form onSubmit={this.handleSubmit}><inputtype='text'ref={(input) => this.input = input} /><button type='submit'>Submit</button></form>)} }

上述代碼中的 input 域包含了一個 ref 屬性，該屬性聲明的回調(diào)函數(shù)會接收 input 對應(yīng)的 DOM 元素，我們將其綁定到 this 指針以便在其他的類函數(shù)中使用。

另外值得一提的是，refs 并不是類組件的專屬，函數(shù)式組件同樣能夠利用閉包暫存其值：

function CustomForm ({handleSubmit}) {let inputElementreturn (<form onSubmit={() => handleSubmit(inputElement.value)}><inputtype='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實例，該實例是React跨瀏覽器本機事件的跨瀏覽器包裝器。這些綜合事件具有與您慣用的本機事件相同的界面，除了它們在所有瀏覽器中的工作方式相同。

有點有趣的是，React實際上并未將事件附加到子節(jié)點本身。React將使用單個事件偵聽器在頂層偵聽所有事件。這對性能有好處，也意味著React在更新DOM時無需擔心跟蹤事件監(jiān)聽器。

:link: 資料來源： tylermcginnis.com

:link: 參考資料： https://www.cnblogs.com/xiang...

Q5 ：state 和 props有什么區(qū)別？

難度：:star::star:

state 和 props都是普通的JavaScript對象。盡管它們兩者都具有影響渲染輸出的信息，但它們在組件方面的功能不同。即

props 是一個從外部傳進組件的參數(shù)，主要作為就是從父組件向子組件傳遞數(shù)據(jù)，它具有可讀性和不變性，只能通過外部組件主動傳入新的 props 來重新渲染子組件，否則子組件的 props 以及展現(xiàn)形式不會改變。
state 的主要作用是用于組件保存、控制以及修改自己的狀態(tài)，它只能在 constructor 中初始化，它算是組件的私有屬性，不可通過外部訪問和修改，只能通過組件內(nèi)部的 this.setState 來修改，修改 state 屬性會導致組件的重新渲染。

:link: 資料來源： https : //github.com/sudheerj

:link: 參考資料： https://stackoverflow.com/que...

Q6 ：如何創(chuàng)建refs？

難度：:star::star:

Refs 是使用 React.createRef() 方法創(chuàng)建的，并通過 ref 屬性添加到 React 元素上。為了在整個組件中使用 refs ，只需將 ref 分配給構(gòu)造函數(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}><inputtype='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:

高階組件就是一個函數(shù)，且該函數(shù)接受一個組件作為參數(shù)，并返回一個新的組件。基本上，這是從React的組成性質(zhì)派生的一種模式，我們稱它們?yōu)?“純”組件，因為它們可以接受任何動態(tài)提供的子組件，但它們不會修改或復制其輸入組件的任何行為。

const EnhancedComponent = higherOrderComponent(WrappedComponent);

高階組件（HOC）是 React 中用于復用組件邏輯的一種高級技巧
高階組件的參數(shù)為一個組件返回一個新的組件
組件是將 props 轉(zhuǎn)換為 UI，而高階組件是將組件轉(zhuǎn)換為另一個組件

: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 availableconsole.log(props); // Prints { name: 'sudheer',age: 30 }}render() {// No difference outside constructorconsole.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當中，像 <input> , <textarea> , 和 <select> 這類表單元素會維持自身狀態(tài)，并根據(jù)用戶輸入進行更新。但在React中，可變的狀態(tài)通常保存在組件的狀態(tài)屬性中，并且只能用 setState() 方法進行更新。

非受控組件

非受控組件，即組件的狀態(tài)不受React控制的組件，例如下邊這個

import React, { Component } from 'react'; import ReactDOM from 'react-dom';class Demo1 extends Component {render() {return (<input />)} }ReactDOM.render(<Demo1/>, document.getElementById('content'))

在這個最簡單的輸入框組件里,我們并沒有干涉input中的value展示,即用戶輸入的內(nèi)容都會展示在上面。如果我們通過props給組件設(shè)置一個初始默認值,defaultValue屬性是React內(nèi)部實現(xiàn)的一個屬性,目的類似于input的placeholder屬性。

受控組件

同樣的，受控組件就是組件的狀態(tài)受React控制。上面提到過，既然通過設(shè)置input的value屬性, 無法改變輸入框值,那么我們把它和state結(jié)合在一起,再綁定onChange事件,實時更新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的等價項是什么？

難度：: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)建標簽的類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)點：

1.允許使用熟悉的語法來定義 HTML 元素樹；

2.提供更加語義化且移動的標簽；

3.程序結(jié)構(gòu)更容易被直觀化；

4.抽象了 React Element 的創(chuàng)建過程；

5.可以隨時掌控 HTML 標簽以及生成這些標簽的代碼；

6.是原生的 JavaScript。

:link: 資料來源： codementor.io

:link: 參考資料： http://facebook.github.io/jsx/

Q12 ：為什么不直接更新state狀態(tài)？

難度：:star::star::star:

如果進行如下方式更新狀態(tài)，那么它將不會重新渲染組件。

//WrongThis.state.message =”Hello world”;

而是使用 setState() 方法。它計劃對組件狀態(tài)對象的更新。狀態(tài)改變時，組件通過重新渲染做出響應(yīng)

//CorrectThis.setState({message: ‘Hello World’});

注意：可以分配狀態(tài)的唯一位置是構(gòu)造函數(shù)。

:link: 資料來源： https : //github.com/sudheerj

Q13 ：ReactJS生命周期有哪些不同階段？

難度：:star::star::star:

React組件的生命周期分為四個不同階段：

初始化：在此階段，react組件準備設(shè)置初始狀態(tài)和默認道具。

掛載： react組件已準備好掛載在瀏覽器DOM中。此階段涵蓋 componentWillMount 和 componentDidMount 生命周期方法。

更新：在此階段，組件以兩種方式進行更新，即發(fā)送新道具和更新狀態(tài)。此階段涵蓋了 shouldComponentUpdate，componentWillUpdate和componentDidUpdate 生命周期方法。

卸載：在最后一個階段，不需要該組件，并且可以從瀏覽器DOM上卸載該組件。此階段包括 componentWillUnmount 生命周期方法。

:link: 資料來源： github.com/sudheerj

Q14 ：ReactJS的生命周期方法是什么？

難度：:star::star::star:

componentWillMount：在渲染之前執(zhí)行，用于根組件中的應(yīng)用程序級別配置。
componentDidMount：僅在客戶端的第一次渲染之后執(zhí)行。這是AJAX請求和DOM或狀態(tài)更新應(yīng)該發(fā)生的地方。此方法也用于與其他JavaScript框架以及任何延遲執(zhí)行的函數(shù)(如 setTimeout 或 setInterval )進行集成，在這里使用它來更新狀態(tài)，以便我們可以觸發(fā)其他生命周期方法。
componentWillReceiveProps：只要在另一個渲染被調(diào)用之前更新 props 就被調(diào)用。當我們更新狀態(tài)時，從 setNewNumber 觸發(fā)它。
shouldComponentUpdate：確定是否將更新組件。默認情況下，它返回true。如果您確定組件在狀態(tài)或道具更新后不需要渲染，則可以返回false值。這是提高性能的好地方，因為如果組件收到新的道具，它可以防止重新渲染。
componentWillUpdate：在由shouldComponentUpdate確認返回正值的優(yōu)點和狀態(tài)更改時，在重新渲染組件之前執(zhí)行。
componentDidUpdate：通常用于更新DOM以響應(yīng)屬性或狀態(tài)更改。
componentWillUnmount：它將用于取消任何傳出的網(wǎng)絡(luò)請求，或刪除與該組件關(guān)聯(lián)的所有事件偵聽器。

:link: 資料來源： github.com/sudheerj https://www.fullstack.cafe/Re...

Q15 ：React中的這三個點（...）是做什么的？

難度：:star::star::star:

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

擴展傳值符號。它是在ES2018中添加的（數(shù)組/可迭代對象的傳播較早，ES2015）。

例如，如果this.props包含a：1和b：2，則

與以下內(nèi)容相同：

擴展符號不僅適用于該用例，而且對于創(chuàng)建具有現(xiàn)有對象的大多數(shù)（或全部）屬性的新對象非常方便-在更新狀態(tài)時會遇到很多問題，因為您無法修改狀態(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 只是多了一種寫組件的方法，使編寫一個組件更簡單更方便，同時可以自定義hook把公共的邏輯提取出來，讓邏輯在多個組件之間共享。

Hook 是什么

Hook 是什么？ Hook 是一個特殊的函數(shù)，它可以讓你“鉤入” React 的特性。例如，useState 是允許你在 React 函數(shù)組件中添加 state 的 Hook。稍后我們將學習其他 Hook。

什么時候我會用 Hook？如果你在編寫函數(shù)組件并意識到需要向其添加一些 state，以前的做法是必須將其它轉(zhuǎn)化為 class。現(xiàn)在你可以在現(xiàn)有的函數(shù)組件中使用 Hook。

ReactHooks的優(yōu)點

無需復雜的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ù),但是記得當他接受為一個函數(shù)時,就變成了 Lazy initialization (延遲初始化)

該函數(shù)返回值即為initialState

const [count, setCount] = useState(0);const [count, setCount] = useState(()=>0); // 這兩種初始化方式是相等的,但是在函數(shù)為初始值時會被執(zhí)行一次const [count, setCount] = useState(()=>{console.log('這里只會在初始化的時候執(zhí)行')// class 中的 constructor 的操作都可以移植到這里return 0 }); // 當?shù)谝淮螆?zhí)行完畢后就和另一句的代碼是相同的效果了

useState-setState

也許很多人在使用 class 的 setState 時候,會經(jīng)常使用他的回調(diào)函數(shù),

但是這里很遺憾,他只接受新的值,如果想要對應(yīng)的回調(diào),可以使用useEffect,這個問題等會會提供一個跳轉(zhuǎn)鏈接

Q18 ：React中的StrictMode是什么？

難度：:star::star::star:

React的StrictMode是一種幫助程序組件，可以幫助您編寫更好的react組件，您可以使用包裝一些組件， <StrictMode /> 并且基本上可以：

驗證內(nèi)部組件是否遵循某些推薦做法，如果不在控制臺中，則會發(fā)出警告。
驗證不贊成使用的方法，如果使用了嚴格模式，則會在控制臺中警告您。
通過識別潛在風險來幫助您預防某些副作用。

:link: 參考資料： http://react.html.cn/docs/str...

Q19 ：為什么類方法需要綁定？

難度：:star::star::star:

在JavaScript中， this 的值取決于當前上下文。在React類的組件方法中，開發(fā)人員通常希望它引用組件的當前實例，因此有必要將這些方法綁定到該實例。通常，這是在構(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)常遇到兩個主要問題：

數(shù)據(jù)流定義不佳：跨視圖進行的級聯(lián)更新通常會導致糾結(jié)的事件網(wǎng)，難以調(diào)試。
缺乏數(shù)據(jù)完整性：可以從任何地方對模型數(shù)據(jù)進行突變，從而在整個UI上產(chǎn)生不可預測的結(jié)果。

使用Flux模式，復雜的UI不再受到級聯(lián)更新的困擾。任何給定的React組件都將能夠根據(jù)商店提供的數(shù)據(jù)重建其狀態(tài)。Flux模式還通過限制對共享數(shù)據(jù)的直接訪問來增強數(shù)據(jù)完整性。

:link: 資料來源： codementor.io https://www.fullstack.cafe/Re...

Q21 ：React context是什么？

難度：:star::star::star::star:

React文檔官網(wǎng)并未對 Context 給出“是什么”的定義，更多是描述使用的 Context 的場景，以及如何使用 Context 。

官網(wǎng)對于使用 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.

簡單說就是，當你不想在組件樹中通過逐層傳遞 props 或者 state 的方式來傳遞數(shù)據(jù)時，可以使用 Context 來實現(xiàn) 跨層級的組件數(shù)據(jù)傳遞。

使用props或者state傳遞數(shù)據(jù)，數(shù)據(jù)自頂下流。

使用 Context ，可以跨越組件進行數(shù)據(jù)傳遞。

:link: 資料來源： github.com/WebPredict

Q22 ：React Fiber是什么？

難度：:star::star::star::star:

React Fiber 并不是所謂的纖程（微線程、協(xié)程），而是一種基于瀏覽器的單線程調(diào)度算法，背后的支持 API 是大名鼎鼎的：requestIdleCallback。

Fiberl是一種將 recocilation （遞歸 diff），拆分成無數(shù)個小任務(wù)的算法；它隨時能夠停止，恢復。停止恢復的時機取決于當前的一幀（16ms）內(nèi)，還有沒有足夠的時間允許計算。

總結(jié)

以上是生活随笔為你收集整理的react 动态添加组件属性_这么高质量React面试题（含答案），看到就是赚到了！...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： 10 vm 添加串口_STM32的串口通
下一篇： python如何读dat数据_如何用Py