摘要：當(dāng)組件安裝和更新時(shí)，回調(diào)函數(shù)都會(huì)被調(diào)用。好在為我們提供了第二個(gè)參數(shù)，如果第二個(gè)參數(shù)傳入一個(gè)數(shù)組，僅當(dāng)重新渲染時(shí)數(shù)組中的值發(fā)生改變時(shí)，中的回調(diào)函數(shù)才會(huì)執(zhí)行。

　　首先歡迎大家關(guān)注我的Github博客，也算是對(duì)我的一點(diǎn)鼓勵(lì)，畢竟寫東西沒法獲得變現(xiàn)，能堅(jiān)持下去也是靠的是自己的熱情和大家的鼓勵(lì)，希望大家多多關(guān)注呀！React 16.8中新增了Hooks特性，并且在React官方文檔中新增加了Hooks模塊介紹新特性，可見React對(duì)Hooks的重視程度，如果你還不清楚Hooks是什么，強(qiáng)烈建議你了解一下，畢竟這可能真的是React未來的發(fā)展方向。
　　

　　React一直以來有兩種創(chuàng)建組件的方式: Function Components(函數(shù)組件)與Class Components(類組件)。函數(shù)組件只是一個(gè)普通的JavaScript函數(shù)，接受props對(duì)象并返回React Element。在我看來，函數(shù)組件更符合React的思想，數(shù)據(jù)驅(qū)動(dòng)視圖，不含有任何的副作用和狀態(tài)。在應(yīng)用程序中，一般只有非?；A(chǔ)的組件才會(huì)使用函數(shù)組件，并且你會(huì)發(fā)現(xiàn)隨著業(yè)務(wù)的增長(zhǎng)和變化，組件內(nèi)部可能必須要包含狀態(tài)和其他副作用，因此你不得不將之前的函數(shù)組件改寫為類組件。但事情往往并沒有這么簡(jiǎn)單，類組件也沒有我們想象的那么美好，除了徒增工作量之外，還存在其他種種的問題。

　　首先類組件共用狀態(tài)邏輯非常麻煩。比如我們借用官方文檔中的一個(gè)場(chǎng)景，F(xiàn)riendStatus組件用來顯示朋友列表中該用戶是否在線。

class FriendStatus extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isOnline: null };
    this.handleStatusChange = this.handleStatusChange.bind(this);
  }

  componentDidMount() {
    ChatAPI.subscribeToFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }

  componentWillUnmount() {
    ChatAPI.unsubscribeFromFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }
  
  handleStatusChange(status) {
    this.setState({
      isOnline: status.isOnline
    });
  }

  render() {
    if (this.state.isOnline === null) {
      return "Loading...";
    }
    return this.state.isOnline ? "Online" : "Offline";
  }
}

　　上面FriendStatus組件會(huì)在創(chuàng)建時(shí)主動(dòng)訂閱用戶狀態(tài)，并在卸載時(shí)會(huì)退訂狀態(tài)防止造成內(nèi)存泄露。假設(shè)又出現(xiàn)了一個(gè)組件也需要去訂閱用戶在線狀態(tài)，如果想用復(fù)用該邏輯，我們一般會(huì)使用render props和高階組件來實(shí)現(xiàn)狀態(tài)邏輯的復(fù)用。

// 采用render props的方式復(fù)用狀態(tài)邏輯
class OnlineStatus extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isOnline: null };
    this.handleStatusChange = this.handleStatusChange.bind(this);
  }

  componentDidMount() {
    ChatAPI.subscribeToFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }

  componentWillUnmount() {
    ChatAPI.unsubscribeFromFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }

  handleStatusChange(status) {
    this.setState({
      isOnline: status.isOnline
    });
  }

  render() {
    const {isOnline } = this.state;
    return this.props.children({isOnline})
  }
}

class FriendStatus extends React.Component{
  render(){
    return (
      
        {
          ({isOnline}) => {
            if (isOnline === null) {
              return "Loading...";
            }
            return isOnline ? "Online" : "Offline";
          }
        }
      
    );
  }
}

// 采用高階組件的方式復(fù)用狀態(tài)邏輯
function withSubscription(WrappedComponent) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = { isOnline: null };
      this.handleStatusChange = this.handleStatusChange.bind(this);
    }

    componentDidMount() {
      ChatAPI.subscribeToFriendStatus(
        this.props.friend.id,
        this.handleStatusChange
      );
    }

    componentWillUnmount() {
      ChatAPI.unsubscribeFromFriendStatus(
        this.props.friend.id,
        this.handleStatusChange
      );
    }

    handleStatusChange(status) {
      this.setState({
        isOnline: status.isOnline
      });
    }

    render() {
      return 
    }
  }
}

const FriendStatus = withSubscription(({isOnline}) => {
  if (isOnline === null) {
    return "Loading...";
  }
  return isOnline ? "Online" : "Offline";
})

　　上面兩種復(fù)用狀態(tài)邏輯的方式不僅需要費(fèi)時(shí)費(fèi)力地重構(gòu)組件，而且Devtools查看組件的層次結(jié)構(gòu)時(shí)，會(huì)發(fā)現(xiàn)組件層級(jí)結(jié)構(gòu)變深，當(dāng)復(fù)用的狀態(tài)邏輯過多時(shí)，也會(huì)陷入組件嵌套地獄(wrapper hell)的情況。可見上述兩種方式并不能完美解決狀態(tài)邏輯復(fù)用的問題。

　　不僅如此，隨著類組件中業(yè)務(wù)邏輯逐漸復(fù)雜，維護(hù)難度也會(huì)逐步提升，因?yàn)闋顟B(tài)邏輯會(huì)被分割到不同的生命周期函數(shù)中，例如訂閱狀態(tài)邏輯位于componentDidMount,取消訂閱邏輯位于componentWillUnmount中，相關(guān)邏輯的代碼相互割裂，而邏輯不相關(guān)的代碼反而有可能集中在一起，整體都是不利于維護(hù)的。并且相比如函數(shù)式組件，類組件學(xué)習(xí)更為復(fù)雜，你需要時(shí)刻提防this在組件中的陷阱，永遠(yuǎn)不能忘了為事件處理程序綁定this。如此種種，看來函數(shù)組件還是有特有的優(yōu)勢(shì)的。

　　函數(shù)式組件一直以來都缺乏類組件諸如狀態(tài)、生命周期等種種特性，而Hooks的出現(xiàn)就是讓函數(shù)式組件擁有類組件的特性。官方定義：

Hooks are functions that let you “hook into” React state and lifecycle features from function components.

　　要讓函數(shù)組件擁有類組件的特性，首先就要實(shí)現(xiàn)狀態(tài)state的邏輯。

　　useState就是React提供最基礎(chǔ)、最常用的Hook，主要用來定義本地狀態(tài)，我們以一個(gè)最簡(jiǎn)單的計(jì)數(shù)器為例:

import React, { useState } from "react"

function Example() {
  const [count, setCount] = useState(0);
  return (
    

      {count}
       setCount(count + 1)}>+
       setCount((count) => count - 1)}>-
    
  );
}

　　useState可以用來定義一個(gè)狀態(tài)，與state不同的是，狀態(tài)不僅僅可以是對(duì)象，而且可以是基礎(chǔ)類型值，例如上面的Number類型的變量。useState返回的是一個(gè)數(shù)組，第一個(gè)是當(dāng)前狀態(tài)的實(shí)際值，第二個(gè)用于更改該狀態(tài)的函數(shù)，類似于setState。更新函數(shù)與setState相同的是都可以接受值和函數(shù)兩種類型的參數(shù)，與useState不同的是，更新函數(shù)會(huì)將狀態(tài)替換(replace)而不是合并(merge)。

　　函數(shù)組件中如果存在多個(gè)狀態(tài)，既可以通過一個(gè)useState聲明對(duì)象類型的狀態(tài)，也可以通過useState多次聲明狀態(tài)。

// 聲明對(duì)象類型的狀態(tài)
const [count, setCount] = useState({
    count1: 0,
    count2: 0
});

// 多次聲明
const [count1, setCount1] = useState(0);
const [count2, setCount2] = useState(0);

　　相比于聲明對(duì)象類型的狀態(tài)，明顯多次聲明狀態(tài)的方式更加方便，主要是因?yàn)楦潞瘮?shù)是采用的替換的方式，因此你必須給參數(shù)中添加未變化的屬性，非常的麻煩。需要注意的是，React是通過Hook調(diào)用的次序來記錄各個(gè)內(nèi)部狀態(tài)的，因此Hook不能在條件語句(如if)或者循環(huán)語句中調(diào)用，并在需要注意的是，我們僅可以在函數(shù)組件中調(diào)用Hook,不能在組件和普通函數(shù)中(除自定義Hook)調(diào)用Hook。

　　當(dāng)我們要在函數(shù)組件中處理復(fù)雜多層數(shù)據(jù)邏輯時(shí)，使用useState就開始力不從心，值得慶幸的是，React為我們提供了useReducer來處理函數(shù)組件中復(fù)雜狀態(tài)邏輯。如果你使用過Redux，那么useReducer可謂是非常的親切,讓我們用useReducer重寫之前的計(jì)數(shù)器例子:

import React, { useReducer } from "react"

const reducer = function (state, action) {
  switch (action.type) {
    case "increment":
      return { count : state.count + 1};
    case "decrement":
      return { count: state.count - 1};
    default:
      return { count: state.count }
  }
}

function Example() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });
  const {count} = state;
  return (
    

      {count}
       dispatch({ type: "increment"})}>+
       dispatch({ type: "decrement"})}>-
    
  );
}

　　useReducer接受兩個(gè)參數(shù): reducer函數(shù)和默認(rèn)值，并返回當(dāng)前狀態(tài)state和dispatch函數(shù)的數(shù)組，其邏輯與Redux基本一致。useReducer和Redux的區(qū)別在于默認(rèn)值，Redux的默認(rèn)值是通過給reducer函數(shù)賦值默認(rèn)參數(shù)的方式給定，例如:

// Redux的默認(rèn)值邏輯
const reducer = function (state = { count: 0 }, action) {
  switch (action.type) {
    case "increment":
      return { count : state.count + 1};
    case "decrement":
      return { count: state.count - 1};
    default:
      return { count: state.count }
  }
}

　　useReducer之所以沒有采用Redux的邏輯是因?yàn)镽eact認(rèn)為state的默認(rèn)值可能是來自于函數(shù)組件的props，例如:

function Example({initialState = 0}) {
  const [state, dispatch] = useReducer(reducer, { count: initialState });
  // 省略...
}

　　這樣就能實(shí)現(xiàn)通過傳遞props來決定state的默認(rèn)值，當(dāng)然React雖然不推薦Redux的默認(rèn)值方式，但也允許你類似Redux的方式去賦值默認(rèn)值。這就要接觸useReducer的第三個(gè)參數(shù): initialization。

　　顧名思義，第三個(gè)參數(shù)initialization是用來初始化狀態(tài)，當(dāng)useReducer初始化狀態(tài)時(shí)，會(huì)將第二個(gè)參數(shù)initialState傳遞initialization函數(shù)，initialState函數(shù)返回的值就是state的初始狀態(tài)，這也就允許在reducer外抽象出一個(gè)函數(shù)專門負(fù)責(zé)計(jì)算state的初始狀態(tài)。例如:

const initialization = (initialState) => ({ count: initialState })

function Example({initialState = 0}) {
  const [state, dispatch] = useReducer(reducer, initialState, initialization);
  // 省略...
}

　　所以借助于initialization函數(shù)，我們就可以模擬Redux的初始值方式:

import React, { useReducer } from "react"

const reducer = function (state = {count: 0}, action) {
  // 省略...
}

function Example({initialState = 0}) {
  const [state, dispatch] = useReducer(reducer, undefined, reducer());
  // 省略...
}

　　解決了函數(shù)組件中內(nèi)部狀態(tài)的定義，接下來亟待解決的函數(shù)組件中生命周期函數(shù)的問題。在函數(shù)式思想的React中，生命周期函數(shù)是溝通函數(shù)式和命令式的橋梁，你可以在生命周期中執(zhí)行相關(guān)的副作用(Side Effects),例如: 請(qǐng)求數(shù)據(jù)、操作DOM等。React提供了useEffect來處理副作用。例如:

import React, { useState, useEffect } from "react";

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`
    return () => {
      console.log("clean up!")
    }
  });

  return (
    

      
You clicked {count} times
       setCount(count + 1)}>
        Click me
      
    
  );
}

　　在上面的例子中我們給useEffect傳入了一個(gè)函數(shù)，并在函數(shù)內(nèi)根據(jù)count值更新網(wǎng)頁標(biāo)題。我們會(huì)發(fā)現(xiàn)每次組件更新時(shí)，useEffect中的回調(diào)函數(shù)都會(huì)被調(diào)用。因此我們可以認(rèn)為useEffect是componentDidMount和componentDidUpdate結(jié)合體。當(dāng)組件安裝(Mounted)和更新(Updated)時(shí)，回調(diào)函數(shù)都會(huì)被調(diào)用。觀察上面的例中，回調(diào)函數(shù)返回了一個(gè)函數(shù)，這個(gè)函數(shù)就是專門用來清除副作用，我們知道類似監(jiān)聽事件的副作用在組件卸載時(shí)應(yīng)該及時(shí)被清除，否則會(huì)造成內(nèi)存泄露。清除函數(shù)會(huì)在每次組件重新渲染前調(diào)用，因此執(zhí)行順序是:

render -> effect callback -> re-render -> clean callback -> effect callback

　　因此我們可以使用useEffect模擬componentDidMount、componentDidUpdate、componentWillUnmount行為。之前我們提到過，正是因?yàn)樯芷诤瘮?shù)，我們迫不得已將相關(guān)的代碼拆分到不同的生命周期函數(shù)，反而將不相關(guān)的代碼放置在同一個(gè)生命周期函數(shù)，之所以會(huì)出現(xiàn)這個(gè)情況，主要問題在于我們并不是依據(jù)于業(yè)務(wù)邏輯書寫代碼，而是通過執(zhí)行時(shí)間編碼。為了解決這個(gè)問題，我們可以通過創(chuàng)建多個(gè)Hook,將相關(guān)邏輯代碼放置在同一個(gè)Hook來解決上述問題:

import React, { useState, useEffect } from "react";

function Example() {
  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return function cleanup() {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });
  
  useEffect(() => {
    otherAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return function cleanup() {
      otherAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });
  // 省略...
}

　　我們通過多個(gè)Hook來集中邏輯關(guān)注點(diǎn)，避免不相關(guān)的代碼糅雜而出現(xiàn)的邏輯混亂。但是隨之而來就遇到一個(gè)問題，假設(shè)我們的某個(gè)行為確定是要在區(qū)分componentDidUpdate或者componentDidMount時(shí)才執(zhí)行，useEffect是否能區(qū)分。好在useEffect為我們提供了第二個(gè)參數(shù)，如果第二個(gè)參數(shù)傳入一個(gè)數(shù)組，僅當(dāng)重新渲染時(shí)數(shù)組中的值發(fā)生改變時(shí)，useEffect中的回調(diào)函數(shù)才會(huì)執(zhí)行。因此如果我們向其傳入一個(gè)空數(shù)組，則可以模擬生命周期componentDidMount。但是如果你想僅模擬componentDidUpdate，目前暫時(shí)未發(fā)現(xiàn)什么好的方法。

　　useEffect與類組件生命周期不同的是，componentDidUpdate和componentDidMount都是在DOM更新后同步執(zhí)行的,但useEffect并不會(huì)在DOM更新后同步執(zhí)行，也不會(huì)阻塞更新界面。如果需要模擬生命周期同步效果，則需要使用useLayoutEffect，其使用方法和useEffect相同，區(qū)域只在于執(zhí)行時(shí)間上。

　　借助Hook:useContext,我們也可以在函數(shù)組件中使用context。相比于在類組件中需要通過render props的方式使用，useContext的使用則相當(dāng)方便。

import { createContext } from "react"

const ThemeContext = createContext({ color: "color", background: "black"});

function Example() {
    const theme = useContext(Conext);
    return (
        
Hello World!
    );
}

class App extends Component {
  state = {
    color: "red",
    background: "black"
  };

  render() {
    return (
        
          
           this.setState({color: "blue"})}>color
           this.setState({background: "blue"})}>backgroud
        
    );
  }
}

　　useContext接受函數(shù)React.createContext返回的context對(duì)象作為參數(shù)，返回當(dāng)前context中值。每當(dāng)Provider中的值發(fā)生改變時(shí)，函數(shù)組件就會(huì)重新渲染，需要注意的是，即使的context的未使用的值發(fā)生改變時(shí)，函數(shù)組件也會(huì)重新渲染，正如上面的例子，Example組件中即使沒有使用過background，但background發(fā)生改變時(shí)，Example也會(huì)重新渲染。因此必要時(shí)，如果Example組件還含有子組件，你可能需要添加shouldComponentUpdate防止不必要的渲染浪費(fèi)性能。

　　useRef常用在訪問子元素的實(shí)例:

function Example() {
    const inputEl = useRef();
    const onButtonClick = () => {
        inputEl.current.focus();
    };
    return (
        <>
            
            Focus the input
        
    );
}

　　上面我們說了useRef常用在ref屬性上，實(shí)際上useRef的作用不止于此

const refContainer = useRef(initialValue)

　　useRef可以接受一個(gè)默認(rèn)值，并返回一個(gè)含有current屬性的可變對(duì)象，該可變對(duì)象會(huì)將持續(xù)整個(gè)組件的生命周期。因此可以將其當(dāng)做類組件的屬性一樣使用。

　　useImperativeHandle用于自定義暴露給父組件的ref屬性。需要配合forwardRef一起使用。

function Example(props, ref) {
    const inputRef = useRef();
    useImperativeHandle(ref, () => ({
        focus: () => {
            inputRef.current.focus();
        }
    }));
    return ;
}

export default forwardRef(Example);

class App extends Component {
  constructor(props){
      super(props);
      this.inputRef = createRef()
  }
  
  render() {
    return (
        <>
            
             {this.inputRef.current.focus()}}>Click
        
    );
  }
}

　　熟悉React的同學(xué)見過類似的場(chǎng)景:
　　

class Example extends React.PureComponent{
    render(){
        // ......
    }
}

class App extends Component{
    render(){
        return  this.setState()}/>
    }
}

　　其實(shí)在這種場(chǎng)景下，雖然Example繼承了PureComponent，但實(shí)際上并不能夠優(yōu)化性能，原因在于每次App組件傳入的onChange屬性都是一個(gè)新的函數(shù)實(shí)例，因此每次Example都會(huì)重新渲染。一般我們?yōu)榱私鉀Q這個(gè)情況，一般會(huì)采用下面的方法:

class App extends Component{
    constructor(props){
        super(props);
        this.onChange = this.onChange.bind(this);
    }

    render(){
        return 
    }
    
    onChange(){
        // ...
    }
}

　　通過上面的方法一并解決了兩個(gè)問題，首先保證了每次渲染時(shí)傳給Example組件的onChange屬性都是同一個(gè)函數(shù)實(shí)例，并且解決了回調(diào)函數(shù)this的綁定。那么如何解決函數(shù)組件中存在的該問題呢？React提供useCallback函數(shù)，對(duì)事件句柄進(jìn)行緩存。

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

　　useCallback接受函數(shù)和一個(gè)數(shù)組輸入，并返回的一個(gè)緩存版本的回調(diào)函數(shù)，僅當(dāng)重新渲染時(shí)數(shù)組中的值發(fā)生改變時(shí)，才會(huì)返回新的函數(shù)實(shí)例，這也就解決我們上面提到的優(yōu)化子組件性能的問題，并且也不會(huì)有上面繁瑣的步驟。

與useCallback類似的是，useMemo返回的是一個(gè)緩存的值。

const memoizedValue = useMemo(
  () => complexComputed(),
  [a, b],
);

　　也就是僅當(dāng)重新渲染時(shí)數(shù)組中的值發(fā)生改變時(shí)，回調(diào)函數(shù)才會(huì)重新計(jì)算緩存數(shù)據(jù)，這可以使得我們避免在每次重新渲染時(shí)都進(jìn)行復(fù)雜的數(shù)據(jù)計(jì)算。因此我們可以認(rèn)為:

useCallback(fn, input) 等同于 useMemo(() => fn, input)

　　如果沒有給useMemo傳入第二個(gè)參數(shù)，則useMemo僅會(huì)在收到新的函數(shù)實(shí)例時(shí)，才重新計(jì)算，需要注意的是，React官方文檔提示我們，useMemo僅可以作為一種優(yōu)化性能的手段，不能當(dāng)做語義上的保證，這就是說，也會(huì)React在某些情況下，即使數(shù)組中的數(shù)據(jù)未發(fā)生改變，也會(huì)重新執(zhí)行。

　　我們前面講過，Hook只能在函數(shù)組件的頂部調(diào)用，不能再循環(huán)、條件、普通函數(shù)中使用。我們前面講過，類組件想要共享狀態(tài)邏輯非常麻煩，必須要借助于render props和HOC，非常的繁瑣。相比于次，React允許我們創(chuàng)建自定義Hook來封裝共享狀態(tài)邏輯。所謂的自定義Hook是指以函數(shù)名以use開頭并調(diào)用其他Hook的函數(shù)。我們用自定義Hook來重寫剛開始的訂閱用戶狀態(tài)的例子:

function useFriendStatus(friendID) {
    const [isOnline, setIsOnline] = useState(null);

    function handleStatusChange(isOnline) {
        setIsOnline(isOnline);
    }

    useEffect(() => {
        ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
        return () => {
            ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
        };
    });

    return isOnline;
}

function FriendStatus() {
    const isOnline = useFriendStatus();
    if (isOnline === null) {
        return "Loading...";
    }
    return isOnline ? "Online" : "Offline";
}

　　我們用自定義Hook重寫了之前的訂閱用戶在線狀態(tài)的例子，相比于render prop和HOC復(fù)雜的邏輯，自定義Hook更加的簡(jiǎn)潔，不僅于此，自定義Hook也不會(huì)引起之前我們說提到過的組件嵌套地獄(wrapper hell)的情況。優(yōu)雅的解決了之前類組件復(fù)用狀態(tài)邏輯困難的情況。

　　借助于Hooks，函數(shù)組件已經(jīng)能基本實(shí)現(xiàn)絕大部分的類組件的功能，不僅于此，Hooks在共享狀態(tài)邏輯、提高組件可維護(hù)性上有具有一定的優(yōu)勢(shì)?？梢灶A(yù)見的是，Hooks很有可能是React可預(yù)見未來大的方向。React官方對(duì)Hook采用的是逐步采用策略(Gradual Adoption Strategy)，并表示目前沒有計(jì)劃會(huì)將class從React中剔除，可見Hooks會(huì)很長(zhǎng)時(shí)間內(nèi)和我們的現(xiàn)有代碼并行工作，React并不建議我們?nèi)坑肏ooks重寫之前的類組件，而是建議我們?cè)谛碌慕M件或者非關(guān)鍵性組件中使用Hooks。
　　
　如有表述不周之處，虛心接受批評(píng)指教。愿大家一同進(jìn)步！