react

1、什么是虛擬DOM？

難度: ?

虛擬 DOM (VDOM)是真實 DOM 在內存中的表示。UI 的表示形式保存在內存中，并與實際的 DOM 同步。這是一個發生在渲染函數被調用和元素在屏幕上顯示之間的步驟，整個過程被稱為調和。

2、類組件和函數組件之間的區別是啥？

難度: ??

• 類組件可以使用其他特性，如狀態 state 和生命周期鉤子。
• 當組件只是接收 props 渲染到頁面時，就是無狀態組件，就屬于函數組件，也被稱為啞組件或展示組件。

函數組件和類組件當然是有區別的，而且函數組件的性能比類組件的性能要高，因為類組件使用的時候要實例化，而函數組件直接執行函數取返回結果即可。為了提高性能，盡量使用函數組件。

區別函數組件類組件是否有 this沒有有是否有生命周期沒有有是否有狀態 state沒有有

3、React 中 refs 干嘛用的？

難度: ??

Refs 提供了一種訪問在render方法中創建的 DOM 節點或者 React 元素的方法。在典型的數據流中，props 是父子組件交互的唯一方式，想要修改子組件，需要使用新的pros重新渲染它。凡事有例外，某些情況下咱們需要在典型數據流外，強制修改子代，這個時候可以使用 Refs。

咱們可以在組件添加一個 ref 屬性來使用，該屬性的值是一個回調函數，接收作為其第一個參數的底層 DOM 元素或組件的掛載實例。

class UnControlledForm extends Component { handleSubmit = () => { console.log("Input Value: ", this.input.value) } render () { return ( this.input = input} /> Submit ) }}

請注意，input 元素有一個ref屬性，它的值是一個函數。該函數接收輸入的實際 DOM 元素，然后將其放在實例上，這樣就可以在 handleSubmit 函數內部訪問它。

經常被誤解的只有在類組件中才能使用 refs，但是refs也可以通過利用 JS 中的閉包與函數組件一起使用。

function CustomForm ({handleSubmit}) { let inputElement return ( handleSubmit(inputElement.value)}> inputElement = input} /> Submit )}

4、在 React 中如何處理事件

難度: ??

為了解決跨瀏覽器的兼容性問題，SyntheticEvent 實例將被傳遞給你的事件處理函數，SyntheticEvent是 React 跨瀏覽器的瀏覽器原生事件包裝器，它還擁有和瀏覽器原生事件相同的接口，包括 stopPropagation() 和 preventDefault()。

比較有趣的是，React 實際上并不將事件附加到子節點本身。React 使用單個事件偵聽器偵聽頂層的所有事件。這對性能有好處，也意味著 React 在更新 DOM 時不需要跟蹤事件監聽器。

5、state 和 props 區別是啥？

難度: ??

props和state是普通的 JS 對象。雖然它們都包含影響渲染輸出的信息，但是它們在組件方面的功能是不同的。即

• state 是組件自己管理數據，控制自己的狀態，可變；
• props 是外部傳入的數據參數，不可變；
• 沒有state的叫做無狀態組件，有state的叫做有狀態組件；
• 多用 props，少用 state，也就是多寫無狀態組件。

6、如何創建 refs

難度: ??

Refs 是使用 React.createRef() 創建的，并通過 ref 屬性附加到 React 元素。在構造組件時，通常將 Refs 分配給實例屬性，以便可以在整個組件中引用它們。

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 ( this.input = input} /> // Access DOM input in handle submit Submit ) }}

7、什么是高階組件？

難度: ??

高階組件(HOC)是接受一個組件并返回一個新組件的函數?；旧?#xff0c;這是一個模式，是從 React 的組合特性中衍生出來的，稱其為純組件，因為它們可以接受任何動態提供的子組件，但不會修改或復制輸入組件中的任何行為。

const EnhancedComponent = higherOrderComponent(WrappedComponent);

HOC 可以用于以下許多用例

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

8、在構造函數調用 super 并將 props 作為參數傳入的作用是啥？

難度: ??

在調用 super() 方法之前，子類構造函數無法使用this引用，ES6 子類也是如此。將 props 參數傳遞給 super() 調用的主要原因是在子構造函數中能夠通過this.props來獲取傳入的 props。

傳遞 props

class MyComponent extends React.Component { constructor(props) { super(props); console.log(this.props); // { name: 'sudheer',age: 30 } }}

沒傳遞 props

class MyComponent extends React.Component { constructor(props) { super(); console.log(this.props); // undefined // 但是 Props 參數仍然可用 console.log(props); // Prints { name: 'sudheer',age: 30 } } render() { // 構造函數外部不受影響 console.log(this.props) // { name: 'sudheer',age: 30 } }}

上面示例揭示了一點。props 的行為只有在構造函數中是不同的，在構造函數之外也是一樣的。

9、什么是控制組件？

難度: ???

在 HTML 中，表單元素如 、和通常維護自己的狀態，并根據用戶輸入進行更新。當用戶提交表單時，來自上述元素的值將隨表單一起發送。

而 React 的工作方式則不同。包含表單的組件將跟蹤其狀態中的輸入值，并在每次回調函數(例如onChange)觸發時重新渲染組件，因為狀態被更新。以這種方式由 React 控制其值的輸入表單元素稱為受控組件。

10、如何 React.createElement ？

難度: ???

問題：

const element = (

Hello, world!

)

上述代碼如何使用 React.createElement 來實現:

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

11、講講什么是 JSX ？

難度: ???

當 Facebook 第一次發布 React 時，他們還引入了一種新的 JS 方言 JSX，將原始 HTML 模板嵌入到 JS 代碼中。JSX 代碼本身不能被瀏覽器讀取，必須使用Babel和webpack等工具將其轉換為傳統的JS。很多開發人員就能無意識使用 JSX，因為它已經與 React 結合在一直了。

class MyComponent extends React.Component { render() { let props = this.props; return (

{props.name}

); }}

12、根據下面定義的代碼，可以找出存在的兩個問題嗎 ？

難度: ???

請看下面的代碼：

答案：

1.在構造函數沒有將 props 傳遞給 super，它應該包括以下行

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

2.事件監聽器(通過addEventListener()分配時)的作用域不正確，因為 ES6 不提供自動綁定。因此，開發人員可以在構造函數中重新分配clickHandler來包含正確的綁定:

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

13、為什么不直接更新 state 呢 ?

難度: ???

如果試圖直接更新 state ，則不會重新渲染組件。

// 錯誤 This.state.message = 'Hello world';

需要使用setState()方法來更新 state。它調度對組件state對象的更新。當state改變時，組件通過重新渲染來響應：

// 正確做法This.setState({message: ‘Hello World’});

14、React 組件生命周期有哪些不同階段？

難度: ???

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

Initialization：在這個階段，組件準備設置初始化狀態和默認屬性。

Mounting：react 組件已經準備好掛載到瀏覽器 DOM 中。這個階段包括componentWillMount和componentDidMount生命周期方法。

Updating：在這個階段，組件以兩種方式更新，發送新的 props 和 state 狀態。此階段包括shouldComponentUpdate、componentWillUpdate和componentDidUpdate生命周期方法。

Unmounting：在這個階段，組件已經不再被需要了，它從瀏覽器 DOM 中卸載下來。這個階段包含 componentWillUnmount 生命周期方法。

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

Error Handling：在這個階段，不論在渲染的過程中，還是在生命周期方法中或是在任何子組件的構造函數中發生錯誤，該組件都會被調用。這個階段包含了 componentDidCatch 生命周期方法。

15、React 的生命周期方法有哪些？

難度: ???

• componentWillMount:在渲染之前執行，用于根組件中的 App 級配置。
• componentDidMount：在第一次渲染之后執行，可以在這里做AJAX請求，DOM 的操作或狀態更新以及設置事件監聽器。
• componentWillReceiveProps：在初始化render的時候不會執行，它會在組件接受到新的狀態(Props)時被觸發，一般用于父組件狀態更新時子組件的重新渲染
• shouldComponentUpdate：確定是否更新組件。默認情況下，它返回true。如果確定在 state 或 props 更新后組件不需要在重新渲染，則可以返回false，這是一個提高性能的方法。
• componentWillUpdate：在shouldComponentUpdate返回 true 確定要更新組件之前件之前執行。
• componentDidUpdate：它主要用于更新DOM以響應props或state更改。
• componentWillUnmount：它用于取消任何的網絡請求，或刪除與組件關聯的所有事件監聽器。

16、這三個點(...)在 React 干嘛用的？

難度: ???

... 在React(使用JSX)代碼中做什么？它叫什么？

這個叫擴展操作符號或者展開操作符，例如，如果this.props包含a：1和b：2，則

等價于下面內容：

擴展符號不僅適用于該用例，而且對于創建具有現有對象的大多數(或全部)屬性的新對象非常方便，在更新state 咱們就經常這么做：

this.setState(prevState => { return {foo: {...prevState.foo, a: "updated"}};});

17、使用 React Hooks 好處是啥？

難度: ???

首先，Hooks 通常支持提取和重用跨多個組件通用的有狀態邏輯，而無需承擔高階組件或渲染 props 的負擔。Hooks 可以輕松地操作函數組件的狀態，而不需要將它們轉換為類組件。

Hooks 在類中不起作用，通過使用它們，咱們可以完全避免使用生命周期方法，例如 componentDidMount、componentDidUpdate、componentWillUnmount。相反，使用像useEffect這樣的內置鉤子。

18、什么是 React Hooks？

難度: ???

Hooks是 React 16.8 中的新添加內容。它們允許在不編寫類的情況下使用state和其他 React 特性。使用 Hooks，可以從組件中提取有狀態邏輯，這樣就可以獨立地測試和重用它。Hooks 允許咱們在不改變組件層次結構的情況下重用有狀態邏輯，這樣在許多組件之間或與社區共享 Hooks 變得很容易。

19、React 中的 useState() 是什么？

難度: ???

下面說明useState(0)的用途：

...const [count, setCounter] = useState(0);const [moreStuff, setMoreStuff] = useState(...);...const setCount = () => { setCounter(count + 1); setMoreStuff(...); ...};

useState 是一個內置的 React Hook。useState(0) 返回一個元組，其中第一個參數count是計數器的當前狀態，setCounter 提供更新計數器狀態的方法。

咱們可以在任何地方使用setCounter方法更新計數狀態-在這種情況下，咱們在setCount函數內部使用它可以做更多的事情，使用 Hooks，能夠使咱們的代碼保持更多功能，還可以避免過多使用基于類的組件。

20、React 中的StrictMode(嚴格模式)是什么？？

難度: ???

React 的StrictMode是一種輔助組件，可以幫助咱們編寫更好的 react 組件，可以使用包裝一組組件，并且可以幫咱們以下檢查：

• 驗證內部組件是否遵循某些推薦做法，如果沒有，會在控制臺給出警告。
• 驗證是否使用的已經廢棄的方法，如果有，會在控制臺給出警告。
• 通過識別潛在的風險預防一些副作用。

21、為什么類方法需要綁定到類實例？

難度: ???

在 JS 中，this 值會根據當前上下文變化。在 React 類組件方法中，開發人員通常希望 this 引用組件的當前實例，因此有必要將這些方法綁定到實例。通常這是在構造函數中完成的:

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 ( Submit ) }}

22、什么是 prop drilling，如何避免？

難度: ???

在構建 React 應用程序時，在多層嵌套組件來使用另一個嵌套組件提供的數據。最簡單的方法是將一個 prop 從每個組件一層層的傳遞下去，從源組件傳遞到深層嵌套組件，這叫做prop drilling。

prop drilling的主要缺點是原本不需要數據的組件變得不必要地復雜，并且難以維護。

為了避免prop drilling，一種常用的方法是使用React Context。通過定義提供數據的Provider組件，并允許嵌套的組件通過Consumer組件或useContext Hook 使用上下文數據。

23、描述 Flux 與 MVC？

難度: ???

傳統的 MVC 模式在分離數據(Model)、UI(View和邏輯(Controller)方面工作得很好，但是 MVC 架構經常遇到兩個主要問題:

數據流不夠清晰:跨視圖發生的級聯更新常常會導致混亂的事件網絡，難于調試。

缺乏數據完整性:模型數據可以在任何地方發生突變，從而在整個UI中產生不可預測的結果。

使用 Flux 模式的復雜用戶界面不再遭受級聯更新，任何給定的React 組件都能夠根據 store 提供的數據重建其狀態。Flux 模式還通過限制對共享數據的直接訪問來加強數據完整性。

24、受控組件和非受控組件區別是啥？

難度: ???

• 受控組件是 React 控制中的組件，并且是表單數據真實的唯一來源。
• 非受控組件是由 DOM 處理表單數據的地方，而不是在 React 組件中。

盡管非受控組件通常更易于實現，因為只需使用refs即可從 DOM 中獲取值，但通常建議優先選擇受控制的組件，而不是非受控制的組件。

這樣做的主要原因是受控組件支持即時字段驗證，允許有條件地禁用/啟用按鈕，強制輸入格式。

25、這段代碼有什么問題嗎？

難度: ????

這段代碼有什么問題:

this.setState((prevState, props) => { return { streak: prevState.streak + props.count }} )

答案：

沒有什么問題。這種方式很少被使用，咱們可以將一個函數傳遞給setState，該函數接收上一個 state 的值和當前的props，并返回一個新的狀態，如果咱們需要根據以前的狀態重新設置狀態，推薦使用這種方式。

26、什么是 React Context?

難度: ????

Context 通過組件樹提供了一個傳遞數據的方法，從而避免了在每一個層級手動的傳遞 props 屬性。

27、什么是 React Fiber?

難度: ????

Fiber 是 React 16 中新的協調引擎或重新實現核心算法。它的主要目標是支持虛擬DOM的增量渲染。React Fiber 的目標是提高其在動畫、布局、手勢、暫停、中止或重用等方面的適用性，并為不同類型的更新分配優先級，以及新的并發原語。

React Fiber 的目標是增強其在動畫、布局和手勢等領域的適用性。它的主要特性是增量渲染:能夠將渲染工作分割成塊，并將其分散到多個幀中。

28、如何在 ReactJS 的 Props上應用驗證？

難度: ????

當應用程序在開發模式下運行時，React 將自動檢查咱們在組件上設置的所有 props，以確保它們具有正確的數據類型。對于不正確的類型，開發模式下會在控制臺中生成警告消息，而在生產模式中由于性能影響而禁用它。強制的 props 用 isRequired定義的。

下面是一組預定義的 prop 類型:

• React.PropTypes.string
• React.PropTypes.number
• React.PropTypes.func
• React.PropTypes.node
• React.PropTypes.boo

例如，咱們為用戶組件定義了如下的propTypes

import PropTypes from 'prop-types';class User extends React.Component { render() { return (

Welcome, {this.props.name}

Age, {this.props.age} ); }}User.propTypes = { name: PropTypes.string.isRequired, age: PropTypes.number.isRequired};

29、在 React 中使用構造函數和 getInitialState 有什么區別？

難度: ????

構造函數和getInitialState之間的區別就是ES6和ES5本身的區別。在使用ES6類時，應該在構造函數中初始化state，并在使用React.createClass時定義getInitialState方法。

class MyComponent extends React.Component { constructor(props) { super(props); this.state = { /* initial state */ }; }}

等價于：

var MyComponent = React.createClass({ getInitialState() { return { /* initial state */ }; },});var MyComponent = React.createClass({ getInitialState() { return { /* initial state */ }; },});

30、如何有條件地向 React 組件添加屬性？

難度: ????

對于某些屬性，React 非常聰明，如果傳遞給它的值是虛值，可以省略該屬性。例如：

var InputComponent = React.createClass({ render: function() { var required = true; var disabled = false; return ( ); }});

渲染結果：

另一種可能的方法是：

var condition = true;var component = (

31、Hooks會取代 render props 和高階組件嗎？

難度: ????

通常，render props和高階組件僅渲染一個子組件。React團隊認為，Hooks 是服務此用例的更簡單方法。

這兩種模式仍然有一席之地(例如，一個虛擬的 scroller 組件可能有一個 renderItem prop，或者一個可視化的容器組件可能有它自己的 DOM 結構)。但在大多數情況下，Hooks 就足夠了，可以幫助減少樹中的嵌套。

32、如何避免組件的重新渲染？

難度: ????

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

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

這兩種方法都依賴于對傳遞給組件的props的淺比較，如果 props 沒有改變，那么組件將不會重新渲染。雖然這兩種工具都非常有用，但是淺比較會帶來額外的性能損失，因此如果使用不當，這兩種方法都會對性能產生負面影響。

通過使用 React Profiler，可以在使用這些方法前后對性能進行測量，從而確保通過進行給定的更改來實際改進性能。

33、什么是純函數？

難度: ?????

純函數是不依賴并且不會在其作用域之外修改變量狀態的函數。本質上，純函數始終在給定相同參數的情況下返回相同結果。

34、當調用setState時，React render 是如何工作的？

難度: ?????

咱們可以將"render"分為兩個步驟：

虛擬 DOM 渲染:當render方法被調用時，它返回一個新的組件的虛擬 DOM 結構。當調用setState()時，render會被再次調用，因為默認情況下shouldComponentUpdate總是返回true，所以默認情況下 React 是沒有優化的。

原生 DOM 渲染:React 只會在虛擬DOM中修改真實DOM節點，而且修改的次數非常少——這是很棒的React特性，它優化了真實DOM的變化，使React變得更快。

35、如何避免在React重新綁定實例？

難度: ?????

有幾種常用方法可以避免在 React 中綁定方法：

1.將事件處理程序定義為內聯箭頭函數

class SubmitButton extends React.Component { constructor(props) { super(props); this.state = { isFormSubmitted: false }; } render() { return ( { this.setState({ isFormSubmitted: true }); }}>Submit ) }}

2.使用箭頭函數來定義方法：

class SubmitButton extends React.Component { state = { isFormSubmitted: false } handleSubmit = () => { this.setState({ isFormSubmitted: true }); } render() { return ( Submit ) }}

3.使用帶有 Hooks 的函數組件

const SubmitButton = () => { const [isFormSubmitted, setIsFormSubmitted] = useState(false); return ( { setIsFormSubmitted(true); }}>Submit )};

36、React中keys的作用是什么？

難度: ?

• 用于追蹤哪些列表中元素被修改、被添加或者被移除的輔助(唯一)標識
• 在diff算法中減少不必要的元素重渲染
• 借助 Key 值來判斷元素與本地狀態的關聯關系

37、React中，shouldComponentUpdate 是做什么的

難度: ?

• return true 繼續更新/false阻止更新
• 判斷是否需要調用 render 方法重新描繪 dom，
• 性能優化

38、React 的工作原理？

難度: ????

• 基于React進行開發時所有的DOM構造都是通過虛擬DOM進行，
• 每當數據變化時，React都會重新構建整個DOM樹，
• 然后React將當前整個DOM樹和上一次的DOM樹進行對比(diff算法)，
• 得到DOM結構的區別，
• 然后‘僅僅’將需要變化的部分進行實際的瀏覽器DOM更新

39、diff算法?

難度: ????

• 把樹形結構按照層級分解，只比較同級元素。
• 給列表結構的每個單元添加唯一的 key 屬性，方便比較。
• React 只會匹配相同 class 的 component(這里面的 class 指的是組件的名字)
• 合并操作，調用 component 的 setState 方法的時候, React 將其標記為 dirty.到每一個事件循環結束, React 檢查所有標記 dirty 的 component 重新繪制.
• 選擇性子樹渲染。開發人員可以重寫 shouldComponentUpdate 提高 diff 的性能。

40、react性能優化方案

難度: ???

• 重寫shouldComponentUpdate來避免不必要的dom操作。
• 使用 production 版本的react.js。
• 使用key來幫助React識別列表中所有子組件的最小變化

41、應該在 React 組件的何處發起 Ajax 請求？

難度: ?

• 應該在 componentDidMount 中發起網絡請求

42、React.Fragment有什么用途？它的簡寫是什么？

難度: ?

• 無需向 DOM 添加額外節點，
• 簡寫:<>>

43、解釋下React中component和pureComponent兩者的區別是什么？

難度: ??

• 后者只有當前組件props或者state改變時，才會引起dom重新渲染，提高性能，注意props/state的變化是淺比較

總結

以上是生活随笔為你收集整理的react 更新input 默认值setfieldsvalue_值得收藏的React面试题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。