react面試時會有哪些問題？ react面試常見問題的詳細的分析解答

本篇文章主要的介紹了關於react中的常見問題分析，有問題還有答案，點進來看看有沒有其中一個問題是可以給大家解惑的。現在就讓我們一起來看這篇文章吧

1、React 中 Element 與 Component 的差別是？

官網文件對於Element的解釋是：

Elements are the smallest building blocks of React apps.
An element describes what you want to see on the screen:

官網對於Compent的解釋是：

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.
Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called "props") and return React elements describing what should appear on the screen.

也就是說，React Element 是描述畫面上所見內容的資料結構，是對於UI 的物件表述。典型的 React Element 就是利用 JSX 建構的宣告式程式碼片然後被轉換為createElement的呼叫組合。而 React Component 則是可以接收參數輸入並且傳回某個 React Element 的函數或類別。

2、JSX

React 使用 JSX 來取代常規的 JavaScript。 JSX 是一個看起來很像 XML 的 JavaScript 語法擴充。我們不需要一定使用 JSX，但它有以下優點：

JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
它是类型安全的，在编译过程中就能发现错误。
使用 JSX 编写模板更加简单快速。

3、呼叫 setState 之後發生了什麼？

在程式碼中呼叫setState函數之後，React 會將傳入的參數物件與元件目前的狀態合併，然後觸發所謂的調和過程（Reconciliation）。經過調和過程，React 會以相對高效的方式根據新的狀態建立 React 元素樹並且著手重新渲染整個UI介面。在 React 得到元素樹之後，React 會自動計算出新的樹與老樹的節點差異，然後根據差異對介面進行最小化重渲染。在差異計算演算法中，React 能夠相對精確地知道哪些位置發生了變化以及應該如何改變，這保證了按需更新，而不是全部重新渲染。

4、在什麼情況下你會優先選擇使用 Class Component 而不是 Functional Component？

在元件需要包含內部狀態或使用到生命週期函數的時候使用 Class Component ，否則使用函數式元件。

5、在生命週期中的哪一步你應該發起 AJAX 請求？

我們應該將AJAX 請求放到componentDidMount 函數中執行，主要原因有下：

React 下一代調和演算法Fiber 會透過開始或停止渲染的方式優化應用效能，其會影響到componentWillMount 的觸發次數。對於 componentWillMount 這個生命週期函數的呼叫次數會變得不確定，React 可能會多次頻繁地呼叫 componentWillMount。如果我們將 AJAX 請求放到 componentWillMount 函數中，那麼顯而易見其會被觸發多次，自然也就不是好的選擇。

如果我們將 AJAX 請求放置在生命週期的其他函數中，我們並不能保證請求僅在元件掛載完畢後才會要求回應。如果我們的資料請求在元件掛載之前就完成，並且呼叫了setState函數將資料新增至元件狀態中，對於未掛載的元件則會報錯。而在 componentDidMount 函數中進行 AJAX 請求則能有效避免這個問題。 （想看更多就到PHP中文網React參考手冊欄位學習）

6、Controlled Component 與 Uncontrolled Component 之間的差異是什麼？

React 的核心組成之一是能夠維持內部狀態的自治元件，不過當我們引入原生的HTML表單元素時（input,select,textarea 等），我們是否應該將所有的數據託管到React 元件中還是將其仍保留在DOM 元素中呢？這個問題的答案就是受控組件與非受控組件的定義分割。受控元件（Controlled Component）代指那些交由 React 控制並且所有的表單資料統一存放的元件。也就是說，React.js 中的73a3ca28445b1c625f2086a50cb8c7df 、61d90be9d2f4c66acf53b3eb6fb9f09d、9c8501ef49561f01c98856a0e886b175 等元素的value 值如果受到React.js 的控制，那麼就是受控組件。譬如下面這段程式碼中username變數值並沒有存放到DOM元素中，而是存放在元件狀態資料中。任何時候我們需要改變username變數值時，我們應該當呼叫setState函數進行修改。

class ControlledForm extends Component {
  state = {
    username: ''
  }
  updateUsername = (e) => {    this.setState({
      username: e.target.value,
    })
  }
  handleSubmit = () => {}
  render () {    return (
      <form onSubmit={this.handleSubmit}>
        <input          type=&#39;text&#39;
          value={this.state.username}
          onChange={this.updateUsername} />
        <button type=&#39;submit&#39;>Submit</button>
      </form>
    )
  }
}

而非受控元件（Uncontrolled Component）則是由DOM存放表單數據，並非存放在 React 元件中。我們可以使用 refs 來操控DOM元素：

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

竟然非受控元件看上去更好實現，我們可以直接從 DOM 中抓取數據，而不需要添加額外的程式碼。不過實際開發中我們並不提倡使用非受控組件，因為實際情況下我們需要更多的考慮表單驗證、選擇性的開啟或關閉按鈕點擊、強制輸入格式等功能支持，而此時我們將資料託管到React 中有助於我們更好地以宣告式的方式完成這些功能。引入 React 或其他 MVVM 框架最初的原因是為了將我們從繁重的直接操作 DOM 中解放出來。

7、shouldComponentUpdate 的作用是啥、為何它這麼重要？

shouldComponentUpdate 允许我们手动地判断是否要进行组件更新，根据组件的应用场景设置函数的合理返回值能够帮我们避免不必要的更新。

8、概述下 React 中的事件处理逻辑

为了解决跨浏览器兼容性问题，React 会将浏览器原生事件（Browser Native Event）封装为合成事件（SyntheticEvent）传入设置的事件处理器中。这里的合成事件提供了与原生事件相同的接口，不过它们屏蔽了底层浏览器的细节差异，保证了行为的一致性。另外有意思的是，React 并没有直接将事件附着到子元素上，而是以单一事件监听器的方式将所有的事件发送到顶层进行处理。这样 React 在更新 DOM 的时候就不需要考虑如何去处理附着在 DOM 上的事件监听器，最终达到优化性能的目的。

9、传入 setState 函数的第二个参数的作用是什么？

该函数会在setState函数调用完成并且组件开始重渲染的时候被调用，我们可以用该函数来监听渲染是否完成：

this.setState(
  { username: 'tylermcginnis33' },  () => console.log('setState has finished and the component has re-rendered.')
)

10、组件的生命周期

组件的生命周期分成三个状态：

Mounting：已插入真实 DOM
Updating：正在被重新渲染
Unmounting：已移出真实 DOM

React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。

componentWillMount()componentDidMount()componentWillUpdate(object nextProps, object nextState)componentDidUpdate(object prevProps, object prevState)componentWillUnmount()

此外，React 还提供两种特殊状态的处理函数。

componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用

本篇文章到这就结束了（想看更多就到PHP中文网React使用手册栏目中学习），有问题的可以在下方留言提问。

以上是react面試時會有哪些問題？ react面試常見問題的詳細的分析解答的詳細內容。更多資訊請關注PHP中文網其他相關文章！