React及Nextjs相關知識點小結

React及Nextjs知識點小結

函數式組件和類組件區別是什麼

一、函數式組件是用於建立無狀態的組件，組件不會被實例化，沒法訪問this中的對象，沒法訪問生命週期方法，是無反作用的，相比於類組件函數式組件代碼可讀性更好，減小了大量的冗餘代碼，能夠很方便的建立一個組件
二、類組件是用於建立有狀態的組件，該組件會被實例化，能夠訪問組件的生命週期方法

Component和PureCompoent區別是什麼

一、PureCompoent是一個更具性能的Component的版本
除了爲你提供了一個具備淺比較的shouldComponentUpdate方法，PureComponent和Component基本上徹底相二、同。當props或者state改變時，PureComponent將對props和state進行淺比較。
三、另外，Component不會比較當前和下個狀態的props和state。所以，每當shouldComponentUpdate被調用時，組件默認的會從新渲染。

屬性Props和States應該在什麼時候使用

組件私有數據時用state  外部數據傳入則用props

簡單說明React Component的生命週期

react組件的生命週期有四個階段：初始化、建立階段、運行階段和銷燬階段

一、初始化：

construct，初始化state，而且把props轉化爲state

二、建立階段：

componentWillMount，至關於 Vue 中的 created，組件將要被掛載，此時尚未開始渲染虛擬 DOM
componentDidMount，相對於 Vue 中的mounted，組件完成掛載，此時，組件已經顯示到頁面上了，一般咱們會在這裏請求ajax數據，或是操做dom改變樣式

三、運行階段

componentWillReceiveProps（注：將來17版本中將被棄用）：組件接收到一個新的props時被調用，但也有可能props沒有改變的時候也觸發，好比父組件更新致使的觸發，有時候可能須要比較props是否發生了改變，這個方法在第一次渲染時不會被調用。
shouldComponentUpdate：用於判斷組件是否須要被更新，通常在這裏作一些性能優化，減小沒必要要的渲染
componentWillUpdate（注：將來17版本中將被棄用），組件更新以前（componentshouldupdate返回true）時調用
componentDidUpdate，組件更新完成以後調用，此時頁面又被從新渲染了， state、虛擬DOM和頁面已經保持同步

四、銷燬階段

componentWillUnmount，組件卸載的時候觸發，咱們能夠在這裏作一些清除定時器的操做

新增長的鉤子函數
一、getDerivedStateFromProps(nextProps,prevState)
新的靜態getDerivedStateFromProps生命週期在組件實例化以及接收新props(只要父組件從新渲染，那麼這個props不論值是否同樣都是一個新的props)後調用。它能夠返回一個對象來更新state，或者返回null來表示新的props不須要任何state更新。
二、getSnapshotBeforeUpdate()
新的getSnapshotBeforeUpdate生命週期在更新以前被調用（例如，在DOM被更新以前）。今生命週期的返回值將做爲第三個參數傳遞給componentDidUpdate。 （這個生命週期不是常常須要的，但能夠用於在恢復期間手動保存滾動位置的狀況。）

HOC組件是什麼，舉一個合適使用HOC的例子

高階組件就是一個函數，且該函數接受一個組件做爲參數，並返回一個新的組件，是一個沒有反作用的純函數。
舉個例子，如頁面權限控制

// HOC.js
function withAdminAuth(WrappedComponent) {
    return class extends React.Component {
        state = {
            isAdmin: false,
        }
        async componentWillMount() {
            const currentRole = await getCurrentUserRole();
            this.setState({
                isAdmin: currentRole === 'Admin',
            });
        }
        render() {
            if (this.state.isAdmin) {
                return <WrappedComponent {...this.props} />;
            } else {
                return (<div>您沒有權限查看該頁面，請聯繫管理員！</div>);
            }
        }
    };
}

頁面a
// pages/page-a.js
class PageA extends React.Component {
    constructor(props) {
        super(props);
        // something here...
    }
    componentWillMount() {
        // fetching data
    }
    render() {
        // render page with data
    }
}
export default withAdminAuth(PageA);

什麼事RenderProps？舉一個合適使用RenderProps的例子

The Render Props是一種在不重複代碼的狀況下共享組件間功能的方法，Render Props模式的出現主要是爲了解決HOC所出現的問題

• 不用擔憂props命名問題，在render函數中只取須要的state
• 不會產生無用的組件加深層級
• render props模式的構建都是動態的，全部的改變都在render中觸發，能夠更好的利用組件內的生命週期。

使用場景：
Render Props對於只讀操做很是適用，如跟蹤屏幕上的滾動位置或鼠標位置

怎樣能夠知道Nextjs如今的代碼是在前端仍是後端運行

服務端和客戶端本質區別是誰來完成html內容的拼接，如是在服務器端完成的，而後返回給客戶端則是服務器端渲染，若是是客戶端來拼接頁面內容數據，則是客戶端渲染。
判斷當前頁面是客戶端仍是服務器端渲染有三種方式：
a、能夠經過查看Network請求來區分，若是是客戶端請求，Respone返回的是Json數據，不然返回的是html格式的內容數據
b、查看源代碼，若是頁面中展現的數據在源代碼中能夠看到說明是服務器端渲染，不然是客戶端渲染
c、經過 isServer 變量能夠判斷當前環境是服務端仍是客戶端

static async getInitialProps(ctx) {
const isServer =  ctx.isServer
}

簡單說明Nextjs中頁面的生命週期

Next.js爲咱們提供了一個區別於React的新生命週期——getIntialProps()，這個生命週期是脫離於React的正常生命週期的，不過咱們依然能夠在組件里正常使用react組件的各類生命週期函數。
getInitialProps ，它用於獲取並處理組件的屬性，返回組件的默認屬性。咱們能夠在該方法中請求數據，獲取頁面須要的數據並渲染返回給前端頁面。


當頁面初始化加載時，getInitialProps只會加載在服務端。只有當路由跳轉（Link組件跳轉或 API 方法跳轉）時，客戶端纔會執行getInitialProps。
注意：getInitialProps將不能使用在子組件中。只能使用在pages頁面中。

static async getInitialProps({ req, query, store }) {
store.dispatch(getPromoItemRequest())
store.dispatch(getHomePageDataRequest())
return {}
}

請說明Router，Link以及location.href在Nextjs中的區別

Router是一個路由對象，提供了route、pathname、query、push、replace等經常使用的API

<span onClick={() => Router.push('/about')}>here</span>

Link是一個組件，其實現原理是基於Router
組件默認將新 url 推入路由棧中，可使用replace屬性來防止添加新輸入

<Link href="/about" replace>
      <a>here</a>
    </Link>

location.href是Js提供的原生跳轉方式，相較於 location.href，Router和Link更加的強大和方便

請說明Link中，href和as分別表明什麼

href連接跳轉的真實路徑
as爲展示在瀏覽器上的實際路徑,是爲了裝飾 URL 做用

何時才須要使用_app.js及什麼東西須要放進_app.js

一、經過重寫_app.js文件，咱們能夠對App組件進行重構，在App組件中加入一些項目中不變的內容，好比頁面的佈局
二、設置全局公共樣式css及狀態
三、使用componentDidCatch自定義處理錯誤

Nextjs中的production ENV（NODE_ENV=production）有什麼特別

什麼事單元測試及其準則是什麼

單元測試(unittesting),是指對_軟件_中的最小可_測試單元_進行檢查和驗證
單元測試準則：

1. 保持單元測試小巧, 快速
2. 單元測試應該是全自動/非交互式的
3. 讓單元測試很容易跑起來
4. 對測試進行評估
5. 當即修正失敗的測試
6. 把測試維持在單元級別
7. 由簡入繁
8. 保持測試的獨立性
9. Keep tests close to the class being tested
10. 合理的命名測試用例
11. 只測試公有接口
12. 當作是黑盒
13. 當作是白盒
14. 芝麻函數也要測試
15. 先關注執行覆蓋率
16. 覆蓋邊界值
17. 提供一個隨機值生成器
18. 每一個特性只測一次
19. 使用顯式斷言
20. 提供反向測試
21. 代碼設計時謹記測試
22. 不要訪問預約的外部資源
23. 權衡測試成本
24. 合理安排測試優先次序
25. 爲測試失敗作好準備
26. 寫測試用例重現 bug
27. 瞭解侷限

如何提升單元測試的覆蓋率

提高代碼質量，高度的單元測試覆蓋率是最有效的手段之一使用優秀的開源單元測試框架，其覆蓋率每每很高高覆蓋體如今測試用例覆蓋public方法、函數中的if-else等邏輯、參數檢查、內部定義等。