區(qū)別：1、hooks的寫法比class簡潔；2、hooks的業(yè)務(wù)代碼比class更加聚合；3、class組件的邏輯復(fù)用通常用render props以及HOC兩種方式，而react hooks提供了自定義hooks來復(fù)用邏輯。

本教程操作環(huán)境：Windows7系統(tǒng)、react17.0.1版、Dell G3電腦。

react hooks與class組件有哪些區(qū)別？下面就來帶大家對比一下react hooks和class組件，聊聊它們的區(qū)別。

react-hooks解決的問題

• 函數(shù)組件中不能擁有自己的狀態(tài)（state）。在hooks之前函數(shù)組件是無狀態(tài)的，都是通過props來獲取父組件的狀態(tài)，但是hooks提供了useState來維護(hù)函數(shù)組件內(nèi)部的狀態(tài)。

• 函數(shù)組件中不能監(jiān)聽組件的生命周期。useEffect聚合了多個(gè)生命周期函數(shù)。

• class組件中生命周期較為復(fù)雜（在15版本到16版本的變化大）。

• class組件邏輯難以復(fù)用（HOC，render props）。

hooks對比class的好處（對比）

1、寫法更加的簡潔

我們以最簡單的計(jì)數(shù)器為例：

class組件

class ExampleOfClass extends Component {   constructor(props) {     super(props)     this.state = {       count: 1     }   }   handleClick = () => {     let { count } = this.state     this.setState({       count: count+1     })   }   render() {     const { count } = this.state     return (       <div>         <p>you click { count }</p>         <button onClick={this.handleClick}>點(diǎn)擊</button>       </div>     )   } }

hooks

function ExampleOfHooks() {     const [count, setCount] = useState(0)     const handleClick = () => {         setCount(count + 1)     }     return (       <div>         <p>you click { count }</p>         <button onClick={handleClick}>點(diǎn)擊</button>       </div>     ) }

可以看到使用hooks的代碼相比class組件代碼更加的簡潔、清晰。

2、業(yè)務(wù)代碼更加聚合

使用class組件經(jīng)常會出現(xiàn)一個(gè)功能出現(xiàn)在兩個(gè)生命周期函數(shù)內(nèi)的情況，這樣分開寫有時(shí)候可能會忘記。比如：

let timer = null componentDidMount() {     timer = setInterval(() => {         // ...     }, 1000) } // ... componentWillUnmount() {     if (timer) clearInterval(timer) }

由于添加定時(shí)器和清除定時(shí)器是在兩個(gè)不同的生命周期函數(shù)，中間可能會有很多其他的業(yè)務(wù)代碼，所以可能會忘記清除定時(shí)器，如果在組件卸載時(shí)沒有添加清楚定時(shí)器的函數(shù)就可能會造成內(nèi)存泄漏、網(wǎng)絡(luò)一直請求等問題。

但是使用hooks可以讓代碼更加的集中，方便我們管理，也不容易忘記：

useEffect(() => {     let timer = setInterval(() => {         // ...     }, 1000)     return () => {         if (timer) clearInterval(timer)     } }, [//...])

3、邏輯復(fù)用方便

class組件的邏輯復(fù)用通常用render props以及HOC兩種方式。react hooks提供了自定義hooks來復(fù)用邏輯。

下面以獲取鼠標(biāo)在頁面的位置的邏輯復(fù)用為例：

class組件render props方式復(fù)用

import React, { Component } from 'react'  class MousePosition extends Component {   constructor(props) {     super(props)     this.state = {       x: 0,       y: 0     }   }    handleMouseMove = (e) => {     const { clientX, clientY } = e     this.setState({       x: clientX,       y: clientY     })   }    componentDidMount() {     document.addEventListener('mousemove', this.handleMouseMove)   }    componentWillUnmount() {     document.removeEventListener('mousemove', this.handleMouseMove)   }    render() {     const { children } = this.props     const { x, y } = this.state     return(       <div>         {           children({x, y})         }       </div>     )   }  }  // 使用 class Index extends Component {   constructor(props) {     super(props)   }    render() {     return (       <MousePosition>         {           ({x, y}) => {             return (               <div>                 <p>x:{x}, y: {y}</p>               </div>             )           }         }       </MousePosition>     )   } }  export default Index

自定義hooks方式復(fù)用

import React, { useEffect, useState } from 'react'  function usePosition() {   const [x, setX] = useState(0)   const [y, setY] = useState(0)    const handleMouseMove = (e) => {     const { clientX, clientY } = e     setX(clientX)     setY(clientY)   }     useEffect(() => {     document.addEventListener('mousemove', handleMouseMove)     return () => {       document.removeEventListener('mousemove', handleMouseMove)     }   })   return [     {x, y}   ] }  // 使用 function Index() {   const [position] = usePosition()   return(     <div>       <p>x:{position.x},y:{position.y}</p>     </div>   ) }  export default Index

可以很明顯的看出使用hooks對邏輯復(fù)用更加的方便，使用的時(shí)候邏輯也更加清晰。

hooks常見的一些API使用

1、useState

語法

const [value, setValue] = useState(0)

這種語法方式是ES6的數(shù)組結(jié)構(gòu)，數(shù)組的第一個(gè)值是聲明的狀態(tài)，第二個(gè)值是狀態(tài)的改變函數(shù)。

每一幀都有獨(dú)立的狀態(tài)

個(gè)人理解針對每一幀獨(dú)立的狀態(tài)是采用了閉包的方法來實(shí)現(xiàn)的。

function Example() {   const [val, setVal] = useState(0)   const timeoutFn = () => {       setTimeout(() => {         // 取得的值是點(diǎn)擊按鈕的狀態(tài)，不是最新的狀態(tài)           console.log(val)       }, 1000)   }   return (       <>           <p>{val}</p>           <button onClick={()=>setVal(val+1)}>+</button>           <button onClick={timeoutFn}>alertNumber</button>       </>   ) }

當(dāng)組件的狀態(tài)或者props更新時(shí)，該函數(shù)組件會被重新調(diào)用渲染，并且每一次的渲染都是獨(dú)立的都有自己獨(dú)立的props以及state，不會影響其他的渲染。

2、useEffect

語法

useEffect(() => {     //handler function...          return () => {         // clean side effect     } }, [//dep...])

useEffect接收一個(gè)回調(diào)函數(shù)以及依賴項(xiàng)，當(dāng)依賴項(xiàng)發(fā)生變化時(shí)才會執(zhí)行里面的回調(diào)函數(shù)。useEffect類似于class組件didMount、didUpdate、willUnmount的生命周期函數(shù)。

注意點(diǎn)

• useEffect是異步的在組件渲染完成后才會執(zhí)行

• useEffect的回調(diào)函數(shù)只能返回一個(gè)清除副作用的處理函數(shù)或者不返回

• 如果useEffect傳入的依賴項(xiàng)是空數(shù)組那么useEffect內(nèi)部的函數(shù)只會執(zhí)行一次

3、useMemo、useCallback

useMemo和useCallback主要用于減少組件的更新次數(shù)、優(yōu)化組件性能的。

• useMemo接收一個(gè)回調(diào)函數(shù)以及依賴項(xiàng)，只有依賴項(xiàng)變化時(shí)才會重新執(zhí)行回調(diào)函數(shù)。

• useCallback接收一個(gè)回調(diào)函數(shù)以及依賴項(xiàng)，并且返回該回調(diào)函數(shù)的memorize版本，只有在依賴項(xiàng)重新變化時(shí)才會重新新的memorize版本。

語法

const memoDate = useMemo(() => data, [//dep...]) const memoCb = useCallback(() => {//...}, [//dep...])

在優(yōu)化組件性能時(shí)針對class組件我們一般使用React.PureComponent，PureComponent會在shouldUpdate進(jìn)行一次錢比較，判斷是否需要更新；針對函數(shù)組件我們一般使用React.memo。但是在使用react hooks時(shí)由于每一次渲染更新都是獨(dú)立的（生成了新的狀態(tài)），即使使用了React.memo，也還是會重新渲染。

比如下面這種場景，改變子組件的name值后由于父組件更新后每次都會生成新值（addAge函數(shù)會改變），所以子組件也會重新渲染。

function Parent() {   const [name, setName] = useState('cc')   const [age, setAge] = useState(22)    const addAge = () => {     setAge(age + 1)   }    return (     <>       <p>父組件</p>       <input value={name} onChange={(e) => setName(e.target.value)} />       <p>age: {age}</p>       <p>-------------------------</p>       <Child addAge={addAge} />     </>   ) }  const Child = memo((props) => {   const { addAge } = props   console.log('child component update')   return (     <>       <p>子組件</p>       <button onClick={addAge}>click</button>     </>   ) })

使用useCallback優(yōu)化

function Parent() {   const [name, setName] = useState('cc')   const [age, setAge] = useState(22)    const addAge = useCallback(() => {     setAge(age + 1)   }, [age])    return (     <>       <p>父組件</p>       <input value={name} onChange={(e) => setName(e.target.value)} />       <p>age: {age}</p>       <p>-------------------------</p>       <Child addAge={addAge} />     </>   ) }  const Child = memo((props) => {   const { addAge } = props   console.log('child component update')   return (     <>       <p>子組件</p>       <button onClick={addAge}>click</button>     </>   ) })

只有useCallback的依賴性發(fā)生變化時(shí)，才會重新生成memorize函數(shù)。所以當(dāng)改變name的狀態(tài)是addAge不會變化。

4、useRef

useRef類似于react.createRef。

const node = useRef(initRef)

useRef 返回一個(gè)可變的 ref 對象，其 current 屬性被初始化為傳入的參數(shù)（initRef）

作用在DOM上

const node = useRef(null) <input ref={node} />

這樣可以通過node.current屬性訪問到該DOM元素。

需要注意的是useRef創(chuàng)建的對象在組件的整個(gè)生命周期內(nèi)保持不變，也就是說每次重新渲染函數(shù)組件時(shí)，返回的ref 對象都是同一個(gè)（使用 React.createRef ，每次重新渲染組件都會重新創(chuàng)建 ref）。

5、useReducer

useReducer類似于redux中的reducer。

語法

const [state, dispatch] = useReducer(reducer, initstate)

useReducer傳入一個(gè)計(jì)算函數(shù)和初始化state，類似于redux。通過返回的state我們可以訪問狀態(tài)，通過dispatch可以對狀態(tài)作修改。

const initstate = 0; function reducer(state, action) {   switch (action.type) {     case 'increment':       return {number: state.number + 1};     case 'decrement':       return {number: state.number - 1};     default:       throw new Error();   } } function Counter(){     const [state, dispatch] = useReducer(reducer, initstate);     return (         <>           Count: {state.number}           <button onClick={() => dispatch({type: 'increment'})}>+</button>           <button onClick={() => dispatch({type: 'decrement'})}>-</button>         </>     ) }

6、useContext

通過useContext我們可以更加方便的獲取上層組件提供的context。

父組件

import React, { createContext, Children } from 'react' import Child from './child'  export const MyContext = createContext()  export default function Parent() {    return (     <div>       <p>Parent</p>       <MyContext.Provider value={{name: 'cc', age: 21}}>         <Child />       </MyContext.Provider>     </div>   ) }

子組件

import React, { useContext } from 'react' import { MyContext } from './parent'  export default function Parent() {   const data = useContext(MyContext) // 獲取父組件提供的context   console.log(data)   return (     <div>       <p>Child</p>     </div>   ) }

使用步驟

• 父組件創(chuàng)建并導(dǎo)出context：export const MyContext = createContext()
• 父組件使用provider和value提供值：<MyContext.provide value={{name: 'cc', age: 22}} />
• 子組件導(dǎo)入父組件的context：import { MyContext } from './parent'
• 獲取父組件提供的值：const data = useContext(MyContext)

不過在多數(shù)情況下我們都不建議使用context，因?yàn)闀黾咏M件的耦合性。

7、useLayoutEffect

useEffect 在全部渲染完畢后才會執(zhí)行；useLayoutEffect 會在 瀏覽器 layout之后，painting之前執(zhí)行，并且會柱塞DOM；可以使用它來讀取 DOM 布局并同步觸發(fā)重渲染。

export default function LayoutEffect() {   const [color, setColor] = useState('red')   useLayoutEffect(() => {       alert(color) // 會阻塞DOM的渲染   });   useEffect(() => {       alert(color) // 不會阻塞   })   return (       <>         <div id="myDiv" style={{ background: color }}>顏色</div>         <button onClick={() => setColor('red')}>紅</button>         <button onClick={() => setColor('yellow')}>黃</button>       </>   ) }

上面的例子中useLayoutEffect會在painting之前執(zhí)行，useEffect在painting之后執(zhí)行。

hooks讓函數(shù)組件擁有了內(nèi)部狀態(tài)、生命周期，使用hooks讓代碼更加的簡介，自定義hooks方便了對邏輯的復(fù)用，并且擺脫了class組件的this問題；但是在使用hooks時(shí)會產(chǎn)生一些閉包問題，需要仔細(xì)使用。

【