在項目中的更換 React Hooks 注意事項

React 官方有說建議使用Hooks來管理你的項目，不過React 也說過不會放棄Class，網上說了一堆Hooks的說法。但是都是複製粘貼居多。

Hooks出了好一段時間了，我今天才去了解，谷歌上也給出了不少解決方案了。

我先說說爲何推薦使用Hooks？

其實hooks的這種寫法也不是很新鮮的事，早在antd的官方文檔(相似hooks的組件寫法)，哪裏的文檔案例就不是咱們通常人用的class寫法，致使我不少時候都須要再改寫一次。如今的文檔已經由另外一我的管理了吧寫法都改回了Class寫法。

緣由很簡單，由於寫代碼寫少了不少。沒有this,沒有生命週期，不須要.bind(this)，就這麼簡單。

在React Hooks 裏面咱們只需記住兩個經常使用的方法便可。useState,useEffect。用來管理自身狀態使用的。

useState 看就知道使用狀態，只是和之前的寫法有出入的是

const [state,setState] = useState(defaultValue);
複製代碼

你要相似Get Set的東西給定義好。

useEffect 你能夠簡單的當作 componentDidMount、componentDidUpdate、componentWillUnmount這樣一個順序的生命週期結合版。

上面的東西就不說了，本身百度或者谷歌，網上一堆那個計算器的例子。

React-Router 在Hooks 裏面的使用

因爲Hooks沒有this這個概念，因此之前使用的this.props.history.push()和this.props.history.goBack() 這些都沒法使用了這類型的JS跳轉。

在這裏咱們須要一個第三方的庫use-react-router

import useReactRouter from 'use-react-router';
const {history,location,match} = useReactRouter();
history.goBack()
history.push('')
複製代碼

其餘的Router用法和Route的如出一轍,沒有改變。

Reducers 狀態管理

這個確定是每一個React 都關心的一個點

store.js

import {createStore} from 'redux';
import reducer from './reducers';

export const store  = createStore(reducer);
複製代碼

那reducers.js有什麼呢？

const initialState = {
    counter: 0
}

export default function reducer(state = initialState,action){
    switch(action.type){
        case "INCREMENT":
            return {counter: state.counter+1}
        case "DECREMENT":
            return {counter: state.counter-1}
        default:
            return state;
    }
}
複製代碼

若是使用react-redux

只要將component（也就是Counter）放在Provider以內，就能夠在Counter裏面讀取Redux Store。 再用connect把Counter串在一塊兒才能把store傳抵。

在Hooks建議使用 Redux-React-Hooks

import * as React from 'react';
import {StoreContext} from 'redux-react-hook';
import ReactDOM from "react-dom";
import {store} from './store';
import Counter from './Counter';

ReactDOM.render(
  <StoreContext.Provider value={store}>
      <Counter name="Sara" />
  </StoreContext.Provider>, 
  document.getElementById("root")
);
複製代碼

基本上除了Provider一個component及其props須要更改外，其餘皆與react-redux的例子無異。

最大的更動，在Counter.js就能夠看到，因爲redux-react-hooks提供了useMappedState及useDispatch，鏈接Counter的代碼能夠大大簡化。

import * as React from 'react';
import "./styles.css";
import {useMappedState,useDispatch} from 'redux-react-hook';

export default function Counter(props) {

    const counter = useMappedState(state=> state.counter);
    
    const dispatch = useDispatch();
    return (
        <div>
            <h1>
                Hello, {props.name}
                {counter} times
            </h1>
            <div>
                <button onClick={()=>dispatch({type:"INCREMENT"})}>Increment</button>
                <button onClick={()=>dispatch({type:"DECREMENT"})}>Decrement</button>
            </div>
        </div>
    );
}
複製代碼

一個useMappedState，就扮演了mapStateToProps的角色，使用useDispatch，更能夠直接於部件裏使用dispatch，無需任何特殊函數。其中一個更明顯的好處，在於Counter的props沒有依賴任何Redux的功能，所以要寫單元測試（Unit testing）就更爲簡單。

Hooks代碼整體上會簡潔不少！！可讀性也很樂觀