最近看到Kent.C.Dodds大神在博客和視頻教程頻中繁提到react16.8新特性Hooks屿愚，于是想動(dòng)手體驗(yàn)一下Hooks到底有何神奇之處。
首先什么是Hooks? 詳細(xì)的介紹可以參考官方doc呛占。 經(jīng)過一些嘗試后,我感受大體上比之前的開發(fā)有一下幾點(diǎn)提升。
React 組件如果要維護(hù)狀態(tài)需要基于class寫組件懦趋，class 有一個(gè)不好理解的地方就是this晾虑，程序一不小心就會(huì)有bug。Hooks 用function也可以用組件狀態(tài)仅叫，可以有效避免this這個(gè)大坑走贪。
有經(jīng)驗(yàn)的react開發(fā)者都知道業(yè)務(wù)邏輯的重用原來都是用HOC,或者Render props模式。但這帶來了調(diào)試的問題惑芭，組件被層層嵌套就是所謂的： 包裝地獄 Wrap hell坠狡。
class組件無論對(duì)于機(jī)器和人都比function組件更難理解。
既然有那么多優(yōu)勢遂跟，接下來用一個(gè)實(shí)際例子來演示一下逃沿。
假設(shè)我們要做一個(gè)N秒鐘后自動(dòng)消失的組件。
import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
function useExpire(expireDate) {
const [shouldRender, setshouldRender] = useState(true);
useEffect(
() => {
console.log(expireDate - Date.now())
const timeoutId = setTimeout(() => {
setshouldRender(false);
}, expireDate - Date.now());
return () => {
clearTimeout(timeoutId);
};
},
[expireDate]
);
return shouldRender;
}
const One = ({ expireDate }) => {
return useExpire(expireDate) ? <h2>1秒后消息</h2> : null;
}
const Two = ({ expireDate }) => {
return useExpire(expireDate) ? <h2>2秒后消息</h2> : null;
}
const App =( )=> {
return (
<div className="App">
<h1>Hello Hooks</h1>
<One expireDate={new Date(Date.now() + 1000)} />
<Two expireDate={new Date(Date.now() + 2000)} />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />,
rootElement);
codesandbox演示地址: https://codesandbox.io/s/wkw4k757rk
另外幻锁，筆者發(fā)現(xiàn)前端社區(qū)對(duì)hooks已經(jīng)快速跟進(jìn)凯亮，出現(xiàn)了大量的hooks庫如react apollo hooks等。
有興趣可以查閱 hooks react 庫集合網(wǎng)站： https://nikgraf.github.io/react-hooks/
