亚洲 国产精品 日韩-亚洲 激情-亚洲 欧美 91-亚洲 欧美 成人日韩-青青青草视频在线观看-青青青草影院

千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機(jī)構(gòu)

手機(jī)站
千鋒教育

千鋒學(xué)習(xí)站 | 隨時(shí)隨地免費(fèi)學(xué)

千鋒教育

掃一掃進(jìn)入千鋒手機(jī)站

領(lǐng)取全套視頻
千鋒教育

關(guān)注千鋒學(xué)習(xí)站小程序
隨時(shí)隨地免費(fèi)學(xué)習(xí)課程

當(dāng)前位置:首頁(yè)  >  技術(shù)干貨  > web前端培訓(xùn)技術(shù)分享:如何深入理解JSX和React組件?

web前端培訓(xùn)技術(shù)分享:如何深入理解JSX和React組件?

來(lái)源:千鋒教育
發(fā)布人:qyf
時(shí)間: 2022-03-07 18:01:00 1646647260

  本期web前端培訓(xùn)技術(shù)分享:JSX其實(shí)是JavaScript對(duì)象,所以使用 React和JSX的時(shí)候一定要經(jīng)過(guò)編譯的過(guò)程。React核心機(jī)制虛擬DOM,可在內(nèi)存中創(chuàng)建的虛擬DOM元素。React利用虛擬DOM減少對(duì)實(shí)際DOM的操作提升性能,虛擬DOM也可以通過(guò)JavaScript來(lái)創(chuàng)建。

u=600336914,2537700399&fm=26&fmt=auto

  web前端培訓(xùn)技術(shù)分享:如何深入理解JSX和React組件?

  Reactjs 起源于Facebook內(nèi)部項(xiàng)目,是一個(gè)用來(lái)構(gòu)建用戶界面的 javascript 庫(kù),相當(dāng)于MVC架構(gòu)中的V層框架,與市面上其他框架不同的是,React 把每一個(gè)組件當(dāng)成了一個(gè)狀態(tài)機(jī),組件內(nèi)部通過(guò)state來(lái)維護(hù)組件狀態(tài)的變化,當(dāng)組件的狀態(tài)發(fā)生變化時(shí),React通過(guò)虛擬DOM技術(shù)來(lái)增量并且高效的更新真實(shí)DOM。

  1)、JSX的優(yōu)勢(shì)和局限

  1、把相關(guān)的code放到一起,好維護(hù),這樣就是一個(gè)單獨(dú)的組件所必須的。

  2、render函數(shù)是一個(gè)純函數(shù),沒(méi)有做渲染的事情,它只不過(guò)就是返回了一些指令,然后通過(guò)這些指令由React通過(guò)DOM或者虛擬DOM來(lái)進(jìn)行操作,所以react返回的結(jié)果都是通過(guò) React.createElement產(chǎn)生的結(jié)果

  3、jsx中的{}中只能是一個(gè)表達(dá)式,不能是一個(gè)語(yǔ)句,因?yàn)閖sx可以通過(guò)babel轉(zhuǎn)換成React.createElement的形式進(jìn)行渲染,但是React.createElement中的參數(shù)只能是一個(gè)表達(dá)式,不能是一個(gè)語(yǔ)句(比如for循環(huán)、if判斷等),同時(shí)jsx中的render函數(shù)的{}中不能使用push()、reverse()等數(shù)組方法,因?yàn)閞ender應(yīng)該是一個(gè)純函數(shù),純函數(shù)不應(yīng)該有副作用,渲染的應(yīng)該是state或者props,如果使用了push()、reverse()等數(shù)組方法,那么就會(huì)直接修改state或者props里面的數(shù)據(jù),而并不是產(chǎn)生新的數(shù)據(jù)

  2)、什么使用props什么時(shí)候使用state?

  在react中data包括:satae和props,props是從外部的組件中傳過(guò)來(lái)的數(shù)據(jù),而satae是組件內(nèi)部狀態(tài),一個(gè)組件的自己的satae可以作為傳遞給它子組件的props的數(shù)據(jù)來(lái)源,一個(gè)組件想要改變自己的狀態(tài)只能通過(guò)setState來(lái)進(jìn)行改變自己的狀態(tài),一個(gè)組件不能夠直接通過(guò)修改自己的props來(lái)改變自己的更新?tīng)顟B(tài),也不能修改自己的porps,因?yàn)樾薷淖约旱膒rops會(huì)很亂的。但凡props能夠搞定的事情,盡量不要使用state。

  將父級(jí)所傳遞的props,作為子級(jí)的state,是會(huì)產(chǎn)生值引用對(duì)象影響問(wèn)題,也就是我更改子級(jí)state,父級(jí)props被相應(yīng)更改

  3)、React組件的生命周期

  React組件的生命周期三種過(guò)程:

  mount:從無(wú)到有的過(guò)程

  update: 重新渲染,又分為state change引發(fā)的,和props引發(fā)的

  unmount:從有到無(wú)

  mount過(guò)程: getDefaultProps getInitialState componentWillMount render componentDidMount:這個(gè)函數(shù)只能在瀏覽器端執(zhí)行,但是使用react做服務(wù)器端渲染的時(shí)候,不能在服務(wù)器端執(zhí)行(因?yàn)樵诜?wù)器端突出出來(lái)的是一個(gè)字符串,根本上就沒(méi)有一個(gè)DOM-tree被mount的說(shuō)法,所以不會(huì)執(zhí)行),

  因state改變引發(fā)的update過(guò)程:

  shouldComponentUpdate componentWillUpdate render componentDidUpdate

  因父組件想要render這個(gè)組件改變引發(fā)的update過(guò)程:

  componentWillReceiveProps shouldComponentUpdate componentWillUpdate render componentDidUpdate

  如果當(dāng)父組件不需要重新渲染,shouldComponentUpdate 會(huì) 返回一個(gè)false,那樣后面的componentWillUpdate、render、componentDidUpdate 就不會(huì)執(zhí)行。

  無(wú)論是mount過(guò)程還是update過(guò)程中的render函數(shù)之前的聲明周期,獲取的到的state或者是props都是之前未改變的數(shù)據(jù),只有render函數(shù)之后,才是數(shù)據(jù)改變之后的狀態(tài),

  4)、為什么盡量構(gòu)建無(wú)狀態(tài)組件

  無(wú)狀態(tài)組件就是一個(gè)純函數(shù),盡量讓組件成為一個(gè)純函數(shù)形式的無(wú)狀態(tài)組件,因?yàn)榭梢詼p少一些bug出現(xiàn),我們應(yīng)該把一些有狀態(tài)組件(就是里面含有state)集中起來(lái)進(jìn)行管理,讓其子組件是一個(gè)無(wú)狀態(tài)組件,這樣好管理,好維護(hù),

  5)、創(chuàng)建高階組件(HoC,Higher-Order Component)

  HoC 高階組件使用場(chǎng)景把一個(gè)通用的功能,使用高階組件進(jìn)行共用,這樣就不必寫(xiě)同樣的功能代碼了。

  6)、組件之間通訊

  父組件通過(guò)屬性的形式向子組件傳遞參數(shù),子組件通過(guò)props接受父組件傳遞過(guò)來(lái)的參數(shù);

  子組件如果想和父組件通信,子組件要調(diào)用父組件傳遞過(guò)來(lái)的方法;

  兄弟組件之間的通訊可以借助于父組件作為中介,進(jìn)行傳遞數(shù)據(jù)(父組件中寫(xiě)兩個(gè)函數(shù),這兩個(gè)函數(shù)分別傳給兩個(gè)子組件,然后互相之間進(jìn)行相互引用,)

  任意組件之間的通訊可以通過(guò)設(shè)置一個(gè)全局變量來(lái)作為中介,進(jìn)行傳遞數(shù)據(jù)。

  如果這個(gè)項(xiàng)目比較大的話,當(dāng)然也可以使用redux進(jìn)行組件之間的通訊。

  如何深入理解JSX和React組件?以上就是為大家做的詳細(xì)介紹,如果您想了解更多關(guān)于web前端培訓(xùn)的相關(guān)資料及信息,可以咨詢我們的客服小姐姐,他們會(huì)為您做詳細(xì)的解答。

tags:
聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
10年以上業(yè)內(nèi)強(qiáng)師集結(jié),手把手帶你蛻變精英
請(qǐng)您保持通訊暢通,專屬學(xué)習(xí)老師24小時(shí)內(nèi)將與您1V1溝通
免費(fèi)領(lǐng)取
今日已有369人領(lǐng)取成功
劉同學(xué) 138****2860 剛剛成功領(lǐng)取
王同學(xué) 131****2015 剛剛成功領(lǐng)取
張同學(xué) 133****4652 剛剛成功領(lǐng)取
李同學(xué) 135****8607 剛剛成功領(lǐng)取
楊同學(xué) 132****5667 剛剛成功領(lǐng)取
岳同學(xué) 134****6652 剛剛成功領(lǐng)取
梁同學(xué) 157****2950 剛剛成功領(lǐng)取
劉同學(xué) 189****1015 剛剛成功領(lǐng)取
張同學(xué) 155****4678 剛剛成功領(lǐng)取
鄒同學(xué) 139****2907 剛剛成功領(lǐng)取
董同學(xué) 138****2867 剛剛成功領(lǐng)取
周同學(xué) 136****3602 剛剛成功領(lǐng)取
相關(guān)推薦HOT
今日頭條展現(xiàn)量是什么?今日頭條展現(xiàn)量規(guī)則分析

目前頭條用戶會(huì)發(fā)現(xiàn)微頭條和問(wèn)答新增了“展現(xiàn)量”指標(biāo)。那么這個(gè)今日頭條展現(xiàn)量是什么意思呢?如何提高呢?下面千鋒教育小編就和大家說(shuō)...詳情>>

2023-09-19 09:15:47
我想直播帶貨去哪里找貨源一件代發(fā)

現(xiàn)在直播帶貨是一個(gè)非常火的行業(yè),越來(lái)越多的人進(jìn)入到這個(gè)圈子,但是,認(rèn)真地說(shuō),直播帶貨能不能賺到錢(qián)還是要看自己。雖然這一行業(yè)火,收入高,...詳情>>

2023-09-19 08:41:02
入駐短視頻mcn需要多少錢(qián)?有哪些費(fèi)用?

眾所周知,現(xiàn)在短視頻成了很多人的自媒體創(chuàng)業(yè)道路之一,越來(lái)越多人喜歡在網(wǎng)上消遣時(shí)間,購(gòu)物等。也有很多優(yōu)秀的博主去做出很多新的內(nèi)容,那么入...詳情>>

2023-09-19 08:12:47
短視頻帶貨應(yīng)該注冊(cè)什么公司?需要什么資料?

短視頻大家應(yīng)該都非常熟悉,現(xiàn)在很多人都喜歡在閑暇的時(shí)候刷短視頻,短視頻平臺(tái)也開(kāi)始了直播帶貨,商家也都開(kāi)始創(chuàng)業(yè)了,那么短視頻帶貨需要營(yíng)業(yè)...詳情>>

2023-09-19 08:09:31
怎樣投抖加不花錢(qián)?別人能看出來(lái)嗎?

抖音一些視頻為了獲取更多點(diǎn)擊,一些博主機(jī)會(huì)投抖加。其實(shí)抖加的投放沒(méi)有絕對(duì)正確的方法,而不同賬號(hào)和視頻投放的策略都是不一樣的,不過(guò)一般情...詳情>>

2023-09-19 08:00:10
開(kāi)班信息
北京校區(qū)
  • 北京校區(qū)
  • 大連校區(qū)
  • 廣州校區(qū)
  • 成都校區(qū)
  • 杭州校區(qū)
  • 長(zhǎng)沙校區(qū)
  • 合肥校區(qū)
  • 南京校區(qū)
  • 上海校區(qū)
  • 深圳校區(qū)
  • 武漢校區(qū)
  • 鄭州校區(qū)
  • 西安校區(qū)
  • 青島校區(qū)
  • 重慶校區(qū)
  • 太原校區(qū)
  • 沈陽(yáng)校區(qū)
  • 南昌校區(qū)
  • 哈爾濱校區(qū)
免费XXXXX大片在线观看一区| 美日韩一区二区三区| 免费国产成人AⅤ观看| 人妻人人做人妻人人添| 天美传媒MV免费观看完整| 亚洲AV中文AⅤ无码AV不卡| 一本久道久久综合狠狠老| IGAO在线视频成人免费| 国产98色在线 | 日韩| 极品少妇被黑人白浆直流| 免费毛片45分钟| 少妇无码AV无码专区线Y| 亚洲成AV人影片在线观看| √天堂8资源中文在线| 欧美美女视频熟女一区二区| 色欲午夜无码久久久久久 | 98色精品视频在线| 国产成人AV在线影院| 久久精品国产精品亚洲色婷婷| 哦┅┅快┅┅用力啊┅┅村妇 | 男人J放进女人J无遮挡免费看| 色噜噜精品一区二区三区| 亚洲精品无码少妇30P| GAY男同帅哥网站在线观看| 国产福利在线永久视频| 久久久久亚洲AV无码专区首JN | 老司机午夜精品视频资源| 搡老女人老熟妇HHD| 亚洲精品欧美二区三区中文字幕| FREE性中国熟女HD| 果冻传媒蜜桃传媒精东豆| 欧美丰满熟妇人妻兽交视频| 西西人体自慰扒开下部93| 50岁丰满女人裸体毛茸茸| 国产精品国色综合久久| 蜜臀AV网站在线观看| 我是你可爱的小猫| 中文字幕天天躁日日躁狠狠躁免费| 寡妇好丰满奶好大| 两个黑人大战嫩白金发美女| 婷婷人人爽人人爽人人片| 在线播放无码后入内射少妇| 国产精华最好的产品有哪些| 免费A级毛片无码A| 性色AV一区二区三区人妻| 97久久超碰国产精品2021| 国产欧美VA欧美VA香蕉在| 欧美午夜性春猛交XXX| 亚洲国产AV一区二区三区四区| 把腿张开老子臊烂你的动漫| 久久成人国产精品| 特级做A爰片毛片免费看| 真实国产乱子伦精品一区二区三区| 国产精品白丝无码ThePorn| 嫩BBB槡BBBB搡BBBB| 亚洲AV中文乱码一区二| 大BBW大BBW超大BBW| 麻豆亚洲国产成人精品无码区 | 国产乱人伦AⅤ在线麻豆A| 欧美胖老太牲交XXⅩXXX| 亚洲精品无码永久在线观看你懂的 | 久久综合久久鬼色| 性色A∨人人爽网站| 成都私人家庭影院的推荐理由| 久久久久久久久精品无码中文字幕| 天天躁日日躁狠狠躁AV| XXXX内射美国老太太| 久久久综合香蕉尹人综合网| 小妖精又紧又湿高潮H视频69| YY影院电视剧大全| 老太奶性BBWBBWBBW| 亚洲AV无码专区亚洲AV不卡| 丰满少妇又爽又紧又丰满在线观看| 男男GAY无套国产| 亚洲熟女乱综合一区二区| 国产男男Gay做受| 肉丝超薄丝袜交一区二区| 7777精品伊人久久久大香线蕉| 精品香蕉99久久久久成人网站 | 国产精品久免费的黄网站| 人善交VIDEO另类HD| 中文字幕AV一区中文字幕天堂| 极品少妇XXXX精品少妇小说| 无码中文AV波多野结衣| 大胆欧美乱老熟妇伦电影免费| 欧美日韩一区二区在线视频精品| 夜夜爽夜夜叫夜夜高潮漏水| 黑人性狂欢在线播放| 午夜福利视频合集1000| 公交车上拨开少妇内裤进入| 让人一看就舒服的网名| 2022国产在线无码精品| 里面也请好好疼爱第三季| 亚洲乱码一区AV春药高潮| 国产一区二区在线视频| 无码精品A∨在线观看无广告| 粗大的内捧猛烈进出在线视频 | 爱情岛论坛自拍亚洲品质极速福利| 里面也请好好疼爱第三季| 阳台顶着岳刘晓莉的肥臀| 黑人巨大超大VIDEOSGRA| 亚洲AV成人无码人在线观看堂| 国产精品久久久久9999赢消| 少妇被又大又粗又爽毛片久久黑人| XXXⅩ少妇少妇XXXX范冰冰| 欧美成人AⅤ高清免费观看| 中国小帅男男GAYXNXX| 久久天天躁狠狠躁夜夜网站| 亚洲熟妇AV午夜无码不卡| 狠狠躁天天躁无码中文字幕图| 亚洲AⅤ无码一区二区波多野| 国产乱码卡二卡三卡43| 新妺妺窝人体色7777太粗| 国产精品免费无遮挡无码永久视频| 私人IMAX情侣影院家庭影院| 高清播放器欧美大片| 色五月激情中文字幕| 嗯~啊哈好深好骚啊哼| 色综合天天综合欧美综合| 夫妇当面交换作爱2| 双人床上做剧烈运动可以吗| 国产97在线 | 亚洲| 玩丰满少妇XXXXXⅩ性麻| 国产精品麻花传媒二三区别| 屠户家的小娇花哒哒啦爱你| 国产精品无码成人午夜电影| 西西人体444WWW高清大胆| 国内揄拍国内精品少妇国语| 亚洲成在人线视AV| 久久精品国产亚洲AV水果派| 一本一本大道香蕉久在线精品| 老公带朋友来家里C我怎么办| 中文无码字幕中文有码字幕| 欧美 狠狠操 888| ぱらだいす天堂中文网WWW| 日韩AV无码一区二区| 国产CHINESE男男GAY| 午夜成人影片在线观看免费完整高 | 成人夜间av大片免费观看| 妓女妓女影院妓女影库妓女网| 男人激烈吮乳吃奶视频免费| 69风韵老熟女口爆吞精| 欧美一区二区三放荡人妇| 办公室被公司领导C了很多次| 日本A级视频在线播放| 粉嫩呦福利视频导航大全| 无码精品人妻一区二区三区AV| 国产无套粉嫩白浆在线观看| 亚洲成国产人片在线观看| 久久天天躁狠狠躁夜夜AV不卡| 18未满禁止免费69影院| 欧美乱妇高清无乱码免费| 成人精品一区二区三区在线观看| 丝袜足控一区二区三区| 国内毛片毛片毛片毛片毛片毛片毛片毛片毛片毛片毛片毛片 | 国产精品久久久久9999| 亚洲成色WWW成人网站| 久久人人做人人妻人人玩精品HD | 国产AV无码专区亚洲AWWW| 亚洲AVT无码天堂网| 久久久久女人精品毛片| chi老女人老熟女HD| 少妇VIDES裸体BBWWHD| 国产午夜激无码AV片在线观看| 亚洲欧洲无码精品ⅤA| 女人丝不挂的正面裸体| 丰满性熟妇ⅩXXOOOZZX| 亚洲AV实录无码成人精品电影| 久久久久久精品人妻免费网站| AV老司机福利精品导航| 天堂中文最新版在线官网在线 | 免费观看30分钟哔哩哔哩视频| 被夫上司强迫的女人在线中文| 铜铜铜铜铜铜铜好多疼| 久久99精品国产99久久6尤物| √天堂8资源中文在线| 少妇精品久久久一区二区三区| 黄 色 网 站 免 费 涩涩屋| 2021国内精品久久久久精免费| 手机在线看永久AV片免费| 精东天美麻豆果冻传媒MV| 99精品久久久久精品双飞| 窝窝人体色WWW聚色窝| 久久亚洲SM情趣捆绑调教| 成人免费无码H黄网站WWW| 亚洲国产AV一区二区三区四区| 女女互磨互喷水高潮LES呻吟| 国产成人精品一区二三区在线观看| 亚洲日韩V无码中文字幕| 漂亮人妻沦陷精油按摩| 国产沙发午睡系列999| 中国老太太X×××XHD| 特黄 做受又硬又粗又大视频| 久久精品无码免费不卡| 成人福利国产午夜AV免费不卡在| 亚洲精品第一国产综合亚AV | 小雪尝禁果又粗又大的中国地图| 麻花传媒剧在线MV免费观看| 国产精品成人无码久久久| 中文字幕人妻在线中字|