React Hooks

此次版本，讓我最感興趣的就是React Hooks。具體來說，React Hooks是前端的技術，但是React Native也支持React Hooks，可以說FaceBook是在模糊React和React Native的界限，未來這二者的區別將越來越小。

所謂React Hooks，就是在 react 函數組件中，也可以使用類組件（classes components）的 state 和 組件生命周期，而不需要在 mixin、 函數組件、HOC組件和 render props 之間來回切換，使得函數組件的功能更加實在，更加方便我們在業務中實現業務邏輯代碼的分離和組件的復用。

事實上，設計React Hooks是為了解決以下幾個問題：

• 很難復用邏輯（只能用HOC，或者render props），會導致組件樹層級很深；
• 會產生巨大的組件（指很多代碼必須寫在類裡面）；
• 類組件很難理解，比如方法需要bind，this指向不明確。
• ...

並且，React Hooks確實有著明顯的優勢：

• 可以更好的減少代碼量；
• 同時降低代碼在生命周期執行過程中造成的阻塞；
• 自定義 Hooks 可以在一定程度上解耦，增加復用，減少嵌套；
• 函數式編程的風格讓函數功能獨立，代碼簡潔更好閱讀。

具體來說，在React Native新版本中，React Hooks 提供了以下幾個最常用默認介面： useState：在函數中快速添加狀態； useEffect：快速添加生命周期處理； useImperativeHandle：快速對外暴露介面

借用React Hooks，開發者可以在一定程度上節省大量的代碼，並且提供清晰的狀態管理邏輯。例如：

import React, {Component, useReducer, useRef, useImperativeHandle, forwardRef} from react;
import {Text, View, TouchableOpacity,} from react-native;

const initialState = {count: 0};

function reducer(state, action) {
switch (action.type) {
case reset:
return initialState;
case increment:
return {count: state.count + 1};
case decrement:
return {count: state.count - 1};
default:
return state;
}
}

export function DemoCounter({initialCount}) {
const [state, dispatch] = useReducer(reducer, {count: initialCount});
return (
<View>
<Text>Count: {state.count}</Text>
<TouchableOpacity onPress={() => dispatch({type: reset})}>
<Text>Reset</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => dispatch({type: increment})}>
<Text>+</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => dispatch({type: decrement})}>
<Text>-</Text>
</TouchableOpacity>
</View>
)
}

由於Hooks 內部利用了數組來實現狀態數據的順序更新，所以使用Hooks 時不能在循環或者條件判斷中使用。因為 Hooks 內的數組每次都是順序的調用的，如果在條件判斷中打亂了順序，將導致游標無法匹配到正確的數據，所以約定了不要在 if 或者 for 中使用 useState 等行為。

由於React Hooks是一個新的內容，我對React Hook理解也不是很深入，具體可以參考 React Hooks 官網或者深入理解React Hooks。

參考： React Hooks Facebook 正在重構 React Native，將重寫大量底層 庖丁解牛！深入剖析 React Native 下一代架構重構 攜程開源RN開發框架CRN