2020年Web前端面試題之React相關（最全，最詳細）

React相關

第一部分

1.React 中keys 的作用是什麼？

Keys 是React在操作列表中元素被修改,添加,或者刪除的輔助標識.
https://www.jianshu.com/p/5efa10d71051

2.調用setState 之後發生了什麼？

當調用 setState 時，React會做的第一件事情是將傳遞給 setState 的對象合併到組件的當前狀態。這將啓動一個稱爲和解（reconciliation）的過程。和解（reconciliation）的最終目標是以最有效的方式，根據這個新的狀態來更新UI。 爲此，React將構建一個新的 React 元素樹（您可以將其視爲 UI 的對象表示）。
一旦有了這個樹，爲了弄清 UI 如何響應新的狀態而改變，React 會將這個新樹與上一個元素樹相比較（ diff ）。
通過這樣做， React 將會知道發生的確切變化，並且通過了解發生什麼變化，只需在絕對必要的情況下進行更新即可最小化 UI 的佔用空間。

3.react 生命週期函數

·
初始化階段：getDefaultProps==> constructor ==> componentWillMount ==> render ==> componentDidMount
·
運行中狀態：componentWillReceiveProps=>shouldComponentUpdate==>componentWillUpdate==> render==>componentDidUpdate
·
銷燬階段：
componentWillUnmount
生命週期的順序：defaultProps==> constructor ==> componentWillMount ==> render ==> componentDidMount==> componentWillUnmount

4.shouldComponentUpdate 是做什麼的，（react 性能優化是哪個週期函數？）

shouldComponentUpdate
詢問組件是否需要更新的一個鉤子函數，判斷數據是否需要重新渲染，返回一個布爾值。默認的返回值是true，需要重新render()。若如果返回值是false則不觸發渲染,利用這個生命週期函數可以強制關閉不需要更新的子組件來提升渲染性能。
這個方法用來判斷是否需要調用 render 方法重新描繪 dom。
因爲 dom 的描繪非常消耗性能，如果我們能在 shouldComponentUpdate 方法中能夠寫出更優化的 dom diff 算法，可以極大的提高性能。

react的父級組件的render函數重新渲染會引起子組件的render方法的重新渲染。但是，有的時候子組件的接受父組件的數據沒有變動。子組件render的執行會影響性能，這時就可以使用shouldComponentUpdate來解決這個問題。
shouldComponentUpdate 這是一個需要返回布爾值的生命週期，可以理解爲疑問句 "組件本身需要被重新渲染嗎?"
例如：
shouldComponentUpdate (){
if(子組件原數據 == 子組件現在接收的數據){
return false;
}else{
retuen true;
}
}
從而達到沒必要重新渲染的子組件，阻塞掉父子render變化引起的子組件render的變動，提升性能！

5.爲什麼虛擬 dom 會提高性能?(必考)

虛擬 dom 相當於在 js 和真實 dom 中間加了一個緩存，利用 dom diff 算法避免了沒有必要的 dom 操作，從而提高性能。
用 JavaScript 對象結構表示 DOM 樹的結構；然後用這個樹構建一個真正的 DOM 樹，插到文檔當中當狀態變更的時候，重新構造一棵新的對象樹。然後用新的樹和舊的樹進行比較，記錄兩棵樹差異把 2 所記錄的差異應用到步驟 1 所構建的真正的 DOM 樹上，視圖就更新了。
採用虛擬DOM的話，當數據變化的時候，只需要局部刷新變化的位置就好了。
虛擬DOM具有批處理和高效的Diff算法,最終表現在DOM上的修改只是變更的部分，可以保證非常高效的渲染,優化性能.

6.react diff 原理（常考，大廠必考）

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

7.React 中refs 的作用是什麼？

https://segmentfault.com/a/1190000020247827?utm_source=tag-newest

8.如果你創建了類似於下面的 Twitter 元素，那麼它相關的類定義是啥樣子的？

9.展示組件(Presentational component)和容器組件(Container

component)之間有何不同

10.容器組件則更關心組件是如何運作的。

11.類組件(Class component)和函數式組件(Functional

component)之間有何不同

12. (組件的)狀態(state)和屬性(props)之間有何不同

13.何爲受控組件(controlled component)

14.何爲高階組件(higher order component)

15.爲什麼建議傳遞給 setState 的參數是一個 callback 而不是一個對象

16.除了在構造函數中綁定 this，還有其它方式嗎

17.應該在 React 組件的何處發起 Ajax 請求

18.描述事件在 React 中的處理方式。

19.createElement 和cloneElement 有什麼區別？

20.React 中有三種構建組件的方式

21.React.createClass()、ES6class 和無狀態函數。

22.react 組件的劃分業務組件技術組件？

23.簡述flux 思想

24.Flux 的最大特點，就是數據的"單向流動"。

25.React 項目用過什麼腳手架（本題是開放性題目）

26.瞭解redux 麼，說一下 redux 的作用和運用流程，redux有什麼缺點

---

第二部分

• 35道咱們必須要清楚的 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 (
      <form onSubmit={this.handleSubmit}>
        <input
          type='text'
          ref={(input) => this.input = input} />
        <button type='submit'>Submit</button>
      </form>
    )
  }
}

請注意，input 元素有一個ref屬性，它的值是一個函數。該函數接收輸入的實際 DOM 元素，然後將其放在實例上，這樣就可以在 handleSubmit 函數內部訪問它。
經常被誤解的只有在類組件中才能使用 refs，但是refs也可以通過利用 JS 中的閉包與函數組件一起使用。

function CustomForm ({handleSubmit}) {
  let inputElement
  return (
    <form onSubmit={() => handleSubmit(inputElement.value)}>
      <input
        type='text'
        ref={(input) => inputElement = input} />
      <button type='submit'>Submit</button>
    </form>
  )
}

---

問題 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 <div ref={this.myRef} />;
  }
}

或者這樣用：

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

---

問題 7：什麼是高階組件？

高階組件(HOC)是接受一個組件並返回一個新組件的函數。基本上，這是一個模式，是從 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 中，表單元素如 <input>、<textarea>和<select>通常維護自己的狀態，並根據用戶輸入進行更新。當用戶提交表單時，來自上述元素的值將隨表單一起發送。
而 React 的工作方式則不同。包含表單的組件將跟蹤其狀態中的輸入值，並在每次回調函數(例如onChange)觸發時重新渲染組件，因爲狀態被更新。以這種方式由 React 控制其值的輸入表單元素稱爲受控組件。

---

問題 10：如何 React.createElement ？

問題：

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
)

上述代碼如何使用 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 (
      <div className="my-component">
      <a href={props.url}>{props.name}</a>
      </div>
    );
  }
}

---

問題 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 組件生命週期有哪些不同階段？

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

1. Initialization：在這個階段，組件準備設置初始化狀態和默認屬性。
2. Mounting：react 組件已經準備好掛載到瀏覽器 DOM 中。這個階段包括componentWillMount和componentDidMount生命週期方法。
3. Updating：在這個階段，組件以兩種方式更新，發送新的 props 和 state 狀態。此階段包括shouldComponentUpdate、componentWillUpdate和componentDidUpdate生命週期方法。
4. 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）代碼中做什麼？它叫什麼？

<Modal {...this.props} title='Modal heading'  animation={false}/>

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

<Modal {...this.props} title='Modal heading' animation={false}>

等價於下面內容：

<Modal a={this.props.a} b={this.props.b} title='Modal heading' animation={false}>

擴展符號不僅適用於該用例，而且對於創建具有現有對象的大多數（或全部）屬性的新對象非常方便，在更新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 組件，可以使用<StrictMode />包裝一組組件，並且可以幫咱們以下檢查：

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

---

問題 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 (
      <button onClick={this.handleSubmit}>Submit</button>
    )
  }
}

---

問題 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.bool

例如，咱們爲用戶組件定義瞭如下的propTypes

import PropTypes from 'prop-types';
class User extends React.Component {
  render() {
    return (
      <h1>Welcome, {this.props.name}</h1>
      <h2>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 */ };
  },
});

---

問題 30：如何有條件地向 React 組件添加屬性？

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

var InputComponent = React.createClass({
    render: function() {
      var required = true;
      var disabled = false;
      return (
        <input type="text" disabled={disabled} required={required} />
      );
    }
});

渲染結果：

<input type="text" required>

另一種可能的方法是：

var condition = true;
var component = (
  <div
    value="foo"
    { ...( condition && { disabled: true } ) } />
);

---

問題 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"分爲兩個步驟：

1. 虛擬 DOM 渲染:當render方法被調用時，它返回一個新的組件的虛擬 DOM 結構。當調用setState()時，render會被再次調用，因爲默認情況下shouldComponentUpdate總是返回true，所以默認情況下 React 是沒有優化的。
2. 原生 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 (
      <button onClick={() => {
        this.setState({ isFormSubmitted: true });
      }}>Submit</button>
    )
  }
}

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

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

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

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

---