react 生命週期變遷

wills 發表於2019-09-11

React中元件提供了對應的生命週期支援,

定義元件的的方法:

  1. create-react-class模組
  2. class 類

它們之間的的區別這裡就不展開了,具體可檢視官方文件 區別,我們繼續說生命週期

初次渲染

當元件初次渲染到DOM元素上時會呼叫以下方法:

constructor(props)

建構函式

static getDerivedStateFromProps

static getDerivedStateFromProps(props, state)
這是一個靜態方法,它是訪問不到元件的例項的,注意它是在state和props更新時都會觸發的,不同於已被廢棄的componentWillReceiveProps

render

渲染呈現,它是類元件內必須定義的方法

componentDidMount

虛擬DOM渲染到頁面節點成功後呼叫

元件更新

當元件內state 或 傳入的props 更改時會呼叫下面的方法:

static getDerivedStateFormProps(props, state)

同上

shouldComponentUpdate

shouldComponentUpdate(nextProps, nextState)

這個方法我們比較常用,我們可以在通過this.props this.state取到 舊的props、state,可以與形參內的新的Props和state進行比較 返回true與false決定元件是否重新render

render

渲染裝載節點

getSnapshotBeforeUpdate

getSnapshotBeforeUpdate(prevProps,prevProps)

Snapsshot 快照,在render 方法呼叫後應用到節點前呼叫此方法,我們可以在此方法內訪問節點在更新前的一些資料,return 出去,我們可以在componentDidUpdate的第三個形參接收到我們return 出去的資料做進一步處理應用

componentDidUpdate

componentDidUpdate(prevProps, propsState, snapshot)

更新完成後呼叫,這裡跟componentDidMount類似,可以做一些請求等操作

componentWillUnmount

元件解除安裝前呼叫,列如在元件內 setInterval 時 可以

錯誤捕捉

static getDerivedStateFromState

componentDidCatch

即將取消的生命週期

componentWillMount componentWillUpdate componentWillReceviedProps

will


相關文章

React

從零開始react實戰:雲書籤-1 react環境搭建

總覽篇:react 實戰之雲書籤本篇是實戰系列的第一篇,主要是搭建 react 開發環境,在create-react-app的基礎上加上如下功能:antd 元件庫按需引入 ,支援主題定製支援 less
React|設計模式

React Hooks 深入系列 —— 設計模式

本文是 React Hooks 深入系列的後續。此篇詳細介紹了 Hooks 相對 class 的優勢所在, 並介紹了相關 api 的設計思想, 同時對 Hooks 如何對齊 class 的生命週期鉤子
React

React Step by Step

react官方指引反覆強調 props與 state 區別。基本上 props 類似於其他語言中的形參,state則相當於內部臨時變數。一個是對外溝通的橋樑,而另一個則為互動私有變數。state 基於
Android|React|iOS

react-native 仿原生自定義彈窗|iOS/Android 彈窗效果

基於react-native技術開發的自定義模態框rnPop,結合原生Modal功能,實現類似android、ios、微信彈窗效果。目錄結構呼叫方法一:// 引入rnPop.js元件import RN
React

[譯]React v16.9 新特性

今天我們釋出了 React 16.9。它包含了一些新特性、bug修復以及新的棄用警告,以便與籌備接下來的主要版本。一、新棄用重新命名 Unsafe 生命週期方法一年前,我們宣佈 unsafe 生命週期
React

ReactNative分散式熱更新系統

熱更新是一個非常方便的方案。在應對大量使用者和深度定製的時候一定不能使用開源的方案。一般第三方的這種方案,伺服器頻寬較小,或者不夠靈活,不能滿足自己的想法。這裡推薦自己實現對應的熱更新方案。只需要少量
React

React hooks實戰總結

一、什麼是hooks?react 於19年2月份在16.8版本中新增了hook這一特性,已經過去了半年多了,社群的各種文章解析頁汗牛充棟,本文將結合自己的專案實踐,對react hooks做一個全面的
React

【React技術棧】從零開始手寫redux

寫在開始之前:作為一個記性不太好的人,學完的東西總是很容易忘記,因此需要反反覆覆得去學習和理解,堅持記錄是一個很好的習慣,也有助於後期自己回顧。因水平有限,文章中部分內容可能存在錯誤,如果有誤,歡迎在
React

react16常見api以及原理剖析

Vue 與 React 兩個框架的粗略區別對比Vue 的優勢包括:模板和渲染函式的彈性選擇簡單的語法及專案建立更快的渲染速度和更小的體積React 的優勢包括:更適用於大型應用和更好的可測試性同時適用
前端|React

指尖前端重構(React)技術調研分析

重構前的技術文件調研與分析,包括技術選型為什麼選擇react,應用過程中的注意事項等。一、為什麼選擇ReactReact是當前前端應用最廣泛的框架。三大SPA框架 Angular、React、Vue比
React

Fluent-UI 一套受 Fluent Design System 啟發的 React 元件庫

1. 前言Website | GithubReact 元件庫已經有好多了,其中也有很多高質量的範例,但是如果你看多了其他元件庫的樣式,我相信 Fluent-UI 可以給你一個別致的選擇。2. 亮點Ac
React

【React系列】動手實現一個react-redux

react-redux 是什麼react-redux 是 redux 官方 React 繫結庫。它幫助我們連線UI層和資料層。本文目的不是介紹 react-redux 的使用,而是要動手實現一個簡易的