日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
面試官：說說對ReactHooks的理解？解決了什么問題？

本文轉(zhuǎn)載自微信公眾號「JS每日一題」，作者灰灰。轉(zhuǎn)載本文請聯(lián)系JS每日一題公眾號。

成都創(chuàng)新互聯(lián)專注于寧縣網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供寧縣營銷型網(wǎng)站建設(shè)，寧縣網(wǎng)站制作、寧縣網(wǎng)頁設(shè)計、寧縣網(wǎng)站官網(wǎng)定制、小程序設(shè)計服務(wù)，打造寧縣網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供寧縣網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

一、是什么

Hook 是 React 16.8 的新增特性。它可以讓你在不編寫 class 的情況下使用 state 以及其他的 React 特性

至于為什么引入hook，官方給出的動機是解決長時間使用和維護react過程中常遇到的問題，例如：

  • 難以重用和共享組件中的與狀態(tài)相關(guān)的邏輯
  • 邏輯復(fù)雜的組件難以開發(fā)與維護，當(dāng)我們的組件需要處理多個互不相關(guān)的 local state 時，每個生命周期函數(shù)中可能會包含著各種互不相關(guān)的邏輯在里面
  • 類組件中的this增加學(xué)習(xí)成本，類組件在基于現(xiàn)有工具的優(yōu)化上存在些許問題
  • 由于業(yè)務(wù)變動，函數(shù)組件不得不改為類組件等等

在以前，函數(shù)組件也被稱為無狀態(tài)的組件，只負(fù)責(zé)渲染的一些工作

因此，現(xiàn)在的函數(shù)組件也可以是有狀態(tài)的組件，內(nèi)部也可以維護自身的狀態(tài)以及做一些邏輯方面的處理

二、有哪些

上面講到，Hooks讓我們的函數(shù)組件擁有了類組件的特性，例如組件內(nèi)的狀態(tài)、生命周期

最常見的hooks有如下：

  • useState
  • useEffect
  • 其他

useState

首先給出一個例子，如下：

 
 
 
 
    
  
  
  
  
  1. import React, { useState } from 'react'; 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3. function Example() { 
    4.   
  
  
  
  4.   // 聲明一個叫 "count" 的 state 變量 
    5.   
  
  
  
  5.   const [count, setCount] = useState(0); 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7.   return ( 
    8.   
  
  
  
  8.     
     
    9.   
  
  
  
  9.       
    You clicked {count} times
     
    10.   
  
  
  
  10.        setCount(count + 1)}> 
    11.   
  
  
  
  11.         Click me 
    12.   
  
  
  
  12.        
    13.   
  
  
  
  13.     
 
  •   ); 
  • } 

    • 在函數(shù)組件中通過useState實現(xiàn)函數(shù)內(nèi)部維護state，參數(shù)為state默認(rèn)的值，返回值是一個數(shù)組，第一個值為當(dāng)前的state，第二個值為更新state的函數(shù)

    該函數(shù)組件等價于的類組件如下：

     
 
 
 
      
  
  
  
  
    1. class Example extends React.Component { 
      2.   
  
  
  
    2.   constructor(props) { 
      3.   
  
  
  
    3.     super(props); 
      4.   
  
  
  
    4.     this.state = { 
      5.   
  
  
  
    5.       count: 0 
      6.   
  
  
  
    6.     }; 
      7.   
  
  
  
    7.   } 
      8.   
  
  
  
    8.  
      9.   
  
  
  
    9.   render() { 
      10.   
  
  
  
    10.     return ( 
      11.   
  
  
  
    11.       
       
      12.   
  
  
  
    12.         
      You clicked {this.state.count} times
       
      13.   
  
  
  
    13.          this.setState({ count: this.state.count + 1 })}> 
      14.   
  
  
  
    14.           Click me 
      15.   
  
  
  
    15.          
      16.   
  
  
  
    16.       
     
  •     ); 
  •   } 
  • } 

    • 從上述兩種代碼分析，可以看出兩者區(qū)別：

    • state聲明方式：在函數(shù)組件中通過 useState 直接獲取，類組件通過constructor 構(gòu)造函數(shù)中設(shè)置
    • state讀取方式：在函數(shù)組件中直接使用變量，類組件通過this.state.count的方式獲取
    • state更新方式：在函數(shù)組件中通過 setCount 更新，類組件通過this.setState()

    總的來講，useState 使用起來更為簡潔，減少了this指向不明確的情況

    useEffect

    useEffect可以讓我們在函數(shù)組件中進行一些帶有副作用的操作

    同樣給出一個計時器示例：

     
 
 
 
      
  
  
  
  
    1. class Example extends React.Component { 
      2.   
  
  
  
    2.   constructor(props) { 
      3.   
  
  
  
    3.     super(props); 
      4.   
  
  
  
    4.     this.state = { 
      5.   
  
  
  
    5.       count: 0 
      6.   
  
  
  
    6.     }; 
      7.   
  
  
  
    7.   } 
      8.   
  
  
  
    8.  
      9.   
  
  
  
    9.   componentDidMount() { 
      10.   
  
  
  
    10.     document.title = `You clicked ${this.state.count} times`; 
      11.   
  
  
  
    11.   } 
      12.   
  
  
  
    12.   componentDidUpdate() { 
      13.   
  
  
  
    13.     document.title = `You clicked ${this.state.count} times`; 
      14.   
  
  
  
    14.   } 
      15.   
  
  
  
    15.  
      16.   
  
  
  
    16.   render() { 
      17.   
  
  
  
    17.     return ( 
      18.   
  
  
  
    18.       
       
      19.   
  
  
  
    19.         
      You clicked {this.state.count} times
       
      20.   
  
  
  
    20.          this.setState({ count: this.state.count + 1 })}> 
      21.   
  
  
  
    21.           Click me 
      22.   
  
  
  
    22.          
      23.   
  
  
  
    23.       
     
  •     ); 
  •   } 
  • } 

    • 從上面可以看見，組件在加載和更新階段都執(zhí)行同樣操作

    而如果使用useEffect后，則能夠?qū)⑾嗤倪壿嫵殡x出來，這是類組件不具備的方法

    對應(yīng)的useEffect示例如下：

     
 
 
 
      
  
  
  
  
    1. import React, { useState, useEffect } from 'react'; 
      2.   
  
  
  
    2. function Example() { 
      3.   
  
  
  
    3.   const [count, setCount] = useState(0); 
      4.   
  
  
  
    4.   
      5.   
  
  
  
    5.   useEffect(() => {    document.title = `You clicked ${count} times`;  }); 
      6.   
  
  
  
    6.   return ( 
      7.   
  
  
  
    7.     
       
      8.   
  
  
  
    8.       
      You clicked {count} times
       
      9.   
  
  
  
    9.        setCount(count + 1)}> 
      10.   
  
  
  
    10.         Click me 
      11.   
  
  
  
    11.        
      12.   
  
  
  
    12.     
     
  •   ); 
  • } 

    • useEffect第一個參數(shù)接受一個回調(diào)函數(shù)，默認(rèn)情況下，useEffect會在第一次渲染和更新之后都會執(zhí)行，相當(dāng)于在componentDidMount和componentDidUpdate兩個生命周期函數(shù)中執(zhí)行回調(diào)

    如果某些特定值在兩次重渲染之間沒有發(fā)生變化，你可以跳過對 effect 的調(diào)用，這時候只需要傳入第二個參數(shù)，如下：

     
 
 
 
      
  
  
  
  
    1. useEffect(() => { 
      2.   
  
  
  
    2.   document.title = `You clicked ${count} times`; 
      3.   
  
  
  
    3. }, [count]); // 僅在 count 更改時更新 
      4.

    上述傳入第二個參數(shù)后，如果 count 的值是 5，而且我們的組件重渲染的時候 count 還是等于 5，React 將對前一次渲染的 [5] 和后一次渲染的 [5] 進行比較，如果是相等則跳過effects執(zhí)行

    回調(diào)函數(shù)中可以返回一個清除函數(shù)，這是effect可選的清除機制，相當(dāng)于類組件中componentwillUnmount生命周期函數(shù)，可做一些清除副作用的操作，如下：

     
 
 
 
      
  
  
  
  
    1. useEffect(() => { 
      2.   
  
  
  
    2.     function handleStatusChange(status) { 
      3.   
  
  
  
    3.         setIsOnline(status.isOnline); 
      4.   
  
  
  
    4.     } 
      5.   
  
  
  
    5.  
      6.   
  
  
  
    6.     ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange); 
      7.   
  
  
  
    7.     return () => { 
      8.   
  
  
  
    8.         ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange); 
      9.   
  
  
  
    9.     }; 
      10.   
  
  
  
    10. }); 
      11.

    所以， useEffect相當(dāng)于componentDidMount，componentDidUpdate 和 componentWillUnmount 這三個生命周期函數(shù)的組合

    其它 hooks

    在組件通信過程中可以使用useContext，refs學(xué)習(xí)中我們也用到了useRef獲取DOM結(jié)構(gòu)......

    還有很多額外的hooks，如：

    • useReducer
    • useCallback
    • useMemo
    • useRef

    三、解決什么

    通過對上面的初步認(rèn)識，可以看到hooks能夠更容易解決狀態(tài)相關(guān)的重用的問題：

    • 每調(diào)用useHook一次都會生成一份獨立的狀態(tài)
    • 通過自定義hook能夠更好的封裝我們的功能

    編寫hooks為函數(shù)式編程，每個功能都包裹在函數(shù)中，整體風(fēng)格更清爽，更優(yōu)雅

    hooks的出現(xiàn)，使函數(shù)組件的功能得到了擴充，擁有了類組件相似的功能，在我們?nèi)粘Ｊ褂弥?，使用hooks能夠解決大多數(shù)問題，并且還擁有代碼復(fù)用機制，因此優(yōu)先考慮hooks

    參考文獻

    https://zh-hans.reactjs.org/docs/hooks-state.html

    https://zh-hans.reactjs.org/docs/hooks-effect.html

    https://www.cnblogs.com/lalalagq/p/9898531.html


    新聞名稱：面試官：說說對ReactHooks的理解？解決了什么問題？
    標(biāo)題路徑：http://www.5511xx.com/article/cdpgocj.html