日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

 
 
 
 

  
  
  
  
import React, { useState } from 'react'; 
  
  
  
  
 
  
  
  
  
function Example() { 
  
  
  
  
  // 聲明一個(gè)叫 "count" 的 state 變量 
  
  
  
  
  const [count, setCount] = useState(0); 
  
  
  
  
 
  
  
  
  
  return ( 
  
  
  
  
    
 
  
  
  
  
      
You clicked {count} times
 
  
  
  
  
       setCount(count + 1)}> 
  
  
  
  
        Click me 
  
  
  
  
       
  
  
  
  
    

 
 
 
 

  
  
  
  
class Example extends React.Component { 
  
  
  
  
  constructor(props) { 
  
  
  
  
    super(props); 
  
  
  
  
    this.state = { 
  
  
  
  
      count: 0 
  
  
  
  
    }; 
  
  
  
  
  } 
  
  
  
  
 
  
  
  
  
  render() { 
  
  
  
  
    return ( 
  
  
  
  
      
 
  
  
  
  
        
You clicked {this.state.count} times
 
  
  
  
  
         this.setState({ count: this.state.count + 1 })}> 
  
  
  
  
          Click me 
  
  
  
  
         
  
  
  
  
      

 
 
 
 

  
  
  
  
class Example extends React.Component { 
  
  
  
  
  constructor(props) { 
  
  
  
  
    super(props); 
  
  
  
  
    this.state = { 
  
  
  
  
      count: 0 
  
  
  
  
    }; 
  
  
  
  
  } 
  
  
  
  
 
  
  
  
  
  componentDidMount() { 
  
  
  
  
    document.title = `You clicked ${this.state.count} times`; 
  
  
  
  
  } 
  
  
  
  
  componentDidUpdate() { 
  
  
  
  
    document.title = `You clicked ${this.state.count} times`; 
  
  
  
  
  } 
  
  
  
  
 
  
  
  
  
  render() { 
  
  
  
  
    return ( 
  
  
  
  
      
 
  
  
  
  
        
You clicked {this.state.count} times
 
  
  
  
  
         this.setState({ count: this.state.count + 1 })}> 
  
  
  
  
          Click me 
  
  
  
  
         
  
  
  
  
      

 
 
 
 

  
  
  
  
import React, { useState, useEffect } from 'react'; 
  
  
  
  
function Example() { 
  
  
  
  
  const [count, setCount] = useState(0); 
  
  
  
  
  
  
  
  
  
  useEffect(() => {    document.title = `You clicked ${count} times`;  }); 
  
  
  
  
  return ( 
  
  
  
  
    
 
  
  
  
  
      
You clicked {count} times
 
  
  
  
  
       setCount(count + 1)}> 
  
  
  
  
        Click me 
  
  
  
  
       
  
  
  
  
    

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

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

 
 
 
 

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

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

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

 
 
 
 

  
  
  
  
useEffect(() => { 
  
  
  
  
    function handleStatusChange(status) { 
  
  
  
  
        setIsOnline(status.isOnline); 
  
  
  
  
    } 
  
  
  
  
 
  
  
  
  
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange); 
  
  
  
  
    return () => { 
  
  
  
  
        ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange); 
  
  
  
  
    }; 
  
  
  
  
}); 
 
 
 
 

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

其它 hooks

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

還有很多額外的hooks，如：

• useReducer
• useCallback
• useMemo
• useRef

三、解決什么

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

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

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

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

參考文獻(xiàn)

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