用八二法則寫 custom react-hooks

根據八二法則,只需要兩成的功就能滿足八成的事,那我們來用兩成的 built-in hooks 來封裝八成我們會用到的 custom hooks 吧!

寫在文前

內建的 hooks

https://zh-hant.reactjs.org/docs/hooks-reference.html

useState & useEffect 在幹嘛?

A trivial component use hook

會這兩個 hook 還能幹嘛?

注意 L27,comparedArray 依然是 [] ,所以只會在 mounted 時 attach , unmounted detach event。
注意 L78 ,comparedArray 依然是 [] ,所以只會在 mounted 時 attach , unmounted detach event。

useRef

function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
// `current` points to the mounted text input element
inputEl.current.focus();
};
return (
<>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</>
);
}

繼續我們的 code reviewing 之旅吧

ref: useThrottle docs

尾聲

If any interest, 👉 https://realdennis.me.

If any interest, 👉 https://realdennis.me.