React hooks實踐

前言

最近要對舊的項目進行重構，統一使用全新的react技術棧。同時，我們也決定嘗試使用React hooks來進行開發，但是，由於React hooks崇尚的是使用(也只能使用)function component的形式來進行開發，而不是class component，因此，整個開發方式也會與之前產生比較大的差異。所以，我這裏就積累了下實際項目中遇到的問題以及思考，看下能不能幫助大家少走彎路。

正文

接下來就直接進入正文。我會將項目中遇到的問題一一列舉出來，並且給出解決方案。

執行初始化操作的時機

當我轉到React hooks的時候，首先就遇到了這個問題：

一般來說，業務組件經常會遇到要通過發起ajax請求來獲取業務數據並且執行初始化操作的場景。在使用class component編程的時候，我們就可以在class component提供的生命週期鉤子函數(比如componentDidMount, constructor等)執行這個操作。可是如果轉到React hooks之後，function component裏是沒有這個生命週期鉤子函數的，那這個初始化操作怎麼辦呢？總不能每次遇到這種場景都使用class component來做吧？

解決方案：使用useEffect(想知道useEffect是什麼的話，可以點擊這裏)

useEffect，顧名思義，就是執行有副作用的操作，你可以把它當成componentDidMount, componentDidUpdate, and componentWillUnmount 的集合。它的函數聲明如下

useEffect(effect: React.EffectCallback, inputs?: ReadonlyArray<any> | undefined)

那麼，我們在實際使用中，我們就可以使用這個來執行初始化操作。舉個例子

import React, { useEffect } from 'react'

export function BusinessComponent() {
  const initData = async () => {
    // 發起請求並執行初始化操作
  }
  // 執行初始化操作，需要注意的是，如果你只是想在渲染的時候初始化一次數據，那麼第二個參數必須傳空數組。
  useEffect(() => {
    initData();
  }, []);

  return (<div></div>);
}

需要注意的是，這裏的useEffect的第二個參數必須傳空數組，這樣它就等價於只在componentDidMount的時候執行。如果不傳第二個參數的話，它就等價於componentDidMount和componentDidUpdate

做一些清理操作

由於我們在實際開發過程中，經常會遇到需要做一些副作用的場景，比如輪詢操作(定時器、輪詢請求等)、使用瀏覽器原生的事件監聽機制而不用react的事件機制(這種情況下，組件銷燬的時候，需要用戶主動去取消事件監聽)等。使用class Component編程的時候，我們一般都在componentWillUnmount或者componentDidUnmount的時候去做清理操作，可是使用react hooks的時候，我們如何做處理呢？

解決方案：使用useEffect第一個參數的返回值

如果useEffect的第一個參數返回了函數的時候，react會在每一次執行新的effects之前，執行這個函數來做一些清理操作。因此，我們就可以使用它來執行一些清理操作。

例子：比如我們要做一個二維碼組件，我們需要根據傳入的userId不斷輪詢地向後臺發請求查詢掃描二維碼的狀態，這種情況下，我們就需要在組件unmount的時候清理掉輪詢操作。代碼如下：

import React, { useEffect } from 'react'

export function QRCode(url, userId) {
  // 根據userId查詢掃描狀態
  const pollingQueryingStatus = async () => {
  }
  // 取消輪詢
  const stopPollingQueryStatus = async() => {
  }

  useEffect(() => {
    pollingQueryingStatus();

    return stopPollingQueryStatus;
  }, []);

  // 根據url生成二維碼
  return (<div></div>)
}

這樣的話，就等價於在componentWillUnmount的時候去執行清理操作。

但是，有時候我們可能需要執行多次清理操作。還是舉上面的例子，我們需要在用戶傳入新的userId的時候，去執行新的查詢的操作，同時我們還需要清除掉舊的輪詢操作。想一下怎麼做比較好。

其實對這種情況，官方也已經給出瞭解決方案了，useEffect的第二個參數是觸發effects的關鍵，如果用戶傳入了第二個參數，那麼只有在第二個參數的值發生變化(以及首次渲染)的時候，纔會觸發effects。因此，我們只需要將上面的代碼改一下：

import React, { useEffect } from 'react'

export function QRCode(url, userId) {
  // 根據userId查詢掃描狀態
  const pollingQueryingStatus = async () => {
  }

  const stopPollingQueryStatus = async() => {
  }
  // 我們只是將useEffect的第二個參數加了個userId
  useEffect(() => {
    pollingQueryingStatus();

    return stopPollingQueryStatus;
  }, [userId]);

  // 根據url生成二維碼
  return (<div></div>)
}

我們只是在useEffect的第二個參數數組裏，加入了一個userId。這樣的話，userId的每一次變化都會先觸發stopPollingQueryStatus，之後再執行effects，這樣就可以達到我們的目的。

useState與setState的差異

react hooks使用useState來代替class Component裏的state。可是，在具體開發過程中，我也發現了一些不同點。useState介紹可以點擊這裏

在setState的時候，我們可以只修改state中的局部變量，而不需要將整個修改後的state傳進去，舉個例子

import React, { PureComponent } from 'react';

export class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      name: 'cjg',
      age: 18,
    }
  }

  handleClick = () => {
    const { count } = this.state;
    // 我們只需要傳入修改的局部變量
    this.setState({
      count: count + 1,
    });
  }

  render() {
    return (
      <button onClick={this.handleClick}></button>
    )
  }
}

而使用useState後，我們修改state必須將整個修改後的state傳入去，因爲它會直接覆蓋之前的state，而不是合併之前state對象。

import React, { useState } from 'react';

export function Count() {
  const [data, setData] = useState({
    count: 0,
    name: 'cjg',
    age: 18,
  });
    
  const handleClick = () => {
    const { count } = data;
    // 這裏必須將完整的state對象傳進去
    setData({
      ...data,
      count: count + 1,
    })
  };

  return (<button onClick={handleClick}></button>)
}

減少不必要的渲染

在使用class Component進行開發的時候，我們可以使用shouldComponentUpdate來減少不必要的渲染，那麼在使用react hooks後，我們如何實現這樣的功能呢？

解決方案：React.memo和useMemo

對於這種情況，react當然也給出了官方的解決方案，就是使用React.memo和useMemo。

React.memo

React.momo其實並不是一個hook，它其實等價於PureComponent，但是它只會對比props。使用方式如下(用上面的例子):

import React, { useState } from 'react';

export const Count = React.memo((props) => {
  const [data, setData] = useState({
    count: 0,
    name: 'cjg',
    age: 18,
  });
  
  const handleClick = () => {
    const { count } = data;
    setData({
      ...data,
      count: count + 1,
    })
  };

  return (<button onClick={handleClick}>count:{data.count}</button>)
});

useMemo

useMemo它的用法其實跟useEffects有點像，我們直接看官方給的例子

function Parent({ a, b }) {
  // Only re-rendered if `a` changes:
  const child1 = useMemo(() => <Child1 a={a} />, [a]);
  // Only re-rendered if `b` changes:
  const child2 = useMemo(() => <Child2 b={b} />, [b]);
  return (
    <>
      {child1}
      {child2}
    </>
  )
}

從例子可以看出來，它的第二個參數和useEffect的第二個參數是一樣的，只有在第二個參數數組的值發生變化時，纔會觸發子組件的更新。

總結

一開始在從class component轉變到react hooks的時候，確實很不適應。可是當我習慣了這種寫法後，我的心情如下：

當然，現在react hooks還是在alpha階段，如果大家覺得不放心的話，可以再等等。反正我就先下手玩玩了哈哈哈。

本文地址在->本人博客地址, 歡迎給個 start 或 follow