成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

taoszu / 2112人閱讀

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

你覺得你用的react框架有什么特點(diǎn)呢？

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

react組件

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

react高階組件

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

虛擬DOM樹

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

react的生命周期

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

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


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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/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 評(píng)論0 收藏0

  • react入門學(xué)習(xí)筆記（一）

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

    leon 評(píng)論0 收藏0

  • React學(xué)習(xí)筆記3：用es2015（ES6）重寫CommentBox

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

    selfimpr 評(píng)論0 收藏0

  • React學(xué)習(xí)筆記—Why React?

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

    余學(xué)文 評(píng)論0 收藏0

  • 《深入react技術(shù)?！?em>學(xué)習(xí)筆記（一）初入React世界

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

    verano 評(píng)論0 收藏0

  • React學(xué)習(xí)筆記1：環(huán)境搭建

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

    Sourcelink 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<