React Hooks 初步嘗試

2021-09-24 03:26:46 字數 2356 閱讀 9644

1. usestate

// 返回乙個 state,以及更新 state 的函式。

const [state, setstate] = usestate(initialstate);

/* 如果初始 state 需要通過複雜計算獲得,則可以傳入乙個函式,

在函式中計算並返回初始的 state,此函式只在初始渲染時被呼叫:*/

const [state, setstate] = usestate(() => );

2. useeffect

// 接收乙個包含命令式、且可能有*****的函式。

// 如: 改變 dom、新增訂閱、設定定時器、記錄日誌以及執行其他包含***的操作

// 雖然 useeffect 會在瀏覽器繪製後延遲執行,但會保證在任何新的渲染前執行

// 使用者可見的 dom 變更,可使用 uselayouteffect

useeffect(didupdate);

// **示例

useeffect(

() => ;

},// 這裡是限制當 props.source改變時,才執行方法體的方法

[props.source],

);

3. usecontext

// 接收乙個 context 物件(react.createcontext 的返回值)並返回該 context 的當前值。

/* usecontext(mycontext) 只是讓你能夠讀取 context 的值以及訂閱 context 的變化。

你仍然需要在上層元件樹中使用 來為下層元件提供 context。*/

const value = usecontext(mycontext);

1. usereducer

/* 它接收乙個形如 (state, action) => newstate 的 reducer,

並返回當前的 state 以及與其配套的 dispatch 方法。*/

const [state, dispatch] = usereducer(reducer, initialarg, init);

// 將 init 函式作為 usereducer 的第三個引數傳入,這樣初始 state 將被設定為 init(initialarg)。

function init(initialcount) ;

}function reducer(state, action) ;

case 'decrement':

return ;

case 'reset':

return init(action.payload);

default:

throw new error();

}}function counter()

2. usecallback

3. usememo

// 把「建立」函式和依賴項陣列作為引數傳入 usememo,它僅會在某個依賴項改變時才重新計算 memoized 值。

// 這種優化有助於避免在每次渲染時都進行高開銷的計算。

// (先編寫在沒有 usememo 的情況下也可以執行的** —— 之後再在你的**中新增 usememo,以達到優化效能的目的。)

const memoizedvalue = usememo(() => computeexpensivevalue(a, b), [a, b]);

4. useref

/* useref 返回乙個可變的 ref 物件,其 .current 屬性被初始化為傳入的引數(initialvalue)。

返回的 ref 物件在元件的整個生命週期內保持不變。*/

const refcontainer = useref(initialvalue);

5. useimperativehandle

/* useimperativehandle 可以讓你在使用 ref 時自定義暴露給父元件的例項值。

在大多數情況下,應當避免使用 ref 這樣的命令式**。

useimperativehandle 應當與 forwardref 一起使用:*/

useimperativehandle(ref, createhandle, [deps])

function fancyinput(props, ref) 

}));

return ;

}fancyinput = forwardref(fancyinput);

6. uselayouteffect

7. usedebu**alue

// usedebu**alue 可用於在 react 開發者工具中顯示自定義 hook 的標籤。

usedebu**alue(value)

gearman初步嘗試

網上安裝使用的資料已經一堆了 這個也給大家彙總一下,比較高階的幾個。在乙個別人安裝的gearman系統下,進入root許可權 搜尋gearman所在路徑 whereis gearman 得到gearman usr bin gearman usr share man man1 gearman.1.gz...

Docker Remote API 初步嘗試

1 首先是安裝 docker 這裡就不說了 2 檢視一下 docker api的版本 sudo docker version client version 1.10.2 api version 1.22 go version go1.5.3 git commit c3959b1 built mon ...

GTD初步嘗試

最近在工作中總會出現一些問題 事情太多顧此失彼,解決完突發事件,結果安排好的內容都沒有王朝 事情處理雜亂無章,無法確定事件的輕重緩急,沒有優先順序的話,領導總是覺得對他來說很重要的事情我沒有花心思完成 例行公事 長期拖延,我是乙個有嚴重拖延症和逃避情緒的人,一旦週報忘記交的話我總是會一直拖到月底的最...