React16版本Hook鉤子函式的簡單理解

用於返回元件的初始化state並且返回更新方法，它只關心你傳入的初始值，可以包裝一下更便於抽出邏輯，元件只用於渲染。usestate返回的第乙個引數就是你initialstate傳入的值，也只是這個值，其他的不會影響這個值（如下面**的注釋）；第二個引數是更新該值的方法，可以看到precount返回的也只是乙個count值。

//包裝一下
function
usemystate
(initialstate=1)
]}export
default
function
login
(props)
>
+<
/button>
<
/div>
}

但是usestate()直接傳值這種形式，每次介面渲染都會重新建立這個初始狀態，所以我們需要傳入個匿名函式即可。

const
[_state, _setstate]
=usestate((
)=>initialstate)
;

替代componentdidmount、componentdidupdate和componentwillunmount，使相應的繫結函式變得更加輕鬆。要想只在mount上執行並在unmount上清理，update上不做繫結，則第二引數傳入空陣列；第二引數傳入值則react內部會判斷之前值和傳入值的變化去重新監聽。（注意其實document的監聽是無法取消監聽的，應該監聽其他dom）

function
usemyeffect
(count)
times`
; console.
log(
11111111
,'監聽'
) document.
addeventlistener
('mousedown'
,(e)
=>
)return()
=>)}
;},[
]);}
//元件中引用並新增
usemyeffect
(count)
//

顯示當前context的值,且context改變時，該值也會更新

function
usemycontext
(defaultvalue)
const mycontext =
usemycontext()
; console.
log(
usecontext
(mycontext)
)//列印：

一般我們這樣去使用它：

const todosome = react.
createcontext
(null);
function
doother()
return
(>
/>
<
/todosome.provider>);
//deeptree
const doother =
usecontext
(todosome)
;

usecallback(fn, inputs)相當於usememo(() => fn, inputs)。二者有點相似有放在一起說了，都是返回乙個渲染dom；usecallback返回的是乙個函式，usememo直接就是dom。第二個陣列引數用來判斷是否重新渲染，相當於之前的shouldcomponentupdate操作，這個判斷是用「object.is」來判斷的,用+0和-0測試也會執行重新整理。

function
usemycallback()
<
/div>},
[a, b])}
function
usemymeno()
<
/div>},
[a, b])}
//元件中
let[ab,setab]
=usestate()
let cbdom =
usemycallback
(ab)
; console.
log(cbdom)
//ƒ () 
cbdom =
cbdom()
//, …}
let mmdom =
usemymeno
(ab)
console.
log(mmdom)
//, …}
return
註冊}}
>doab<
/button>
<
/div>

別被他的名字所欺騙，以為只是配合ref使用的，他是乙個該函式元件的例項變數（內部方法共享的變數），類似於之前class元件的this.xx，不僅可以作為ref的例項，還可以是任何變數的例項。

//class寫法
constructor()
componentdidmount()
);}componentwillunmount()
//函式元件寫法
function
timer()
);intervalref.current = id;
return()
=>;}
);// ...
}

這樣去建立useref，每次渲染時也都會重新建立，如果你想避免這種情況，請使用下面這種形式。

const ref =
useref
(new
intersectionobserver
(onintersect)
);

Titanium Mobile 1 6版本發布

強大的titanium mobile 23日發布了新的1.6版本。新版本為ios和android平台帶來了新的facebook api，並且為稍後發布的titanium plus模組打下了基礎。以下是三個方面的主要改進 1 新的facebook api 1 facebook oauth 2.0認證的...

React16版本Hook鉤子函式的簡單理解

Titanium Mobile 1 6版本發布

Titanium Mobile 1 6版本發布

Titanium Mobile 1 6版本發布

相關推薦