ReactHook快速上車

react16.8開始內建了10個hook，核心是2個：

usestate

有狀態元件寫法：

class example extends react.component ;
}render()  times
this.setstate()}>
click me);}
}

無狀態元件寫法：

const example = props =>  = props;
return (
you clicked  times
click me
)}

hooks是有狀態的函式：

import  from 'react';
const example = () =>  times
setcount(count + 1)}>
click me
)}

注意，usestate生成的setter在更新state的時候不會合併：

const [data, setdata] = usestate();   // name沒有被使用，應該分開宣告
useeffect(() =>  -> 
setdata()
})

在我們的純函式元件裡，每個usestate都會生產一對state和statesetter，我們無需考慮更多的狀態樹的設計和元件的劃分設計，邏輯**可以直接從根元件寫起。

我們應用的發展途徑大致分為以下3個階段，基於hook開發過程將更有彈性：

中期gank：當元件的狀態逐漸變得多起來時，我們可以很輕鬆地將狀態的更新交給reducer來管理

後期團戰：不光狀態多了，狀態的邏輯也越來越複雜的時候，我們可以幾乎0成本的將繁雜的狀態邏輯**抽離成自定義hook解決問題

不同於真正的redux，在實際應用中，hook帶來了一種更加靈活和純粹的模式。現在我們可以用10行**實現乙個全域性的redux，也可以用2行**隨時隨地實現乙個區域性的redux：

10行**實現乙個全域性的redux：

import react from 'react';
const store = react.createcontext(null);
export const initialstate = ;
export function reducer(state, action) ;
default: throw new error('unexpected action');
}}export default store;

provider根元件掛上：

import react,  from 'react';
import store,  from './store';
const [state, dispatch] = usereducer(reducer, initialstate);
return (
)}

子元件呼叫：

import react,  from 'react';
import store from './store';
function child()  = usecontext(store);
}

隨時隨地的乙個區域性redux：

import react,  from 'react';
const initialstate = ;
function reducer(state, action) ;
default: throw new error('unexpected action');
}}function component()

當我們想在兩個函式之間共享邏輯時，我們會把它提取到第三個函式中。而元件和 hook 都是函式，所以也同樣適用這種方式。不同的是，hook 是有狀態的函式，它能實現以往純函式所不能做到的更高階別的復用——狀態邏輯的復用。

component寫法：

constructor(props) ;

} componentdidmount() );

});service.getinitialname().then(data => );

});} componentwillunmount() );

} addcount = () => );

};handlenamechange = name => );

};render() = this.state;

return (

you clicked times

click me

);}}

hook寫法：

function usecount(initialvalue) );
return () => );
};}, );
function addcount() 
return ;
}function usename(initialvalue) );
}, );
function handlenamechange(value) 
return ;
}  const  = usecount(0);
const  = usename();
return (
you clicked  times
click me
);};

如上，使用component的寫法裡，count和name，還有與之相關的一票兒邏輯，散落在元件的生命週期和方法裡。雖然我們可以將元件的state和變更action抽成公共的，但涉及到***的action，到最終還是繞不開元件的生命週期。但乙個元件的生命週期只有一套，不可避免的會出現一些完全不相干的邏輯寫在一起。如此一來，便無法實現完全的狀態邏輯復用。

我們再看看使用hook的寫法，我們將count相關的邏輯和name相關的邏輯通過自定義hook，封裝在獨立且封閉的邏輯單元裡。以往class元件的生命週期在這裡不復存在。生命週期是和ui強耦合的乙個概念，雖然易於理解，但它天然距離資料很遙遠。而hook以一種類似rxjs模式的資料流訂閱實現了元件的***封裝，這樣的好處就是我們只需要關心資料。所以hook所帶來的，絕不僅僅只是簡化了state的定義與包裝。

自定義hook實現了狀態邏輯與ui分離，通過合理抽象自定義hook，能夠實現非常高階別的業務邏輯抽象復用

let hooks, i;
function usestate() 
// 第一次渲染
hooks.push(...);
}// 準備渲染
i = -1;
hooks = fiber.hooks || ;
// 呼叫元件
component();
// 快取 hooks 的狀態
fiber.hooks = hooks;

本文由部落格一文多發平台 openwrite 發布！

ReactHook快速上車

React Hook基本使用

EventBus上車指南

React Hook 的簡單使用

ReactHook快速上車

React Hook基本使用

EventBus上車指南

React Hook 的簡單使用

相關推薦