亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

URLOS / 2602人閱讀

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

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

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

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

state與props

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

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

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

setState是一個異步函數(shù)，并且多次setSate，會將其放入隊(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   //不會變化，是空
this.setState((preState) => ({
    react: preState.react + "我很喜歡react"
}), () => {
    console.log(this.state.react)              //這邊回調(diào)的this指向組件自身，而且獲取到最新的state
})

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

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

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

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

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

生命周期函數(shù)

什么事生命周期函數(shù)：就是說在某個階段會自動執(zhí)行的函數(shù)，叫做生命周期函數(shù)；

Mounting階段

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

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

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

虛擬dom

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

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

key值的對組件標(biāo)識，通過標(biāo)識來觀察新舊組件，是否一致，缺少了或增加了一目了然

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/108648.html

相關(guān)文章

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

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

    DobbyKim 評論0 收藏0

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

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

    spademan 評論0 收藏0

  • 深入理解js

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

    caikeal 評論0 收藏0

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

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

    freewolf 評論0 收藏1

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

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

    imccl 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<