前言
Hook 是 React 16.8 的新增特性。它是完全可選的，并且100%向后兼容。它可以讓你使用函數(shù)組件的方式，運(yùn)用類(lèi)組件以及 react 其他的一些特性，比如管理狀態(tài)、生命周期鉤子等。從概念上講，React 組件一直更像是函數(shù)。而 Hook 則擁抱了函數(shù)，同時(shí)也沒(méi)有犧牲 React 的精神原則。
優(yōu)點(diǎn)：
1、代碼可讀性更強(qiáng)，原本同一塊功能的代碼邏輯被拆分在了不同的生命周期函數(shù)中，容易使開(kāi)發(fā)者不利于維護(hù)和迭代，通過(guò) React Hooks 可以將功能代碼聚合，方便閱讀維護(hù)。例如，每個(gè)生命周期中常常會(huì)包含一些不相關(guān)的邏輯。一般我們都會(huì)在 componentDidMount 和 componentDidUpdate 中獲取數(shù)據(jù)。但是，同一個(gè) componentDidMount 中可能也包含很多其它的邏輯，如設(shè)置事件監(jiān)聽(tīng)，而之后需在 componentWillUnmount 中清除。相互關(guān)聯(lián)且需要對(duì)照修改的代碼被進(jìn)行了拆分，而完全不相關(guān)的代碼卻在同一個(gè)方法中組合在一起。如此很容易產(chǎn)生 bug，并且導(dǎo)致邏輯不一致。
2、組件樹(shù)層級(jí)變淺。在原本的代碼中，我們經(jīng)常使用 HOC/render props 等方式來(lái)復(fù)用組件的狀態(tài)，增強(qiáng)功能等，無(wú)疑增加了組件樹(shù)層數(shù)及渲染，在 React DevTools 中觀(guān)察過(guò) React 應(yīng)用，你會(huì)發(fā)現(xiàn)由 providers，consumers，高階組件，render props 等其他抽象層組成的組件會(huì)形成“嵌套地獄”。而在 React Hooks 中，這些功能都可以通過(guò)強(qiáng)大的自定義的 Hooks 來(lái)實(shí)現(xiàn)。
3、不用再去考慮 this 的指向問(wèn)題。在類(lèi)組件中，你必須去理解 JavaScript 中 this 的工作方式。
缺點(diǎn)：
一、響應(yīng)式的useEffect
寫(xiě)函數(shù)組件時(shí)，你不得不改變一些寫(xiě)法習(xí)慣。你必須清楚代碼中useEffect和useCallback的“依賴(lài)項(xiàng)數(shù)組”的改變時(shí)機(jī)。有時(shí)候，你的useEffect依賴(lài)某個(gè)函數(shù)的不可變性，這個(gè)函數(shù)的不可變性又依賴(lài)于另一個(gè)函數(shù)的不可變性，這樣便形成了一條依賴(lài)鏈。一旦這條依賴(lài)鏈的某個(gè)節(jié)點(diǎn)意外地被改變了，你的useEffect就被意外地觸發(fā)了，如果你的useEffect是冪等的操作，可能帶來(lái)的是性能層次的問(wèn)題，如果是非冪等，那就糟糕了。
所以，對(duì)比componentDidmount和componentDidUpdate，useEffect帶來(lái)的心智負(fù)擔(dān)更大。
二、狀態(tài)不同步
函數(shù)的運(yùn)行是獨(dú)立的，每個(gè)函數(shù)都有一份獨(dú)立的作用域。函數(shù)的變量是保存在運(yùn)行時(shí)的作用域里面，當(dāng)我們有異步操作的時(shí)候，經(jīng)常會(huì)碰到異步回調(diào)的變量引用是之前的，也就是舊的（這里也可以理解成閉包）。比如下面的一個(gè)例子：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
import React, { useState } from "react";?const Counter = () => { const [counter, setCounter] = useState(0);? const onAlertButtonClick = () => { setTimeout(() => { alert("Value: " + counter); }, 3000); };? return ( <div> <p>You clicked {counter} times.</p> <button onClick={() => setCounter(counter + 1)}>Click me</button> <button onClick={onAlertButtonClick}> Show me the value in 3 seconds </button> </div> );};?export default Counter; |
當(dāng)你點(diǎn)擊Show me the value in 3 seconds的后，緊接著點(diǎn)擊Click me使得counter的值從0變成1。三秒后，定時(shí)器觸發(fā)，但alert出來(lái)的是0（舊值），但我們希望的結(jié)果是當(dāng)前的狀態(tài)1。
這個(gè)問(wèn)題在class component不會(huì)出現(xiàn)，因?yàn)閏lass component的屬性和方法都存放在一個(gè)instance上，調(diào)用方式是：this.state.xxx和this.method()。因?yàn)槊看味际菑囊粋€(gè)不變的instance上進(jìn)行取值，所以不存在引用是舊的問(wèn)題。
其實(shí)解決這個(gè)hooks的問(wèn)題也可以參照類(lèi)的instance。用useRef返回的immutable RefObject（current屬性是可變的）來(lái)保存state，然后取值方式從counter變成了： counterRef.current。如下：
|
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
26
27
28
|
import React, { useState, useRef, useEffect } from "react";?const Counter = () => { const [counter, setCounter] = useState(0); const counterRef = useRef(counter);? const onAlertButtonClick = () => { setTimeout(() => { alert("Value: " + counterRef.current); }, 3000); };? useEffect(() => { counterRef.current = counter; });? return ( <div> <p>You clicked {counter} times.</p> <button onClick={() => setCounter(counter + 1)}>Click me</button> <button onClick={onAlertButtonClick}> Show me the value in 3 seconds </button> </div> );};?export default Counter; |
結(jié)果我們所期待，alert的是當(dāng)前的值1。
怎么避免react hooks的常見(jiàn)問(wèn)題
- 不要在useEffect里面寫(xiě)太多的依賴(lài)項(xiàng)，劃分這些依賴(lài)項(xiàng)成多個(gè)單一功能的useEffect。其實(shí)這點(diǎn)是遵循了軟件設(shè)計(jì)的“單一職責(zé)模式”。
- 如果你碰到狀態(tài)不同步的問(wèn)題，可以考慮下手動(dòng)傳遞參數(shù)到函數(shù)。如：
|
1
2
3
4
5
6
7
|
// showCount的count來(lái)自父級(jí)作用域 const [count,setCount] = useState(xxx); function showCount(){ console.log(count) } // showCount的count來(lái)自參數(shù) const [count,setCount] = useState(xxx); function showCount(c){ console.log(c) } |
但這個(gè)也只能解決一部分問(wèn)題，很多時(shí)候你不得不使用上述的useRef方案。
3. 重視eslint-plugin-react-hooks插件的警告。
4. 復(fù)雜業(yè)務(wù)的時(shí)候，使用Component代替hooks。
以上就是React hooks的優(yōu)缺點(diǎn)詳解的詳細(xì)內(nèi)容，更多關(guān)于React hooks的優(yōu)缺點(diǎn)的資料請(qǐng)關(guān)注服務(wù)器之家其它相關(guān)文章！
原文鏈接：https://www.cnblogs.com/ranyonsue/p/14700528.html
