Hook是React16.8開始新增的特性。雖然React官方文檔已經作出了針對React hooks的相關概念的講解，但是光看官方文檔是很難將hooks使用好的，在編寫hooks的過程中很容易跳進陷阱和錯誤。本文總結了5個不好的地方。
01.不需要render的場景下使用useState
在函數組件中我們可以使用useState來管理狀態，這使得對狀態的管理變得很簡單，但是也容易被濫用，我們通過下面的代碼樣例看下容易忽略的地方。
不推薦×
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
function ClickButton(props){ const [count, setCount] = setState(0) const onClickCount = () => { setCount((c) => c + 1) } const onClickRequest = () => { apiCall(count) } return ( <div> <button onClick={onClickCount}>Click</button> <button onClick={onClickRequest}>Submit</button> </div> )} |
問題所在：仔細看上面的代碼，乍一看其實也沒什么問題，點擊按鈕更新 count。但是問題也就出在這里，我們的 return 部分并沒有用到 count 狀態，而每次 setCount 都會使組件重新渲染一次，而這個渲染并不是我們需要的，多出來的渲染會使得頁面的性能變差，因此我們可以改造一下代碼，如下代碼：
推薦√
如果我們只是單純的想要一個能在組件聲明周期內保存的變量，但是變量的更新不需要組件的重新渲染，我們可以使用 useRef 鉤子。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
function ClickButton(props){ const count = useRef(0) const onClickCount = () => { count.current++ } const onClickRequest = () => { apiCall(count.current) } return ( <div> <button onClick={onClickCount}>Click</button> <button onClick={onClickRequest}>Submit</button> </div> )} |
02.使用了router.push而非link
在React SPA應用中，我們用react-router來處理路由的跳轉，我們很經常在組件中寫了一個按鈕，通過點擊按鈕的事件來處理路由的跳轉，如下代碼：
不推薦×
|
1
2
3
4
5
6
7
|
function ClickButton(props){ const history = useHistory() const onClickGo = () => { history.push('/where-page') } return <button onClick={onClickGo}>Go to where</button>} |
問題所在：盡管上述代碼可以正常工作，但是卻不符合Accessibility（易訪問性設計）的要求，此類按鈕并不會被屏幕閱讀器當作一個可以跳轉的鏈接。因此我們可以改造一下代碼，如下代碼：
推薦√
|
1
2
3
4
5
|
function ClickButton(props){ return <Link to="/next-page"> <span>Go to where</span> </Link>} |
03.通過useEffect來處理actions
有時候，我們只想在 React 更新 DOM 之后運行一些額外的代碼。比如發送網絡請求，手動變更 DOM，記錄日志。
不推薦×
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
function DataList({ onSuccess }) { const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [data, setData] = useState(null); const fetchData = () => { setLoading(true); callApi() .then((res) => setData(res)) .catch((err) => setError(err)) .finally(() => setLoading(false)); }; useEffect(() => { fetchData(); }, []); useEffect(() => { if (!loading && !error && data) { onSuccess(); } }, [loading, error, data, onSuccess]); return <div>Data: {data}</div>;} |
問題所在：上面的代碼使用了兩個useEffect ，第一個用來請求異步數據，第二個用來調用回調函數。在第一個異步請求數據成功，才會觸發第二個 useEffect 的執行，但是，我們并不能完全保證，第二個 useEffect 的依賴項完全受控于第一個 useEffect 的成功請求數據。因此我們可以改造一下代碼，如下代碼：
推薦√
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
function DataList({ onSuccess }) { const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [data, setData] = useState(null); const fetchData = () => { setLoading(true); callApi() .then((res) => { setData(res) onSuccess() }) .catch((err) => setError(err)) .finally(() => setLoading(false)); }; useEffect(() => { fetchData(); }, []); return <div>Data: {data}</div>;} |
04.單一職責組件
什么時候該把一個組件分成幾個更小的組件？如何構建組件樹？在使用基于組件的框架時，所有這些問題每天都會出現。然而，設計組件時的一個常見錯誤是將兩個用例組合成一個組件。
不推薦×
|
1
2
3
4
5
6
7
8
9
10
11
|
function Header({ menuItems }) { return ( <header> <HeaderInner menuItems={menuItems} /> </header> );}function HeaderInner({ menuItems }) { return isMobile() ? <BurgerButton menuItems={menuItems} /> : <Tabs tabData={menuItems} />;} |
問題所在：上面的代碼通過這種方法，組件HeaderInner試圖同時成為兩個不同的東西，一次做不止一件事情并不是很理想。此外，它還使得在其他地方測試或重用組件變得更加困難。因此我們可以改造一下代碼，如下代碼：
推薦√
將條件提升一級，可以更容易地看到組件的用途，并且它們只有一個職責，即<Tabs/>或<BurgerButton/>，而不是試圖同時成為兩個不同的東西。
|
1
2
3
4
5
6
7
|
function Header(props) { return ( <header> {isMobile() ? <BurgerButton menuItems={menuItems} /> : <Tabs tabData={menuItems} />} </header> )} |
05.單一職責useEffects
通過對比componentWillReceiveProps或componentDidUpdate方法，才認識到userEffect的美麗。但是沒有妥當使用useEffect也是容易出問題的。
不推薦×
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
function Example(props) { const location = useLocation(); const fetchData = () => { /* Calling the api */ }; const updateBreadcrumbs = () => { /* Updating the breadcrumbs*/ }; useEffect(() => { fetchData(); updateBreadcrumbs(); }, [location.pathname]); return ( <div> <BreadCrumbs /> </div> );} |
問題所在：上面的useEffect同時觸發了兩個副作用，但是并不都是我們需要的副作用，因此我們可以改造一下代碼，如下代碼：
推薦√
將兩個副作用從一個useEffect中分離出來。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
function Example(props) { const location = useLocation(); const fetchData = () => { /* Calling the api */ }; const updateBreadcrumbs = () => { /* Updating the breadcrumbs*/ }; useEffect(() => { fetchData(); updateBreadcrumbs(); }, [location.pathname]); return ( <div> <BreadCrumbs /> </div> );} |
參考：
Five common mistakes writing react components (with hooks) in 2020
以上就是使用hooks寫React組件需要注意的5個地方的詳細內容，更多關于hooks寫React組件的資料請關注服務器之家其它相關文章！
原文鏈接：https://juejin.cn/post/6947573426076778533
