React Hooks

前言

之前工作三年中一直在用class方式去寫前端功能頁面這些，其實(shí)接觸hooks也是有一定時(shí)間了。在第一次接觸的時(shí)候應(yīng)該是看了一門關(guān)于electron+react的項(xiàng)目的課程的時(shí)候。當(dāng)時(shí)主要是去看electron，所以對(duì)hooks沒有特別的關(guān)注。也有可能是長期以來對(duì)class的熟悉，當(dāng)時(shí)對(duì)hooks這種函數(shù)式的寫法也有一些抵觸。但是由于業(yè)內(nèi)對(duì)hooks的好評(píng)，曾經(jīng)也想去用hooks去起一個(gè)項(xiàng)目，但是由于當(dāng)時(shí)項(xiàng)目周期以及已有的技術(shù)棧等原因，一直想實(shí)踐也沒機(jī)會(huì)去實(shí)踐使用。

由于，最近接手新的項(xiàng)目一直使用的是react hooks+ts這一套。于是，就得開始使用hooks了。其實(shí)就功能開發(fā)而言，照貓畫虎，其實(shí)工作也沒有什么問題的。但是由于一直沒有系統(tǒng)的對(duì)hooks進(jìn)行深入一步的了解，導(dǎo)致在很多時(shí)候，其實(shí)并不是很清楚為什么要這樣去使用，于是最近去找了《React Hooks核心原理與實(shí)戰(zhàn)》去進(jìn)行了學(xué)習(xí)。

在使用層面以及原因?qū)用嫔希匦聦徱昲ooks的使用以及為什么要使用hooks。函數(shù)式寫法究竟有哪些好處進(jìn)行了更進(jìn)一步的思考。其實(shí)，在一定程度而言，也還是淺嘗輒止，這里僅僅將我這段時(shí)間學(xué)習(xí)記錄下來。

Why Hooks ？

Hooks很大的一個(gè)亮點(diǎn)是可以進(jìn)行業(yè)務(wù)邏輯的重用。這一點(diǎn)在hooks中體現(xiàn)的尤為明顯。比如，往常的class中如果要去監(jiān)聽窗口大小的變化的時(shí)候，就得在組件中在掛載后去添加監(jiān)聽事件，但是如果當(dāng)另外一個(gè)地方需要用到這種監(jiān)聽窗口大小功能的話，這種邏輯代碼并不可以復(fù)用，只能在那個(gè)組件中重新寫一遍。但是在hooks中，我們可以將這部分監(jiān)聽的邏輯代碼進(jìn)行hooks方式封裝，完全可以做到邏輯上的復(fù)用。

For Class

• 使用Class作為React的載體的時(shí)候：
• 組件之間不會(huì)相互繼承，沒有利用到class的繼承的特性UI是狀態(tài)驅(qū)動(dòng)的，所有的方法都是內(nèi)部調(diào)用或者作為生命周期的方法內(nèi)部自動(dòng)調(diào)用。沒有使用到類的實(shí)例方法可以調(diào)用的特性

For Function

React中的一個(gè)核心就是要實(shí)現(xiàn)從State數(shù)據(jù)到View試圖層面的一個(gè)綁定。使用函數(shù)，其實(shí)更好的去解決State到View的一個(gè)映射問題。但是，用函數(shù)作為React的載體就會(huì)出現(xiàn)兩個(gè)問題，函數(shù)中狀態(tài)的保存以及生命周期的方法。

• Hooks怎樣去解決上面兩個(gè)問題：把一個(gè)外部的數(shù)據(jù)綁定到函數(shù)的執(zhí)行。當(dāng)數(shù)據(jù)變化時(shí)，讓函數(shù)能夠自動(dòng)重新執(zhí)行。這樣的話，任何會(huì)影響 UI 展現(xiàn)的外部數(shù)據(jù)，都可以通過這個(gè)機(jī)制綁定到 React 的函數(shù)組件。
• Hooks鉤子的理解：把某個(gè)目標(biāo)結(jié)果鉤到某個(gè)可能會(huì)變化的數(shù)據(jù)源或者事件源上，那么當(dāng)被鉤到的數(shù)據(jù)或事件發(fā)生變化時(shí)，產(chǎn)生這個(gè)目標(biāo)結(jié)果的代碼會(huì)重新執(zhí)行，產(chǎn)生更新后的結(jié)果

圖解：一個(gè)執(zhí)行過程（Execution），例如是函數(shù)組件本身，可以綁定在（鉤在）傳統(tǒng)意義的 State，或者 URL，甚至可以是窗口的大小。這樣當(dāng) State、URL、窗口大小發(fā)生變化時(shí)，都會(huì)重新執(zhí)行某個(gè)函數(shù)，產(chǎn)生更新后的結(jié)果。

Class & Hooks 對(duì)比

• 比起 Class 組件，函數(shù)組件是更適合去表達(dá) React 組件的執(zhí)行的，因?yàn)樗?State => View 這樣的一個(gè)邏輯關(guān)系。但是因?yàn)槿鄙贍顟B(tài)、生命周期等機(jī)制，讓它一直功能受限。Hooks解決了函數(shù)組件作為React載體的狀態(tài)生命周期等受限問題，讓其功能充分發(fā)揮出來
• Hooks 中被鉤的對(duì)象，可以是某個(gè)獨(dú)立的數(shù)據(jù)源，也可以是另一個(gè) Hook 執(zhí)行的結(jié)果，這就帶來了 Hooks 的最大好處：邏輯的復(fù)用
• 簡化了邏輯復(fù)用
  • Class方式中：使用高階組件的設(shè)計(jì)模式進(jìn)行邏輯復(fù)用。比如：我們要去復(fù)用一個(gè)窗口resize的功能，我們需要去定義一個(gè)沒有UI的外層組件，去寫相關(guān)resize的邏輯定義，然后將數(shù)據(jù)結(jié)果用屬性的方式傳給子組件。組件要復(fù)用這個(gè)邏輯的話，必須外層用這個(gè)組件包裹并返回。針對(duì)整個(gè)而言，**為了傳遞一個(gè)外部的狀態(tài)，我們不得不定義一個(gè)沒有 UI 的外層組件，而這個(gè)組件只是為了封裝一段可重用的邏輯。**頻繁使用，每一個(gè)高階組件的使用都會(huì)多一層節(jié)點(diǎn)，會(huì)給調(diào)試等帶來很大的負(fù)擔(dān)。

//Class中高階組件實(shí)現(xiàn)resize方法復(fù)用
//1、高階組件的聲明
const withWindowSize = Component => {
  // 產(chǎn)生一個(gè)高階組件 WrappedComponent，只包含監(jiān)聽窗口大小的邏輯
  class WrappedComponent extends React.PureComponent {
    constructor(props) {
      super(props);
      this.state = {
        size: this.getSize()
      };
    }
    componentDidMount() {
      window.addEventListener("resize", this.handleResize); 
    }
    componentWillUnmount() {
      window.removeEventListener("resize", this.handleResize);
    }
    getSize() {
      return window.innerWidth > 1000 ? "large" ："small";
    }
    handleResize = ()=> {
      const currentSize = this.getSize();
      this.setState({
        size: this.getSize()
      });
    }
    render() {
      // 將窗口大小傳遞給真正的業(yè)務(wù)邏輯組件
      return <Component size={this.state.size} />;
    }
  }
  return WrappedComponent;
};
//2、組件MyComponent使用高階組件中的resize功能
class MyComponent extends React.Component{
  render() {
    const { size } = this.props;
    if (size === "small") return <SmallComponent />;
    else return <LargeComponent />;
  }
}
// 使用 withWindowSize 產(chǎn)生高階組件，用于產(chǎn)生 size 屬性傳遞給真正的業(yè)務(wù)組件
export default withWindowSize(MyComponent); 

• Hooks方式中：實(shí)現(xiàn)resize的話，窗口大小只是外部的一個(gè)數(shù)據(jù)狀態(tài)。我們使用hooks方式對(duì)其封裝，只是將其變成了一個(gè)可以綁定的數(shù)據(jù)源，當(dāng)窗口大小發(fā)生變化的時(shí)候，這個(gè)組件也會(huì)重新渲染代碼會(huì)更加簡潔直觀，并且不會(huì)產(chǎn)生額外的組件節(jié)點(diǎn)。

//Hooks中使用hooks方法進(jìn)行resize邏輯復(fù)用
//定義useWindowSize這個(gè)hook
const getSize = () => {
  return window.innerWidth > 1000 ? "large" : "small";
}
const useWindowSize = () => {
  const [size, setSize] = useState(getSize());
  useEffect(() => {
  const handler = () => {
      setSize(getSize())
    };
    window.addEventListener('resize', handler);
    return () => {
      window.removeEventListener('resize', handler);
    };
  }, []);
  return size;
};
//函數(shù)組件中使用這個(gè)hook
const Demo = () => {
  const size = useWindowSize();
  if (size === "small") return <SmallComponent />;
  else return <LargeComponent />;
};

• 有助于關(guān)注分離

Hooks能夠讓針對(duì)同一個(gè)業(yè)務(wù)邏輯的代碼盡可能聚合在一塊，在Class組件中不得不吧同一個(gè)業(yè)務(wù)邏輯代碼分散在類組件的不同的生命周期方法中

圖解：左側(cè)是 Class 組件，右側(cè)是函數(shù)組件結(jié)合 Hooks。藍(lán)色和黃色代表不同的業(yè)務(wù)功能

Hooks如何保存組件狀態(tài)和使用生命周期？

React一共提供了10個(gè)Hooks，useState、useEffect、useCallback、useMemo、useRef、useContext等等

1、useState：讓函數(shù)具有維持狀態(tài)的能力

我們要遵循的一個(gè)原則就是：state 中永遠(yuǎn)不要保存可以通過計(jì)算得到的值，例如：

• 從 props 傳遞過來的值。有時(shí)候 props 傳遞過來的值無法直接使用，而是要通過一定的計(jì)算后再在 UI 上展示，比如說排序。那么我們要做的就是每次用的時(shí)候，都重新排序一下，或者利用某些 cache 機(jī)制，而不是將結(jié)果直接放到 state 里。
• 從 URL 中讀到的值。比如有時(shí)需要讀取 URL 中的參數(shù)，把它作為組件的一部分狀態(tài)。那么我們可以在每次需要用的時(shí)候從 URL 中讀取，而不是讀出來直接放到 state 里。
• 從 cookie、localStorage 中讀取的值。通常來說，也是每次要用的時(shí)候直接去讀取，而不是讀出來后放到 state 里。

2、useEffect：執(zhí)行副作用

副作用是指一段和當(dāng)前執(zhí)行結(jié)果無關(guān)的代碼。比如說要修改函數(shù)外部的某個(gè)變量，要發(fā)起一個(gè)請(qǐng)求。形式：useEffect(callback, dependencies)。涵蓋了componentDidMount、componentDidUpdate 和componentWillUnmount三個(gè)生命周期方法。簡而言之，useEffect 是每次組件 render 完后判斷依賴并執(zhí)行。

使用useEffect應(yīng)該注意的點(diǎn)：

沒有依賴項(xiàng)，則每次 render 后都會(huì)重新執(zhí)行

useEffect(()=>{
	console.log('re-render')		//每次render完成一次后就執(zhí)行
})

• 空數(shù)組作為依賴項(xiàng)，則只在首次執(zhí)行時(shí)觸發(fā)，對(duì)應(yīng)到 Class 組件就是 componentDidMount

useEffect(()=>{
  console.log('did mount')		//相當(dāng)于componentDidMount
},[])

• 可以返回一個(gè)函數(shù)，用在組件銷毀的時(shí)候做一些清理的操作

const [size,setResize] = useState({})
useEffect(()=>{
	const handler = () => {
    setResize()
	}
	window.addEventListener('resize',handler)
	return ()=>{
		window.removeEventListener('resize',handler)
	}
},[])

總結(jié)

• useEffect使用的四個(gè)場景 每次 render 后執(zhí)行：不提供第二個(gè)依賴項(xiàng)參數(shù)。比如useEffect(() => {})。
• 僅第一次 render 后執(zhí)行：提供一個(gè)空數(shù)組作為依賴項(xiàng)。比如useEffect(() => {}, [])。
• 第一次以及依賴項(xiàng)發(fā)生變化后執(zhí)行：提供依賴項(xiàng)數(shù)組。比如useEffect(() => {}, [deps])。
• 組件 unmount 后執(zhí)行：返回一個(gè)回調(diào)函數(shù)。比如useEffect() => { return () => {} }, [])。

本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容！