React 面試必知必會 Day4

你們好，我是 @洛竹

本文首發於 洛竹的官方網站

本文翻譯自 sudheerj/reactjs-interview-questions

本文同步於公衆號洛竹早茶館，轉載請聯繫做者。

• 「漲薪必備」React 面試問答系列 Day1
• 「漲薪必備」React 面試問答系列 Day2
• 「漲薪必備」React 面試問答系列 Day3

1. createElement 和 cloneElement 的區別是什麼？

JSX 元素將被轉換爲 React.createElement() 函數以建立 React 元素，這些元素將用於 UI 的對象表示。而 cloneElement 用於克隆元素並將新的 props 傳遞給它。

課後擴展：

• React 頂層 API

2. React 中的狀態提高是什麼？

當多個組件須要共享相同的變化數據時，建議將共享狀態提高到它們最接近的共同祖先。這意味着，若是兩個子組件共享來自其父組件的相同數據，則將狀態移到父組件，而不是在兩個子組件中都保持內部狀態。

3. 組件生命週期有哪些不一樣階段？

組件生命週期具備三個不一樣的生命週期階段。

1. Mounting： 組件已準備好安裝在瀏覽器 DOM 中。這個階段涵蓋了生命週期方法 constructor()、getDerivedStateFromProps()、 render() 和 componentDidMount() 的初始化。
2. Updating： 在此階段，組件以兩種方式進行更新，即發送新 props 和從 setState() 或 forceUpdate() 更新狀態。此階段涵蓋了getDerivedStateFromProps()，shouldComponentUpdate()，render() 、getSnapshotBeforeUpdate() 和 componentDidUpdate() 生命週期方法。
3. Unmounting： 在最後一個階段，再也不須要該組件並從瀏覽器DOM上卸載該組件。 這個階段包括 componentWillUnmount() 生命週期方法。

值得一提的是，在將更改應用於 DOM 時，React 內部具備階段性概念。 它們分開以下

1. Render： 該組件將渲染而沒有任何反作用。這適用於 Pure 組件，在此階段，React 能夠暫停、停止或從新啓動渲染。
2. Pre-commit： 在組件將更改實際應用於 DOM 以前，有一段時間可讓 React 經過 getSnapshotBeforeUpdate() 從 DOM 中讀取內容。
3. Commit： React 與 DOM 一塊兒工做並分別執行最終的生命週期：componentDidMount() 用於安裝，componentDidUpdate() 用於更新，以及 componentWillUnmount() 用於卸載。

React 16.3+ (或者 在線交互版本)

React 16.3 以前的版本：

4. React 生命週期有哪些？

React 16.3 之前的版本：

• componentWillMount： 在渲染以前執行，用於根組件中的應用程序級別配置。
• componentDidMount： 在首次渲染以後執行，全部 AJAX 請求，DOM 或狀態更新以及設置事件偵聽器都應在此執行。
• componentWillReceiveProps： 在特定屬性更新以觸發狀態轉換時執行。
• shouldComponentUpdate： 肯定是否要更新組件。默認狀況下，它返回 true。若是你肯定在狀態或屬性更新後不須要渲染組件，則能夠返回 false 值。這是提升性能的好地方，由於若是組件收到新的 props，它能夠防止從新渲染。
• componentWillUpdate： 當有屬性或狀態改變被shouldComponentUpdate() 確認並返回 true 時，在從新渲染組件以前執行。
• componentDidUpdate： 一般，它用於響應屬性或狀態更改來更新 DOM。
• componentWillUnmount： 它將用於取消任何傳出的網絡請求，或刪除與該組件關聯的全部事件偵聽器。

React 16.3+ 版本

• getDerivedStateFromProps： 在調用 render() 以前被調用，而且在每次渲染中都會被調用。對於須要派生狀態的罕見用例，這是存在的。若是您須要派生狀態 值得一讀。
• componentDidMount： 在首次渲染以後執行，而且全部 AJAX 請求、DOM 或狀態更新以及設置事件偵聽器都應在此發生。
• shouldComponentUpdate： 肯定是否將更新組件。默認狀況下，它返回 true。若是你肯定在狀態或屬性更新後不須要渲染組件，則能夠返回 false值。這是提升性能的好地方，由於若是組件接收到新的屬性，它能夠防止從新渲染。
• getSnapshotBeforeUpdate： 在將呈現的輸出提交給 DOM 以前當即執行。此方法返回的任何值都將傳遞到 componentDidUpdate() 中。 這對於從 DOM（即滾動位置）捕獲信息頗有用。
• componentDidUpdate： 一般，它用於響應屬性或狀態更改來更新DOM。若是 shouldComponentUpdate() 返回 false，則不會觸發。
• componentWillUnmount： 它將用於取消任何傳出的網絡請求，或刪除與該組件關聯的全部事件偵聽器。

5. 高階組件是什麼

高階組件（HOC）是接收組件並返回新組件的函數。基本上，這是從 React 的組成性質衍生出來的一種模式。

咱們稱它們爲純組件，由於它們能夠接受任何動態提供的子組件，可是它們不會修改或複製其輸入組件中的任何行爲。

const EnhancedComponent = higherOrderComponent(WrappedComponent)
複製代碼

HOC 能夠用到不少場景中：

1. 代碼重用，邏輯和引導程序抽象。
2. 渲染劫持。
3. 狀態抽象和操縱。
4. props操做。

6. 如何爲 HOC 組件 建立 props 代理？

您可使用屬性代理模式添加或編輯傳遞給組件的屬性，以下所示：

function HOC(WrappedComponent) {
  return class Test extends Component {
    render() {
      const newProps = {
        title: 'New Header',
        footer: false,
        showFeatureX: false,
        showFeatureY: true
      }

      return <WrappedComponent {...this.props} {...newProps} />
    }
  }
}
複製代碼

課後擴展：

• react 高階組件的代理模式

7. context 是什麼？

Context 提供了一種經過組件樹傳遞數據的方法，而不須要一層一層手動傳遞屬性。

例如，須要由許多組件在應用程序中訪問通過身份驗證的用戶，本地設置首選項，UI 主題等。

const {Provider, Consumer} = React.createContext(defaultValue)
複製代碼

8. 什麼是 children 屬性？

Children 是一個 prop（this.props.children），容許你將組件做爲數據傳遞給其餘組件，就像你使用的任何其餘 prop 同樣。放置在組件的開始標記和結束標記之間的組件樹將做爲 children 道具傳遞給該組件。

React API 中有許多方法可做爲該屬性。其中包括 React.Children.map、React.Children.forEach，React.Children.count、React.Children.only 和 React.Children.toArray。

children 的簡單用法以下所示：

const MyDiv = React.createClass({
  render: function() {
    return <div>{this.props.children}</div>
  }
})

ReactDOM.render(
  <MyDiv> <span>{'Hello'}</span> <span>{'World'}</span> </MyDiv>,
  node
)
複製代碼

9. React 中如何寫註釋？

React JSX 中的註釋和 JavaScript 的多行註釋很像，可是用大括號括起來。

單行註釋：

<div>
  {/* 這裏是單行註釋 */}
  {`Welcome ${user}, let's play React`}
</div>
複製代碼

多行註釋：

<div>
  {/* Multi-line comments for more than one line */}
  {`Welcome ${user}, let's play React`}
</div>
複製代碼

10. 在 constructor 中給 super 函數傳遞 props 的目的是什麼？

一個子類構造器在 super() 方法調用以前是沒法拿到 this 引用的。這一樣也適用於 ES6 中的 sub-classes。調用 super() 時傳遞 props 的主要是爲了在子類的構造器中訪問 this.props。

傳遞 props：

class MyComponent extends React.Component {
  constructor(props) {
    super(props)

    console.log(this.props) // 打印 { name: 'John', age: 42 }
  }
}
複製代碼

不傳遞 props：

class MyComponent extends React.Component {
  constructor(props) {
    super()

    console.log(this.props) // 打印 undefined

    // 可是 props 參數依然能夠訪問
    console.log(props) // 打印 { name: 'John', age: 42 }
  }

  render() {
    // 在 constructor 以外沒有影響
    console.log(this.props) // 打印 { name: 'John', age: 42 }
  }
}
複製代碼

上面的代碼片斷揭示了 this.props 僅在構造函數中有所不一樣。在構造函數外部表現將是相同的。

更多信息能夠參考 爲何咱們要寫 super(props) ？