使用：在不編寫class組件的情況下使用
useState
import React, { useState } from 'react';
function Example() {
// 聲明一個(gè)新的叫做 “count” 的 state 變量,初始值為 0
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
useEffect / uselayoutEffec
1.1 useEffect: 在整個(gè)頁(yè)面渲染完成才會(huì)調(diào)用的代碼
import React, { useEffect } from 'react';
// 清除 effect
function Example() {
useEffect(() => {
const subscription = props.source.subscribe();
return () => {
// 清除訂閱
subscription.unsubscribe();
};
});
return (
<div>
<p>uselayoutEffec</p>
</div>
);
}
// effect 的條件執(zhí)行
function Example() {
useEffect(() => {
const subscription = props.source.subscribe();
return () => {
subscription.unsubscribe();
};
}, [props.source]); // 此時(shí)屈梁，只有當(dāng) props.source 改變后才會(huì)重新創(chuàng)建訂閱方妖。
});
return (
<div>
<p>uselayoutEffec</p>
</div>
);
}
2.1 uselayoutEffec：和原來的 componentDidmount & componentDidUpdate 一致锐借，在react完成Dom更新馬上同步調(diào)用的代碼腕扶，會(huì)阻塞頁(yè)面渲染
useCallback / useMemo
作用：防止因?yàn)榻M件重新渲染双仍，導(dǎo)致方法被重新創(chuàng)建囚枪，起到緩存的作用聊替，只有當(dāng)?shù)诙€(gè)參數(shù)變化了悦析，才重新聲明一次；
1.1 useCallback：返回一個(gè) memoized 回調(diào)函數(shù)
import React, { useCallback} from 'react';
function Example() {
const memoizedCallback = useCallback(() => {
doSomething(a, b);
}, [a, b]);
render (
<div onClick={ () => memoizedCallback() }></div>
)
}
1.2 useMemo: 返回一個(gè) memoized 值
useCallback(fn, deps) 相當(dāng)于 useMemo(() => fn, deps)
useRef(保存引用值)
說明：useRef 返回一個(gè)可變的 ref 對(duì)象司光，其 .current 屬性被初始化為傳入的參數(shù)（initialValue）。返回的 ref 對(duì)象在組件的整個(gè)生命周期內(nèi)持續(xù)存在
import React, { useRef } from 'react';
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
// `current` 指向已掛載到 DOM 上的文本輸入元素
inputEl.current.focus();
};
return (
<>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</>
);
}
