React中有使用過getDefaultProps嗎？它有什么作用？

通過實現(xiàn)組件的getDefaultProps，對屬性設(shè)置默認值（ES5的寫法）：

var ShowTitle = React.createClass({
  getDefaultProps:function(){
    return{
      title : "React"
    }
  },
  render : function(){
    return <h1>{this.props.title}</h1>
  }
});

React.Component 和 React.PureComponent 的區(qū)別

PureComponent表示一個純組件，可以用來優(yōu)化React程序，減少render函數(shù)執(zhí)行的次數(shù)，從而提高組件的性能。

在React中，當prop或者state發(fā)生變化時，可以通過在shouldComponentUpdate生命周期函數(shù)中執(zhí)行return false來阻止頁面的更新，從而減少不必要的render執(zhí)行。React.PureComponent會自動執(zhí)行 shouldComponentUpdate。

不過，pureComponent中的 shouldComponentUpdate() 進行的是淺比較，也就是說如果是引用數(shù)據(jù)類型的數(shù)據(jù)，只會比較不是同一個地址，而不會比較這個地址里面的數(shù)據(jù)是否一致。淺比較會忽略屬性和或狀態(tài)突變情況，其實也就是數(shù)據(jù)引用指針沒有變化，而數(shù)據(jù)發(fā)生改變的時候render是不會執(zhí)行的。如果需要重新渲染那么就需要重新開辟空間引用數(shù)據(jù)。PureComponent一般會用在一些純展示組件上。

使用pureComponent的好處：當組件更新時，如果組件的props或者state都沒有改變，render函數(shù)就不會觸發(fā)。省去虛擬DOM的生成和對比過程，達到提升性能的目的。這是因為react自動做了一層淺比較。

React 事件機制

<div onClick={this.handleClick.bind(this)}>點我</div>

React并不是將click事件綁定到了div的真實DOM上，而是在document處監(jiān)聽了所有的事件，當事件發(fā)生并且冒泡到document處的時候，React將事件內(nèi)容封裝并交由真正的處理函數(shù)運行。這樣的方式不僅僅減少了內(nèi)存的消耗，還能在組件掛在銷毀時統(tǒng)一訂閱和移除事件。

除此之外，冒泡到document上的事件也不是原生的瀏覽器事件，而是由react自己實現(xiàn)的合成事件（SyntheticEvent）。因此如果不想要是事件冒泡的話應(yīng)該調(diào)用event.preventDefault()方法，而不是調(diào)用event.stopProppagation()方法。 JSX 上寫的事件并沒有綁定在對應(yīng)的真實 DOM 上，而是通過事件代理的方式，將所有的事件都統(tǒng)一綁定在了 document 上。這樣的方式不僅減少了內(nèi)存消耗，還能在組件掛載銷毀時統(tǒng)一訂閱和移除事件。

另外冒泡到 document 上的事件也不是原生瀏覽器事件，而是 React 自己實現(xiàn)的合成事件（SyntheticEvent）。因此我們?nèi)绻幌胍录芭莸脑挘{(diào)用 event.stopPropagation 是無效的，而應(yīng)該調(diào)用 event.preventDefault。

實現(xiàn)合成事件的目的如下：

• 合成事件首先抹平了瀏覽器之間的兼容問題，另外這是一個跨瀏覽器原生事件包裝器，賦予了跨瀏覽器開發(fā)的能力；
• 對于原生瀏覽器事件來說，瀏覽器會給監(jiān)聽器創(chuàng)建一個事件對象。如果你有很多的事件監(jiān)聽，那么就需要分配很多的事件對象，造成高額的內(nèi)存分配問題。但是對于合成事件來說，有一個事件池專門來管理它們的創(chuàng)建和銷毀，當事件需要被使用時，就會從池子中復(fù)用對象，事件回調(diào)結(jié)束后，就會銷毀事件對象上的屬性，從而便于下次復(fù)用事件對象。

React 高階組件、Render props、hooks 有什么區(qū)別，為什么要不斷迭代

這三者是目前react解決代碼復(fù)用的主要方式：

• 高階組件（HOC）是 React 中用于復(fù)用組件邏輯的一種高級技巧。HOC 自身不是 React API 的一部分，它是一種基于 React 的組合特性而形成的設(shè)計模式。具體而言，高階組件是參數(shù)為組件，返回值為新組件的函數(shù)。
• render props是指一種在 React 組件之間使用一個值為函數(shù)的 prop 共享代碼的簡單技術(shù)，更具體的說，render prop 是一個用于告知組件需要渲染什么內(nèi)容的函數(shù) prop。
• 通常，render props 和高階組件只渲染一個子節(jié)點。讓 Hook 來服務(wù)這個使用場景更加簡單。這兩種模式仍有用武之地，（例如，一個虛擬滾動條組件或許會有一個 renderltem 屬性，或是一個可見的容器組件或許會有它自己的 DOM 結(jié)構(gòu)）。但在大部分場景下，Hook 足夠了，并且能夠幫助減少嵌套。

（1）HOC 官方解釋∶

高階組件（HOC）是 React 中用于復(fù)用組件邏輯的一種高級技巧。HOC 自身不是 React API 的一部分，它是一種基于 React 的組合特性而形成的設(shè)計模式。

簡言之，HOC是一種組件的設(shè)計模式，HOC接受一個組件和額外的參數(shù)（如果需要），返回一個新的組件。HOC 是純函數(shù)，沒有副作用。

// hoc的定義
function withSubscription(WrappedComponent, selectData) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        data: selectData(DataSource, props)
      };
    }
    // 一些通用的邏輯處理
    render() {
      // ... 并使用新數(shù)據(jù)渲染被包裝的組件!
      return <WrappedComponent data={this.state.data} {...this.props} />;
    }
  };

// 使用
const BlogPostWithSubscription = withSubscription(BlogPost,
  (DataSource, props) => DataSource.getBlogPost(props.id));

HOC的優(yōu)缺點∶

• 優(yōu)點∶ 邏輯服用、不影響被包裹組件的內(nèi)部邏輯。
• 缺點∶ hoc傳遞給被包裹組件的props容易和被包裹后的組件重名，進而被覆蓋

（2）Render props 官方解釋∶

"render prop"是指一種在 React 組件之間使用一個值為函數(shù)的 prop 共享代碼的簡單技術(shù)

具有render prop 的組件接受一個返回React元素的函數(shù)，將render的渲染邏輯注入到組件內(nèi)部。在這里，"render"的命名可以是任何其他有效的標識符。

// DataProvider組件內(nèi)部的渲染邏輯如下
class DataProvider extends React.Components {
     state = {
    name: 'Tom'
  }

    render() {
    return (
        <div>
          <p>共享數(shù)據(jù)組件自己內(nèi)部的渲染邏輯</p>
          { this.props.render(this.state) }      </div>
    );
  }
}

// 調(diào)用方式
<DataProvider render={data => (
  <h1>Hello {data.name}</h1>
)}/>

由此可以看到，render props的優(yōu)缺點也很明顯∶

• 優(yōu)點：數(shù)據(jù)共享、代碼復(fù)用，將組件內(nèi)的state作為props傳遞給調(diào)用者，將渲染邏輯交給調(diào)用者。
• 缺點：無法在 return 語句外訪問數(shù)據(jù)、嵌套寫法不夠優(yōu)雅

（3）Hooks 官方解釋∶

Hook是 React 16.8 的新增特性。它可以讓你在不編寫 class 的情況下使用 state 以及其他的 React 特性。通過自定義hook，可以復(fù)用代碼邏輯。

// 自定義一個獲取訂閱數(shù)據(jù)的hook
function useSubscription() {
  const data = DataSource.getComments();
  return [data];
}
// 
function CommentList(props) {
  const {data} = props;
  const [subData] = useSubscription();
    ...
}
// 使用
<CommentList data='hello' />

以上可以看出，hook解決了hoc的prop覆蓋的問題，同時使用的方式解決了render props的嵌套地獄的問題。hook的優(yōu)點如下∶

• 使用直觀；
• 解決hoc的prop 重名問題；
• 解決render props 因共享數(shù)據(jù) 而出現(xiàn)嵌套地獄的問題；
• 能在return之外使用數(shù)據(jù)的問題。

需要注意的是：hook只能在組件頂層使用，不可在分支語句中使用。、

React怎么做數(shù)據(jù)的檢查和變化

Model改變之后（可能是調(diào)用了setState），觸發(fā)了virtual dom的更新，再用diff算法來把virtual DOM比較real DOM，看看是哪個dom節(jié)點更新了，再渲染real dom

React實現(xiàn)的移動應(yīng)用中，如果出現(xiàn)卡頓，有哪些可以考慮的優(yōu)化方案

• 增加shouldComponentUpdate鉤子對新舊props進行比較，如果值相同則阻止更新，避免不必要的渲染，或者使用PureReactComponent替代Component，其內(nèi)部已經(jīng)封裝了shouldComponentUpdate的淺比較邏輯
• 對于列表或其他結(jié)構(gòu)相同的節(jié)點，為其中的每一項增加唯一key屬性，以方便React的diff算法中對該節(jié)點的復(fù)用，減少節(jié)點的創(chuàng)建和刪除操作
• render函數(shù)中減少類似onClick={() => {doSomething()}}的寫法，每次調(diào)用render函數(shù)時均會創(chuàng)建一個新的函數(shù)，即使內(nèi)容沒有發(fā)生任何變化，也會導(dǎo)致節(jié)點沒必要的重渲染，建議將函數(shù)保存在組件的成員對象中，這樣只會創(chuàng)建一次
• 組件的props如果需要經(jīng)過一系列運算后才能拿到最終結(jié)果，則可以考慮使用reselect庫對結(jié)果進行緩存，如果props值未發(fā)生變化，則結(jié)果直接從緩存中拿，避免高昂的運算代價
• webpack-bundle-analyzer分析當前頁面的依賴包，是否存在不合理性，如果存在，找到優(yōu)化點并進行優(yōu)化

參考 前端進階面試題詳細解答

在 React中元素（ element）和組件（ component）有什么區(qū)別？

簡單地說，在 React中元素（虛擬DOM）描述了你在屏幕上看到的DOM元素。
換個說法就是，在 React中元素是頁面中DOM元素的對象表示方式。在 React中組件是一個函數(shù)或一個類，它可以接受輸入并返回一個元素。
注意：工作中，為了提高開發(fā)效率，通常使用JSX語法表示 React元素（虛擬DOM）。在編譯的時候，把它轉(zhuǎn)化成一個 React. createElement調(diào)用方法。

高階組件

高階函數(shù)：如果一個函數(shù)接受一個或多個函數(shù)作為參數(shù)或者返回一個函數(shù)就可稱之為高階函數(shù)。

高階組件：如果一個函數(shù) 接受一個或多個組件作為參數(shù)并且返回一個組件 就可稱之為 高階組件。

react 中的高階組件

React 中的高階組件主要有兩種形式：屬性代理和反向繼承。

屬性代理 Proxy

• 操作 props
• 抽離 state
• 通過 ref 訪問到組件實例
• 用其他元素包裹傳入的組件 WrappedComponent

反向繼承

會發(fā)現(xiàn)其屬性代理和反向繼承的實現(xiàn)有些類似的地方，都是返回一個繼承了某個父類的子類，只不過屬性代理中繼承的是 React.Component，反向繼承中繼承的是傳入的組件 WrappedComponent。

反向繼承可以用來做什么：

1.操作 state

高階組件中可以讀取、編輯和刪除WrappedComponent組件實例中的state。甚至可以增加更多的state項，但是非常不建議這么做因為這可能會導(dǎo)致state難以維護及管理。

function withLogging(WrappedComponent) {    
    return class extends WrappedComponent {    
        render() {    
            return (    
                <div>;    
                    <h2>;Debugger Component Logging...<h2>;    
                    <p>;state:<p>;    
                    <pre>;{JSON.stringify(this.state, null, 4)}<pre>;    
                    <p>props:<p>;    
                    <pre>{JSON.stringify(this.props, null, 4)}<pre>;    
                    {super.render()}    
                <div>;    
            );    
        }    
    };    
}

2.渲染劫持（Render Highjacking）

條件渲染通過 props.isLoading 這個條件來判斷渲染哪個組件。

修改由 render() 輸出的 React 元素樹

為什么 React 元素有一個 $$typeof 屬性

目的是為了防止 XSS 攻擊。因為 Synbol 無法被序列化，所以 React 可以通過有沒有 $$typeof 屬性來斷出當前的 element 對象是從數(shù)據(jù)庫來的還是自己生成的。

• 如果沒有 $$typeof 這個屬性，react 會拒絕處理該元素。
• 在 React 的古老版本中，下面的寫法會出現(xiàn) XSS 攻擊：

// 服務(wù)端允許用戶存儲 JSON
let expectedTextButGotJSON = {
  type: 'div',
  props: {
    dangerouslySetInnerHTML: {
      __html: '/* 把你想的擱著 */'
    },
  },
  // ...
};
let message = { text: expectedTextButGotJSON };

// React 0.13 中有風(fēng)險
<p>
  {message.text}
</p>

react-router4的核心

• 路由變成了組件
• 分散到各個頁面，不需要配置 比如<link> <route></route>

React 設(shè)計思路，它的理念是什么？

（1）編寫簡單直觀的代碼

React最大的價值不是高性能的虛擬DOM、封裝的事件機制、服務(wù)器端渲染，而是聲明式的直觀的編碼方式。react文檔第一條就是聲明式，React 使創(chuàng)建交互式 UI 變得輕而易舉。為應(yīng)用的每一個狀態(tài)設(shè)計簡潔的視圖，當數(shù)據(jù)改變時 React 能有效地更新并正確地渲染組件。 以聲明式編寫 UI，可以讓代碼更加可靠，且方便調(diào)試。

（2）簡化可復(fù)用的組件

React框架里面使用了簡化的組件模型，但更徹底地使用了組件化的概念。React將整個UI上的每一個功能模塊定義成組件，然后將小的組件通過組合或者嵌套的方式構(gòu)成更大的組件。React的組件具有如下的特性∶

• 可組合：簡單組件可以組合為復(fù)雜的組件
• 可重用：每個組件都是獨立的，可以被多個組件使用
• 可維護：和組件相關(guān)的邏輯和UI都封裝在了組件的內(nèi)部，方便維護
• 可測試：因為組件的獨立性，測試組件就變得方便很多。

（3) Virtual DOM

真實頁面對應(yīng)一個 DOM 樹。在傳統(tǒng)頁面的開發(fā)模式中，每次需要更新頁面時，都要手動操作 DOM 來進行更新。 DOM 操作非常昂貴。在前端開發(fā)中，性能消耗最大的就是 DOM 操作，而且這部分代碼會讓整體項目的代碼變得難 以維護。React 把真實 DOM 樹轉(zhuǎn)換成 JavaScript 對象樹，也就是 Virtual DOM，每次數(shù)據(jù)更新后，重新計算 Virtual DOM，并和上一次生成的 Virtual DOM 做對比，對發(fā)生變化的部分做批量更新。React 也提供了直觀的 shouldComponentUpdate 生命周期回調(diào)，來減少數(shù)據(jù)變化后不必要的 Virtual DOM 對比過程，以保證性能。

（4）函數(shù)式編程

React 把過去不斷重復(fù)構(gòu)建 UI 的過程抽象成了組件，且在給定參數(shù)的情況下約定渲染對應(yīng)的 UI 界面。React 能充分利用很多函數(shù)式方法去減少冗余代碼。此外，由于它本身就是簡單函數(shù)，所以易于測試。

（5）一次學(xué)習(xí)，隨處編寫

無論現(xiàn)在正在使用什么技術(shù)棧，都可以隨時引入 React來開發(fā)新特性，而不需要重寫現(xiàn)有代碼。

React 還可以使用 Node 進行服務(wù)器渲染，或使用 React Native 開發(fā)原生移動應(yīng)用。因為 React 組件可以映射為對應(yīng)的原生控件。在輸出的時候，是輸出 Web DOM，還是 Android 控件，還是 iOS 控件，就由平臺本身決定了。所以，react很方便和其他平臺集成

react組件的劃分業(yè)務(wù)組件技術(shù)組件？

• 根據(jù)組件的職責(zé)通常把組件分為UI組件和容器組件。
• UI 組件負責(zé) UI 的呈現(xiàn)，容器組件負責(zé)管理數(shù)據(jù)和邏輯。
• 兩者通過React-Redux 提供connect方法聯(lián)系起來

React中的setState和replaceState的區(qū)別是什么？

（1）setState() setState()用于設(shè)置狀態(tài)對象，其語法如下：

setState(object nextState[, function callback])

• nextState，將要設(shè)置的新狀態(tài)，該狀態(tài)會和當前的state合并
• callback，可選參數(shù)，回調(diào)函數(shù)。該函數(shù)會在setState設(shè)置成功，且組件重新渲染后調(diào)用。

合并nextState和當前state，并重新渲染組件。setState是React事件處理函數(shù)中和請求回調(diào)函數(shù)中觸發(fā)UI更新的主要方法。

（2）replaceState() replaceState()方法與setState()類似，但是方法只會保留nextState中狀態(tài)，原state不在nextState中的狀態(tài)都會被刪除。其語法如下：

replaceState(object nextState[, function callback])

• nextState，將要設(shè)置的新狀態(tài)，該狀態(tài)會替換當前的state。
• callback，可選參數(shù)，回調(diào)函數(shù)。該函數(shù)會在replaceState設(shè)置成功，且組件重新渲染后調(diào)用。

總結(jié)： setState 是修改其中的部分狀態(tài)，相當于 Object.assign，只是覆蓋，不會減少原來的狀態(tài)。而replaceState 是完全替換原來的狀態(tài)，相當于賦值，將原來的 state 替換為另一個對象，如果新狀態(tài)屬性減少，那么 state 中就沒有這個狀態(tài)了。

React 中的 useState() 是什么？

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

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

useState 是一個內(nèi)置的 React Hook。useState(0) 返回一個元組，其中第一個參數(shù)count是計數(shù)器的當前狀態(tài)，setCounter 提供更新計數(shù)器狀態(tài)的方法。
咱們可以在任何地方使用setCounter方法更新計數(shù)狀態(tài)-在這種情況下，咱們在setCount函數(shù)內(nèi)部使用它可以做更多的事情，使用 Hooks，能夠使咱們的代碼保持更多功能，還可以避免過多使用基于類的組件。

react 的渲染過程中，兄弟節(jié)點之間是怎么處理的？也就是key值不一樣的時候

通常我們輸出節(jié)點的時候都是map一個數(shù)組然后返回一個ReactNode，為了方便react內(nèi)部進行優(yōu)化，我們必須給每一個reactNode添加key，這個key prop在設(shè)計值處不是給開發(fā)者用的，而是給react用的，大概的作用就是給每一個reactNode添加一個身份標識，方便react進行識別，在重渲染過程中，如果key一樣，若組件屬性有所變化，則react只更新組件對應(yīng)的屬性；沒有變化則不更新，如果key不一樣，則react先銷毀該組件，然后重新創(chuàng)建該組件

React中怎么檢驗props？驗證props的目的是什么？

React為我們提供了PropTypes以供驗證使用。當我們向Props傳入的數(shù)據(jù)無效（向Props傳入的數(shù)據(jù)類型和驗證的數(shù)據(jù)類型不符）就會在控制臺發(fā)出警告信息。它可以避免隨著應(yīng)用越來越復(fù)雜從而出現(xiàn)的問題。并且，它還可以讓程序變得更易讀。

import PropTypes from 'prop-types';
class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};

當然，如果項目匯中使用了TypeScript，那么就可以不用PropTypes來校驗，而使用TypeScript定義接口來校驗props。

什么是純函數(shù)？

純函數(shù)是不依賴并且不會在其作用域之外修改變量狀態(tài)的函數(shù)。本質(zhì)上，純函數(shù)始終在給定相同參數(shù)的情況下返回相同結(jié)果。

對有狀態(tài)組件和無狀態(tài)組件的理解及使用場景

（1）有狀態(tài)組件

特點：

• 是類組件
• 有繼承
• 可以使用this
• 可以使用react的生命周期
• 使用較多，容易頻繁觸發(fā)生命周期鉤子函數(shù)，影響性能
• 內(nèi)部使用 state，維護自身狀態(tài)的變化，有狀態(tài)組件根據(jù)外部組件傳入的 props 和自身的 state進行渲染。

使用場景：

• 需要使用到狀態(tài)的。
• 需要使用狀態(tài)操作組件的（無狀態(tài)組件的也可以實現(xiàn)新版本react hooks也可實現(xiàn)）

總結(jié)： 類組件可以維護自身的狀態(tài)變量，即組件的 state ，類組件還有不同的生命周期方法，可以讓開發(fā)者能夠在組件的不同階段（掛載、更新、卸載），對組件做更多的控制。類組件則既可以充當無狀態(tài)組件，也可以充當有狀態(tài)組件。當一個類組件不需要管理自身狀態(tài)時，也可稱為無狀態(tài)組件。

（2）無狀態(tài)組件 特點：

• 不依賴自身的狀態(tài)state
• 可以是類組件或者函數(shù)組件。
• 可以完全避免使用 this 關(guān)鍵字。（由于使用的是箭頭函數(shù)事件無需綁定）
• 有更高的性能。當不需要使用生命周期鉤子時，應(yīng)該首先使用無狀態(tài)函數(shù)組件
• 組件內(nèi)部不維護 state ，只根據(jù)外部組件傳入的 props 進行渲染的組件，當 props 改變時，組件重新渲染。

使用場景：

• 組件不需要管理 state，純展示

優(yōu)點：

• 簡化代碼、專注于 render
• 組件不需要被實例化，無生命周期，提升性能。 輸出（渲染）只取決于輸入（屬性），無副作用
• 視圖和數(shù)據(jù)的解耦分離

缺點：

• 無法使用 ref
• 無生命周期方法
• 無法控制組件的重渲染，因為無法使用shouldComponentUpdate 方法，當組件接受到新的屬性時則會重渲染

總結(jié)： 組件內(nèi)部狀態(tài)且與外部無關(guān)的組件，可以考慮用狀態(tài)組件，這樣狀態(tài)樹就不會過于復(fù)雜，易于理解和管理。當一個組件不需要管理自身狀態(tài)時，也就是無狀態(tài)組件，應(yīng)該優(yōu)先設(shè)計為函數(shù)組件。比如自定義的 <Button/>、 <Input /> 等組件。

React如何獲取組件對應(yīng)的DOM元素？

可以用ref來獲取某個子節(jié)點的實例，然后通過當前class組件實例的一些特定屬性來直接獲取子節(jié)點實例。ref有三種實現(xiàn)方法:

• 字符串格式：字符串格式，這是React16版本之前用得最多的，例如：<p ref="info">span</p>

• 函數(shù)格式：ref對應(yīng)一個方法，該方法有一個參數(shù)，也就是對應(yīng)的節(jié)點實例，例如：<p ref={ele => this.info = ele}></p>

• createRef方法：React 16提供的一個API，使用React.createRef()來實現(xiàn) 　　　　　　

React Portal 有哪些使用場景

• 在以前， react 中所有的組件都會位于 #app 下，而使用 Portals 提供了一種脫離 #app 的組件
• 因此 Portals 適合脫離文檔流(out of flow) 的組件，特別是 position: absolute 與 position: fixed的組件。比如模態(tài)框，通知，警告，goTop 等。

以下是官方一個模態(tài)框的示例，可以在以下地址中測試效果

<html>
  <body>
    <div id="app"></div>
    <div id="modal"></div>
    <div id="gotop"></div>
    <div id="alert"></div>
  </body>
</html>

const modalRoot = document.getElementById('modal');

class Modal extends React.Component {
  constructor(props) {
    super(props);
    this.el = document.createElement('div');
  }

  componentDidMount() {
    modalRoot.appendChild(this.el);
  }

  componentWillUnmount() {
    modalRoot.removeChild(this.el);
  }

  render() {
    return ReactDOM.createPortal(
      this.props.children,
      this.el,
    );
  }
}

React Hooks當中的useEffect是如何區(qū)分生命周期鉤子的

useEffect可以看成是componentDidMount，componentDidUpdate和componentWillUnmount三者的結(jié)合。useEffect(callback, [source])接收兩個參數(shù)，調(diào)用方式如下

useEffect(() => {
   console.log('mounted');

   return () => {
       console.log('willUnmount');
   }
 }, [source]);

生命周期函數(shù)的調(diào)用主要是通過第二個參數(shù)[source]來進行控制，有如下幾種情況：

• [source]參數(shù)不傳時，則每次都會優(yōu)先調(diào)用上次保存的函數(shù)中返回的那個函數(shù)，然后再調(diào)用外部那個函數(shù)；
• [source]參數(shù)傳[]時，則外部的函數(shù)只會在初始化時調(diào)用一次，返回的那個函數(shù)也只會最終在組件卸載時調(diào)用一次；
• [source]參數(shù)有值時，則只會監(jiān)聽到數(shù)組中的值發(fā)生變化后才優(yōu)先調(diào)用返回的那個函數(shù)，再調(diào)用外部的函數(shù)。

到此這篇關(guān)于前端面試題之必會react面試題的文章就介紹到這了,更多相關(guān)前端react面試題內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論