React學(xué)習(xí)筆記

taoszu 發(fā)布于2019-08-23 15:59 / 2104人閱讀

摘要：單向數(shù)據(jù)流數(shù)據(jù)一旦更新，會渲染整個。的渲染方式用戶輸入從獲取數(shù)據(jù)將數(shù)據(jù)傳給頂層組件將每個組件渲染出來由于是單向數(shù)據(jù)流，所以不會有雙向數(shù)據(jù)綁定數(shù)據(jù)模型的臟檢查確切的操作。

你覺得你用的react框架有什么特點呢？

1)使用jsx語法，可以在js中寫html。
2)單向數(shù)據(jù)流：數(shù)據(jù)一旦更新，會渲染整個app。
react的渲染方式：
用戶輸入
從API獲取數(shù)據(jù)
將數(shù)據(jù)傳給頂層組件
React將每個組件渲染出來
由于是單向數(shù)據(jù)流，所以不會有雙向數(shù)據(jù)綁定、數(shù)據(jù)模型的臟檢查、確切的DOM操作。

react組件

可以接受參數(shù)、可復(fù)用、可以傳遞、返回結(jié)果(渲染組件)

react高階組件

高階組件就是實現(xiàn)組件的復(fù)用，接收一個組件返回一個新的組件。

虛擬DOM樹

javascript雖然快，但是操作DOM卻非常慢。

react的生命周期

安裝：創(chuàng)建組件的實例將其插入DOM時，將按以下順序調(diào)用這些方法：
constructor()
static getDerivedStateFromProps()
render()
componentDidMount()
更新：props or state的更改可能導(dǎo)致更新。重新呈現(xiàn)組件時，將按以下順序調(diào)用這些方法：
static getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()
卸載：從DOM中刪除組件時調(diào)用此方法。
componentWillUnmount()

setState是異步的還是同步的
異步

setState是如何實現(xiàn)的？
調(diào)用setState更新this.state不是馬上生效的，是異步。
然后之后會發(fā)生什么？
會執(zhí)行更新階段的life circle hooks，調(diào)用render函數(shù)的過程中會執(zhí)行diff算法。
Vdom
為什么需要vdom?
虛擬dom就是結(jié)構(gòu)樹和 dom 的結(jié)構(gòu)一樣的對象。
用虛擬dom配合diff算法找出需要更新的部分，避免額外更新dom的開銷。
Diff算法的原理

云服務(wù)器 GPU云服務(wù)器學(xué)習(xí)筆記學(xué)習(xí)筆記一基礎(chǔ)學(xué)習(xí)筆記深度學(xué)習(xí)筆記

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/102623.html

相關(guān)文章

React 入門學(xué)習(xí)筆記整理目錄

摘要：入門學(xué)習(xí)筆記整理一搭建環(huán)境入門學(xué)習(xí)筆記整理二簡介與語法入門學(xué)習(xí)筆記整理三組件入門學(xué)習(xí)筆記整理四事件入門學(xué)習(xí)筆記整理五入門學(xué)習(xí)筆記整理六組件通信入門學(xué)習(xí)筆記整理七生命周期入門學(xué)習(xí)筆記整理八入門學(xué)習(xí)筆記整理九路由React 入門學(xué)習(xí)筆記整理（一）——搭建環(huán)境 React 入門學(xué)習(xí)筆記整理（二）—— JSX簡介與語法 React 入門學(xué)習(xí)筆記整理（三）—— 組件 React 入門學(xué)習(xí)筆記整理（...

daryl 2019-04-23 11:57 評論0 收藏0
react入門學(xué)習(xí)筆記（一）

摘要：選擇的主要原因大概是因為該框架出現(xiàn)較早，感覺上會相對成熟，日后學(xué)習(xí)中遇到問題想要查找答案相對簡單一些，對，就是這么簡單。多說無益，接下來開始的學(xué)習(xí)，我按照我學(xué)習(xí)中帶著的問題來一一解答，完成我的入門筆記。主要是針對前端的組件化開發(fā)。這兩天得空，特意來折騰了以下時下火熱的前端框架react，至于為什么選react,作為一個初學(xué)者react和vue在技術(shù)上的優(yōu)劣我無權(quán)評論，也就不妄加評論了...

leon 2019-08-20 18:01 評論0 收藏0
React學(xué)習(xí)筆記3：用es2015（ES6）重寫CommentBox

摘要：新搭建的個人博客，本文地址學(xué)習(xí)筆記用重寫在一開始的時候配置中我們就加入了的支持，就是下面的配置，但之前的學(xué)習(xí)筆記都使用的完成，所以專門作一篇筆記，記錄使用完成創(chuàng)建相關(guān)文件修改，增加該入口文件修改，引入該文件做個簡單的測試，看下瀏覽器全部用來新搭建的個人博客，本文地址：React學(xué)習(xí)筆記3：用es2015（ES6）重寫CommentBox在一開始的時候webpack配置中我們就加入了e...

selfimpr 2019-08-19 17:30 評論0 收藏0
React學(xué)習(xí)筆記—Why React?

摘要：官方說法注本人英語二十六級是和用來創(chuàng)建用戶界面的庫。很多人將認(rèn)為是中的。怎么說呢現(xiàn)在的自己就是個跟風(fēng)狗啊，什么流行先學(xué)習(xí)了再說，再看看能不能應(yīng)用在具體項目上。暫時先停下的學(xué)習(xí)，坐等。不過學(xué)習(xí)的腳步還是跟不上潮流的發(fā)展速度啊。 Why React? 官方說法注：本人英語二十六級 React是Facebook和Instagram用來創(chuàng)建用戶界面的JavaScript庫。很多...

余學(xué)文 2019-08-21 10:28 評論0 收藏0
《深入react技術(shù)棧》學(xué)習(xí)筆記（一）初入React世界

摘要：前言以深入學(xué)習(xí)技術(shù)棧為線索，記錄下學(xué)習(xí)的重要知識內(nèi)容。要傳入時，必須使用屬性表達(dá)式。如果要使用自定義屬性，要使用前綴這與標(biāo)準(zhǔn)是一致的。前言以《深入學(xué)習(xí)react技術(shù)棧》為線索，記錄下學(xué)習(xí)React的重要知識內(nèi)容。本系列文章沒有涵蓋全部的react知識內(nèi)容，只是記錄下了學(xué)習(xí)之路上的重要知識點，一方面是自己的總結(jié)，同時拿出來和在學(xué)習(xí)react的人們一塊分享，共同進(jìn)步。正文一：rea...

verano 2019-08-20 14:47 評論0 收藏0
React學(xué)習(xí)筆記1：環(huán)境搭建

摘要：新搭建的個人博客，本文地址學(xué)習(xí)筆記環(huán)境搭建本文的書寫環(huán)境為，之后會補(bǔ)充下的差異創(chuàng)建學(xué)習(xí)目錄初始化項目根據(jù)相關(guān)提示完善信息，入口文件安裝相關(guān)包，并且使用也就是支持，需要包，因為我之前做個一些相關(guān)項目，所以部分包已經(jīng)全局安裝，比如等等，大家新搭建的個人博客，本文地址：React學(xué)習(xí)筆記1：環(huán)境搭建本文的書寫環(huán)境為mac，之后會補(bǔ)充windows下的差異 1、創(chuàng)建學(xué)習(xí)目錄 mkdir l...

Sourcelink 2019-08-19 17:26 評論0 收藏0