最近前幾個月開始，新項目都開始完全使用typescript+hooks，先不說typescript吧，hooks是真的香🤣
1.更好的分離頁面和邏輯，重用邏輯的方法
現在前端項目的組件化，一般都是基於最基礎的UI組件庫（裏面也有組件的功能邏輯），加上業務邏輯，封裝一個個component，container。
組件是 UI + 邏輯的複用，但邏輯複用能力等於 0。
而在項目中，很難做到輕鬆的把 UI 和邏輯分開。(這裏的邏輯並不是簡單的能抽離的那種工具函數)。在此之前，React有Mixin（ES6Class就已經廢棄了，不談了），HOC，render props來抽離邏輯。
HOC
HOC並不是react提供的api，而是基於react特性的一種模式，常見的例子就是大家常見的react-redux中的connect函數，antd的form.create函數，HOC是一個函數，參數接受一個組件，返回一個新組件
render props
render props 我理解是平級組件之間單向依賴的一種模式，和HOC一樣也不是什麼react提供的api，也是一種模式，由React Trainning成員的一個大佬提出替代HOC的一種更好的模式。首先需要一個提供可變數據源的組件，然後給這個組件傳入一個叫render函數的props(叫啥名字都行，提出者只是想強調這是一個擁有類似render功能的props…)，特點就是這個props屬性不是對象不是簡單類型變量，就是一個函數，這個函數的參數就是希望用到可變數據源中的數據，返回結果就是一個jsx的UI結構。如果替代HOC，render的參數就可以是一個組件，react router4的withRouter即是這樣實現：
import React from 'react'
import PropTypes from 'prop-types'
import hoistStatics from 'hoist-non-react-statics'
import Route from './Route'
/**
* A public higher-order component to access the imperative API
*/
const withRouter = (Component) => {
const C = (props) => {
const { wrappedComponentRef, ...remainingProps } = props
return (
<Route render={routeComponentProps => (
<Component {...remainingProps} {...routeComponentProps} ref={wrappedComponentRef}/>
)}/>
)
}
C.displayName = `withRouter(${Component.displayName || Component.name})`
C.WrappedComponent = Component
C.propTypes = {
wrappedComponentRef: PropTypes.func
}
return hoistStatics(C, Component)
}
export default withRouter
仔細體會render props的用處和例子，可參考：1 2
hooks
HOOK是真正意義上的複用邏輯的武器。render props是把嵌套的HOC改成了一種平級傳render函數的props的方法，但是當狀態多個複用的時候，就也會變成不斷嵌套的難看的結構。這裏引用一下螞蟻的一篇文章的例子：
<WindowSize>
(size)=> (
<Mouse>
(position)=> <OurComponent size={size} mouse={position}/>
</Mouse>
)
</WindowSize>
又想監聽size又想監聽position，甚至還有scroll狀態的時候。。。
使用react的hook模式，比如react-use庫，我們只用一行代碼就解決了：
const mousePosition = useMouse(ref);
且對typescript支持更好，我們可以在use函數中做類型校注。
參考：
react-use可看相關源碼參考實現，秒啊
螞蟻金服的文章
官方react自定義hook介紹
總的來說，hook目前還算完美乾淨的結局了邏輯重用的問題，把react組件化思想又深進了一步，且把頁面與邏輯拆開也有利於代碼的長期維護啦。