欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用React?Hooks模擬生命周期的實(shí)現(xiàn)方法

 更新時(shí)間:2023年02月08日 09:15:08   作者:barnett_y  
這篇文章主要介紹了使用React?Hooks模擬生命周期,本文舉例說(shuō)明如何使用 hooks 來(lái)模擬比較常見(jiàn)的 class 組件生命周期,需要的朋友可以參考下

前言

在 React 16.8 之前,函數(shù)組件只能是無(wú)狀態(tài)組件,也不能訪問(wèn) react 生命周期。hook 做為 react 新增特性,可以讓我們?cè)诓痪帉?xiě) class 的情況下使用 state 以及其他的 react 特性,例如生命周期。接下來(lái)我們便舉例說(shuō)明如何使用 hooks 來(lái)模擬比較常見(jiàn)的 class 組件生命周期。

constructor

class 組件

class Example extends Component {
    constructor() {
        super();
        this.state = {
            count: 0
        }
    }
    render() {
      return null;
  }
}

函數(shù)組件不需要構(gòu)造函數(shù),可以通過(guò)調(diào)用 useState 來(lái)初始化 state

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

componentDidMount

class 組件訪問(wèn) componentDidMount

class Example extends React.Component {
  componentDidMount() {
    console.log('I am mounted!');
  }
  render() {
    return null;
  }
}

使用 hooks 模擬 componentDidMount

function Example() {
  useEffect(() => console.log('mounted'), []);
  return null;
}

useEffect 擁有兩個(gè)參數(shù),第一個(gè)參數(shù)作為回調(diào)函數(shù)會(huì)在瀏覽器布局和繪制完成后調(diào)用,因此它不會(huì)阻礙瀏覽器的渲染進(jìn)程。
第二個(gè)參數(shù)是一個(gè)數(shù)組

  • 當(dāng)數(shù)組存在并有值時(shí),如果數(shù)組中的任何值發(fā)生更改,則每次渲染后都會(huì)觸發(fā)回調(diào)。
  • 當(dāng)它不存在時(shí),每次渲染后都會(huì)觸發(fā)回調(diào)。
  • 當(dāng)它是一個(gè)空列表時(shí),回調(diào)只會(huì)被觸發(fā)一次,類(lèi)似于 componentDidMount。

shouldComponentUpdate

class 組件訪問(wèn) shouldComponentUpdate

shouldComponentUpdate(nextProps, nextState){
  console.log('shouldComponentUpdate')
  // return true 更新組件
  // return false 則不更新組件
}

hooks 模擬 shouldComponentUpdate

const MyComponent = React.memo(
    _MyComponent, 
    (prevProps, nextProps) => nextProps.count !== prevProps.count
)

React.memo 包裹一個(gè)組件來(lái)對(duì)它的 props 進(jìn)行淺比較,但這不是一個(gè) hooks,因?yàn)樗膶?xiě)法和 hooks 不同,其實(shí)React.memo 等效于 PureComponent,但它只比較 props。

componentDidUpdate

class 組件訪問(wèn) componentDidUpdate

componentDidMount() {
  console.log('mounted or updated');
}
 
componentDidUpdate() {
  console.log('mounted or updated');
}

使用 hooks 模擬 componentDidUpdate

useEffect(() => console.log('mounted or updated'));

值得注意的是,這里的回調(diào)函數(shù)會(huì)在每次渲染后調(diào)用,因此不僅可以訪問(wèn) componentDidUpdate,還可以訪問(wèn)componentDidMount,如果只想模擬 componentDidUpdate,我們可以這樣來(lái)實(shí)現(xiàn)。

const mounted = useRef();
useEffect(() => {
  if (!mounted.current) {
    mounted.current = true;
  } else {
   console.log('I am didUpdate')
  }
});

useRef 在組件中創(chuàng)建“實(shí)例變量”。它作為一個(gè)標(biāo)志來(lái)指示組件是否處于掛載或更新階段。當(dāng)組件更新完成后在會(huì)執(zhí)行 else 里面的內(nèi)容,以此來(lái)單獨(dú)模擬 componentDidUpdate。

componentWillUnmount

class 組件訪問(wèn) componentWillUnmount

componentWillUnmount() {
  console.log('will unmount');
}

hooks 模擬 componentWillUnmount

useEffect(() => {
  return () => {
    console.log('will unmount');
  }
}, []);

當(dāng)在 useEffect 的回調(diào)函數(shù)中返回一個(gè)函數(shù)時(shí),這個(gè)函數(shù)會(huì)在組件卸載前被調(diào)用。我們可以在這里面清除定時(shí)器或事件監(jiān)聽(tīng)器。

總結(jié)

  • 引入 hooks 的函數(shù)組件功能越來(lái)越完善,在多數(shù)情況下,我們完全可以使用 hook 來(lái)替代 class 組件。并且使用函數(shù)組件也有以下幾點(diǎn)好處。
  • 純函數(shù)概念,同樣的 props 會(huì)得到同樣的渲染結(jié)果。可以使用函數(shù)組合,嵌套,實(shí)現(xiàn)功能更加強(qiáng)大的組件。組件不會(huì)被實(shí)例化,整體渲染性能得到提升。
  • 但是 hooks 模擬的生命周期與class中的生命周期不盡相同,我們?cè)谑褂脮r(shí),還是需要思考業(yè)務(wù)場(chǎng)景下那種方式最適合。

參考鏈接

blog.solutotlv.com/react-class…

dev.to/trentyang/r…

到此這篇關(guān)于使用React Hooks模擬生命周期的文章就介紹到這了,更多相關(guān)React Hooks模擬生命周期內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • React中classnames庫(kù)使用示例

    React中classnames庫(kù)使用示例

    這篇文章主要為大家介紹了React中classnames庫(kù)使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-10-10
  • 一文詳解React?Redux使用方法

    一文詳解React?Redux使用方法

    這篇文章主要介紹了一文詳解React?Redux使用方法,文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容戒殺,具有一定的參考價(jià)值,需要的小伙伴可以參考一下
    2022-09-09
  • JavaScript中React面向組件編程(上)

    JavaScript中React面向組件編程(上)

    本文主要介紹了React組件中默認(rèn)封裝了很多屬性,有的是提供給開(kāi)發(fā)者操作的,其中有三個(gè)屬性非常重要:state、props、refs。感興趣的小伙伴可以參考閱讀
    2023-03-03
  • React替換傳統(tǒng)拷貝方法的Immutable使用

    React替換傳統(tǒng)拷貝方法的Immutable使用

    Immutable.js出自Facebook,是最流行的不可變數(shù)據(jù)結(jié)構(gòu)的實(shí)現(xiàn)之一。它實(shí)現(xiàn)了完全的持久化數(shù)據(jù)結(jié)構(gòu),使用結(jié)構(gòu)共享。所有的更新操作都會(huì)返回新的值,但是在內(nèi)部結(jié)構(gòu)是共享的,來(lái)減少內(nèi)存占用
    2023-02-02
  • 使用react-activation實(shí)現(xiàn)keepAlive支持返回傳參

    使用react-activation實(shí)現(xiàn)keepAlive支持返回傳參

    本文主要介紹了使用react-activation實(shí)現(xiàn)keepAlive支持返回傳參,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2022-05-05
  • react高階組件經(jīng)典應(yīng)用之權(quán)限控制詳解

    react高階組件經(jīng)典應(yīng)用之權(quán)限控制詳解

    在React中,高階組件是重用組件邏輯的一項(xiàng)高級(jí)技術(shù)。下面這篇文章主要給大家介紹了關(guān)于react高階組件經(jīng)典應(yīng)用之權(quán)限控制的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。
    2017-09-09
  • 解決React報(bào)錯(cuò)Functions are not valid as a React child

    解決React報(bào)錯(cuò)Functions are not valid as 

    這篇文章主要為大家介紹了React報(bào)錯(cuò)Functions are not valid as a React child解決詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-12-12
  • React?SSR?中的限流案例詳解

    React?SSR?中的限流案例詳解

    這篇文章主要介紹了React?SSR?之限流,React SSR 畢竟涉及到了服務(wù)端,有很多服務(wù)端特有的問(wèn)題需要考慮,而限流就是其中之一,本文會(huì)通過(guò)一個(gè)簡(jiǎn)單的案例來(lái)說(shuō)明,為什么服務(wù)端需要進(jìn)行限流,需要的朋友可以參考下
    2022-07-07
  • react最流行的生態(tài)替代antdpro搭建輕量級(jí)后臺(tái)管理

    react最流行的生態(tài)替代antdpro搭建輕量級(jí)后臺(tái)管理

    這篇文章主要為大家介紹了react最流行的生態(tài)替代antdpro搭建輕量級(jí)后臺(tái)管理示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-08-08
  • React經(jīng)典面試題之倒計(jì)時(shí)組件詳解

    React經(jīng)典面試題之倒計(jì)時(shí)組件詳解

    這些天也都在面試,面試的內(nèi)容也大多千篇一律,無(wú)外乎vue、react這些框架的一些原理,和使用方法,但是也遇到些有趣的題目,這篇文章主要給大家介紹了關(guān)于React經(jīng)典面試題之倒計(jì)時(shí)組件的相關(guān)資料,需要的朋友可以參考下
    2022-03-03

最新評(píng)論