1. 程式人生 > >React渲染機制與生命週期

React渲染機制與生命週期

1. 一個元件載入完畢後,如果既沒有外部驅動,也沒有內部驅動,是不會進行重新渲染的。

2. 元件想要對自身進行重新整理,可以通過呼叫setState()或者forceUpdate()來實現,這是讓元件重新整理的內部驅動

3.父元件通過給子元件傳遞props,告知子元件有可能重新渲染,子元件自己根據傳來的資料(在componentWillReceiveProps方法中)決定是否有必要進行重新渲染。

   父元件可以通過props吧資料傳遞給子元件,但需要注意的是這個傳遞動作只發生render的過程中,在元件已經渲染完畢後,傳遞會停止。

   加入父元件內部定義了變數A ,並賦給了子元件某個屬性,當A的值發生改變,並不足以讓子元件重新整理。只要A的變化不足以引發父元件呼叫自身render方法進行重新渲染,就不會傳遞。

   元件的資料傳遞需要render驅動,而不是由資料變化驅動的

   在父元件中呼叫setState()或者forceUpdate()都可以引起元件對自身的重新渲染。這就完成了第一步,成功把props傳給子元件。而子元件有全決定當接收到外部傳來的屬性的時候要怎麼處理,具體實現在componentWillReceiveProps方法裡,在元件首次渲染完畢之後,這個方法會在元件每次接收到外部傳來的props的時候被呼叫。

4. shouldComponentUpdate方法

    shouldComponentUpdate方法預設返回true,這就導致了每次更新都重新渲染。

    當React將要渲染元件時他會執行shouldComponentUpdate方法來看它是否返回true(組建應該更新,也就是重新渲染)。你只要重寫shouldComponentUpdate方法讓他根據情況返回true或者false來告訴React什麼時候重新渲染。

5.React元件生命週期

    首次例項化:getDefaultProps——>getInitialState——>componentWillMount——>render——>componentDidMount

    例項化完成後的更新:getInitialState——>componentWillMount——>render——>componentDidMount

  元件已存在時的狀態改變:componentwillReceiveProps——>shouldComponentUpdate——>componentWillUpdate——>render——>omponentDidUpdate

相關推薦

React渲染機制生命週期

1. 一個元件載入完畢後,如果既沒有外部驅動,也沒有內部驅動,是不會進行重新渲染的。 2. 元件想要對自身進行重新整理,可以通過呼叫setState()或者forceUpdate()來實現,這是讓元件重新整理的內部驅動 3.父元件通過給子元件傳遞props,告知子元件有可

Servlet執行機制生命週期

轉載自:http://blog.csdn.net/suwu150/article/details/51487398 Servlet的執行機制和生命週期 一、Servlet的執行機制            當瀏覽器傳送給伺服器一個Servlet的請求時,如果這個Serv

React基礎生命週期

React基礎 一.react簡介 1.起源於facebook,2013年5月開源 2.特點: I.宣告式設計。(宣告式是告訴計算機做什麼,不管他怎麼做 如map。而命令式式告訴計算機怎麼做 如for。) II.高效 III.靈活 IV.jsx V.元件 VI.單向資料流 3.虛擬DOM:

react渲染機制

span ldr render lin end js對象 get spl ring react組件 class Form extends React.Compoent{   constructor() {     super()   }   render(){     re

vue 元件通訊vuexcomputed生命週期(2)

二:vuex 先看官方文件 Vuex 官方文件:https://vuex.vuejs.org/zh-cn/ vuex 是一個專為vue應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態,並以相應的規則保證狀態以一種可預測的方式發生變化。 vuex 不同於lo

vue 元件通訊vuexcomputed生命週期(1)

一:元件 1:先看官方文件 什麼是元件 元件 (Component) 是 Vue.js 最強大的功能之一。元件可以擴充套件 HTML 元素,封裝可重用的程式碼。在較高層面上,元件是自定義元素,Vue.js 的編譯器為它新增特殊功能。在有些情況下,元件也可以表現為用 is 特性進行

spring作用域生命週期簡介

1. spring 作用域 使用scope屬性指定bean的作用域,預設值為singleton singleton 即單例模式,每次返回都是同一個bean prototype 原型模式,每次都會重新生成一個新的bean例項 2. bean生命週期簡介

React Native元件的生命週期

                  生命週期執行流程圖 元件的生命週期分成三個狀態:            1.Mounting(裝

是goal還是phase Maven外掛 plugin goal的執行生命週期 lifecycle phase的關係

分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!        

《第一行程式碼Android》學習總結第四章 Fragment的執行狀態生命週期

一、Fragment四種狀態 1、執行狀態 當一個Fragment是可見的,同時它所關聯的Activity正處於執行狀態,則該Fragment也處於執行狀態。 2、暫停狀態 當一個Activity處於暫停狀態,與它關聯的可見碎片就會處於暫停狀態。 3、停止狀態  &

[Android]Android四大基本元件介紹生命週期

http://www.cnblogs.com/bravestarrhu/archive/2012/05/02/2479461.html Android四大基本元件介紹與生命週期 Android四大基本元件分別是Activity,S

全域性初始化變數/全域性未初始化變數/全域性靜態變數/區域性變數的儲存位置,作用域,生命週期

比如如下程式程式碼片段 int a = 0; char *p1; static int x = 10; int main(void) { int b = 0; char

前端階段性總結(二):頁面渲染機制效能優化

引言: 轉前端一年了,期間工作較忙,也沒時間整理一些知識體系,此係列文章是對前端基礎的一些回顧與總結。本文主要介紹瀏覽器工作的原理以及一些優化手段。 一、瀏覽器渲染過程 1. 瀏覽器的主要結構: 2. 瀏覽器的多程序模型: 以chorme為例: Browser

Vue2.5筆記:Vue的例項生命週期

理解與認識 Vue 的例項是我們學習 Vue 非常重要的一步,也是非常必須的,因為例項是它的一個起點,也是它的一個入口,只有我們建立一個 Vue 例項之後,我們才行利用它進行一些列的操作。 首先 Vue 沒有完全遵守 MVVM 的架構模式,但是它的設計也受到了該模式的啟發,Vue 也就是在該模式中起到 VM(

React學習之旅----生命週期函式

app.js import React, { Component } from 'react'; // import logo from './assets/images/logo.svg'; // import './assets/css/App.css'; // 引入

【第三章】 DI 之 3.4 Bean的作用域生命週期

3.4  Bean的作用域         什麼是作用域呢?即“scope”,在面向物件程式設計中一般指物件或變數之間的可見範圍。而在Spring容器中是指其建立的Bean物件相對於其他Bean物件的請求可見範圍。       Spring提供“singleton”和“p

Android四大基本元件介紹生命週期

Android四大基本元件分別是Activity,Service服務,Content Provider內容提供者,BroadcastReceiver廣播接收器。 一:瞭解四大基本元件 Activity : 應用程式中,一個Activity通常就是一個單獨的螢幕,它上面可

C# Command命令(行為型模式)+佇列 實現事務,帶非同步命令重試機制生命週期

一、簡介 耦合是軟體不能抵禦變變化的根本性原因,不僅實體物件與實體物件之間有耦合關係(如建立性設計模式存在的原因),物件和行為之間也存在耦合關係.   二、實戰 1、常規開發中,我們經常會在控制器中或者Main方法中呼叫多個物件,進行批量的操作(完成一次事務性的操作),像下面這樣:

react 學習--元件的生命週期(三)銷燬階段

var HelloWorld = React.createClass({ render:function () { return ( <p>

Spring之Bean的作用域生命週期

在前面部落格中提到容器啟動獲得BeanDefinition物件中有一個scope 屬性。該屬性控制著bean物件的作用域。本章節介紹Bean的作用域及生命週期,瞭解bean是怎麼來的又怎麼沒的。 一、Bean的作用域在Bean容器啟動會讀取bean的xml配置檔案,然後將xml中每個bean元素分別轉換成Be