成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

react基礎(chǔ)學(xué)習(xí)記錄一

URLOS / 2616人閱讀

摘要：虛擬的構(gòu)建在組件渲染到網(wǎng)頁(yè)前會(huì)執(zhí)行一個(gè)這個(gè)函數(shù)必須和一起使用該函數(shù)在組件更新完后會(huì)自動(dòng)執(zhí)行，第三個(gè)參數(shù)是的返回值階段發(fā)生在組件的刪除前，會(huì)自動(dòng)執(zhí)行，我們常用于清除組件之前被添加的還會(huì)繼續(xù)執(zhí)行的東西。

react 學(xué)習(xí)記錄

自己學(xué)習(xí)，記錄便于后面回顧

基礎(chǔ)知識(shí)點(diǎn)的記憶：

state與props

state是組件自己的數(shù)據(jù)，而props是父組件通過(guò)屬性賦值方式將其傳送給組件；這樣達(dá)到了，父子組件數(shù)據(jù)的聯(lián)通

state的賦值方式，推薦用函數(shù)式賦值

this.setState(() => ({
    react: "i like"
}))

setState是一個(gè)異步函數(shù)，并且多次setSate，會(huì)將其放入隊(duì)列中，合并成一次進(jìn)行執(zhí)行

正因?yàn)槭钱惒降暮瘮?shù)，所以當(dāng)我們改變后不能在同步的代碼中直接獲取，有兩種方式可以解決

constructor() {
    this.state = {
        react: ""
    }
}
this.setState((preState) => ({
    react: "i very like"
}))
this.setState((preState) => ({                   //
    react: preState.react + "我很喜歡react"
}))
this.state.react   //不會(huì)變化，是空
this.setState((preState) => ({
    react: preState.react + "我很喜歡react"
}), () => {
    console.log(this.state.react)              //這邊回調(diào)的this指向組件自身，而且獲取到最新的state
})

上面setState函數(shù)中有兩個(gè)參數(shù)，第一個(gè)參數(shù)是一個(gè)函數(shù)，會(huì)自動(dòng)將最近修改的最新的state，傳入進(jìn)來(lái)；第二個(gè)參數(shù)是一個(gè)也是函數(shù)，this指向組件自身；兩個(gè)函數(shù)的執(zhí)行都是異步的，因?yàn)閟etState就是一個(gè)異步函數(shù)

而子組件怎么想父組件傳送數(shù)據(jù)呢？這通過(guò)父組件先子組件賦值方法，子組件通過(guò)調(diào)用父組件的方法，來(lái)達(dá)到將其數(shù)據(jù)返回給父組件，所以最終props的數(shù)據(jù)還是在父組件的方法中

組件的顯示是有什么決定的，就是render，return的結(jié)果，return結(jié)果中有用到j(luò)sx對(duì)象，則需要引入import React from "react"

return中的jsx組件只能被一個(gè)div包裹，組件不能并列；但可以通過(guò)來(lái)占位，優(yōu)點(diǎn)是其不會(huì)顯示在dom節(jié)點(diǎn)中

怎么不轉(zhuǎn)譯html形式的文本,dangerouslySetInnerHTML = {{ __html: xxx}};第一層{}是說(shuō)明里面要填寫(xiě)js語(yǔ)句，第二層則是說(shuō)明寫(xiě)的是一個(gè)對(duì)象，整句話的意思就是innerHTML=XXX

生命周期函數(shù)

什么事生命周期函數(shù)：就是說(shuō)在某個(gè)階段會(huì)自動(dòng)執(zhí)行的函數(shù)，叫做生命周期函數(shù)；

Mounting階段

constructor:用于初始化state，一個(gè)組件只執(zhí)行一次
 static getDerivedStateFromProps(props, state);需要返回一個(gè)對(duì)象或者null，不能返回undefined；該函數(shù)的作用是可以用父組件傳進(jìn)來(lái)的props的值在render之前進(jìn)行修改；該函數(shù)在state修改update的時(shí)候也會(huì)執(zhí)行
render函數(shù)，不是Component內(nèi)置的函數(shù)，所以這個(gè)生命函數(shù)必須要寫(xiě)；用于創(chuàng)建虛擬dom，即js對(duì)象
componentDidMount;在組件掛載完后進(jìn)行的操作，只執(zhí)行一次，就在掛載的最后階段；一般在這個(gè)階段進(jìn)行ajax請(qǐng)求；在這個(gè)階段修改了state的值，上面的兩個(gè)函數(shù)render和getDerivedStateFromProps也會(huì)在再次執(zhí)行

updating階段
就是當(dāng)組件的state發(fā)生改變的時(shí)候會(huì)再次執(zhí)行一些生命周期函數(shù)
會(huì)先執(zhí)行getDerivedStateFromProps；接著shouldComponentUpdate(nextProps, nextState)，參數(shù)是最新的數(shù)據(jù)nextState和nextProps，可以和之前的this.state,this.props進(jìn)行操作比較詢問(wèn)是否允許進(jìn)行更新返回一個(gè)布爾值，false則不需更新，后面的生命周期函數(shù)不會(huì)再自動(dòng)執(zhí)行這個(gè)false常用來(lái)提升性能，因?yàn)楦附M件更新state時(shí)，子組件的render函數(shù)也會(huì)被執(zhí)行，我們返回false，就不會(huì)執(zhí)行沒(méi)必要的子組件的render，提高了性能，返會(huì)true則，會(huì)進(jìn)行下一個(gè)函數(shù)render。虛擬dom的構(gòu)建；在組件渲染到網(wǎng)頁(yè)前會(huì)執(zhí)行一個(gè)getSnapshotBeforeUpdate(prevProps, prevState)這個(gè)函數(shù)必須和componentDidUpdate(prevProps, prevState, snapshot)一起使用;該函數(shù)在組件更新完后會(huì)自動(dòng)執(zhí)行，第三個(gè)參數(shù)是getSnapshotBeforeUpdate的返回值

Unmounting階段
發(fā)生在組件的刪除前，會(huì)自動(dòng)執(zhí)行，我們常用于清除組件之前被添加的還會(huì)繼續(xù)執(zhí)行的東西。例如定時(shí)器

虛擬dom

只理解了一些簡(jiǎn)單的概念：虛擬dom就是js對(duì)象，是替代真實(shí)dom，讓js更加高效的進(jìn)行操作；
state發(fā)生update后render函數(shù)會(huì)生成新的虛擬dom，來(lái)和之前之前老的虛擬dom進(jìn)行比較：
主要采取幾種策略：

同層比較，說(shuō)白話就是從大頭才是比較，大頭壞了整個(gè)不要了，重新創(chuàng)建；這種方法再第一層不同，后面都相同的情況下，會(huì)帶來(lái)性能的降低，因?yàn)樗鼤?huì)重新渲染創(chuàng)建；但是提高的算法的速度，很簡(jiǎn)單就一層一層的比較，不用循環(huán)遞歸；放棄了一些極端情況，帶來(lái)了算法上的提高

key值的對(duì)組件標(biāo)識(shí)，通過(guò)標(biāo)識(shí)來(lái)觀察新舊組件，是否一致，缺少了或增加了一目了然

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/108648.html

相關(guān)文章

  • React Router 學(xué)習(xí)手冊(cè)(基礎(chǔ)篇)

    摘要：該手冊(cè)是基于和使用教程學(xué)習(xí)編寫(xiě)而成，可能會(huì)有描述不夠清楚的地方，大家可自行參考原文，為提供了一個(gè)完整的路由庫(kù)，它允許你通過(guò)的變化來(lái)控制組件的切換與變化有關(guān)全家桶的其余相關(guān)文章，可以查看以下鏈接，會(huì)持續(xù)更新別眨眼看安裝使用進(jìn)行安裝之后 該手冊(cè)是基于react-router 和 React Router 使用教程 學(xué)習(xí)編寫(xiě)而成，可能會(huì)有描述不夠清楚的地方，大家可自行參考原文， React ...

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

  • React項(xiàng)目服務(wù)端部署過(guò)程記錄（create-react-app）

    摘要：但在完成最后部署上線是遇到一些小問(wèn)題，由于搜索無(wú)果，便記錄于此。由于是自己的項(xiàng)目，自己的云服務(wù)器。由于之前部署項(xiàng)目時(shí)也碰到過(guò)這種類(lèi)似的問(wèn)題，當(dāng)時(shí)是通過(guò)修改配置解決的。 1.前言 說(shuō)在最最前 這次分享比較啰嗦啦，想說(shuō)的很多。實(shí)際問(wèn)題的解決是 2-3.恍然大悟 部分，可以直接跳過(guò)其他多余的絮叨哦～ 最近入職新公司由于前端主要是react，遂開(kāi)始去學(xué)習(xí)了解react，這兩天跟著電子書(shū)《The...

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

  • 深入理解js

    摘要：詳解十大常用設(shè)計(jì)模式力薦深度好文深入理解大設(shè)計(jì)模式收集各種疑難雜癥的問(wèn)題集錦關(guān)于，工作和學(xué)習(xí)過(guò)程中遇到過(guò)許多問(wèn)題，也解答過(guò)許多別人的問(wèn)題。介紹了的內(nèi)存管理。 延遲加載 (Lazyload) 三種實(shí)現(xiàn)方式 延遲加載也稱(chēng)為惰性加載，即在長(zhǎng)網(wǎng)頁(yè)中延遲加載圖像。用戶滾動(dòng)到它們之前，視口外的圖像不會(huì)加載。本文詳細(xì)介紹了三種延遲加載的實(shí)現(xiàn)方式。 詳解 Javascript十大常用設(shè)計(jì)模式 力薦~ ...

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

  • 記錄一下自己的春招，唯品會(huì)、360、京東offer已收、騰訊offer_call已達(dá)！??！

    摘要：春招結(jié)果五月份了，春招已經(jīng)接近尾聲，因?yàn)榈搅酥芪逋砩蟿偤糜锌?，所以?jiǎn)單地記錄一下自己的春招過(guò)程。我的春招從二月初一直持續(xù)到四月底，截止今天，已經(jīng)斬獲唯品會(huì)電商前端研發(fā)部大數(shù)據(jù)與威脅分析事業(yè)部京東精銳暑假實(shí)習(xí)生的騰訊的是早上打過(guò)來(lái)的。 春招結(jié)果 五月份了，春招已經(jīng)接近尾聲，因?yàn)榈搅酥芪逋砩蟿偤糜锌?，所以?jiǎn)單地記錄一下自己的春招過(guò)程。我的春招從二月初一直持續(xù)到四月底，截止今天，已經(jīng)斬獲唯品...

    freewolf 評(píng)論0 收藏1

  • react-redux 開(kāi)發(fā)實(shí)踐與學(xué)習(xí)分享

    摘要：簡(jiǎn)介是一個(gè)狀態(tài)管理的庫(kù)，由基礎(chǔ)上開(kāi)發(fā)出來(lái)，與的主要區(qū)別是只有一個(gè)，關(guān)于，后文會(huì)詳述。這個(gè)函數(shù)接受四個(gè)參數(shù)，它們分別是，，和。之前在注冊(cè)頁(yè)面，如果沒(méi)有滿足相關(guān)條件，則觸發(fā)的行為。具體定義了項(xiàng)目中觸發(fā)的行為類(lèi)別，通過(guò)屬性來(lái)區(qū)別于不同的行為。 redux簡(jiǎn)介 redux是一個(gè)js狀態(tài)管理的庫(kù)，由flux基礎(chǔ)上開(kāi)發(fā)出來(lái)，與flux的主要區(qū)別是只有一個(gè)store，關(guān)于store，后文會(huì)詳述。在各...

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

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

0條評(píng)論

閱讀需要支付1元查看
<