react基礎學習記錄一

URLOS 發布于2019-08-26 12:24 / 2554人閱讀

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

react 學習記錄

自己學習，記錄便于后面回顧

基礎知識點的記憶：

state與props

state是組件自己的數據，而props是父組件通過屬性賦值方式將其傳送給組件；這樣達到了，父子組件數據的聯通

state的賦值方式，推薦用函數式賦值

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

setState是一個異步函數，并且多次setSate，會將其放入隊列中，合并成一次進行執行

正因為是異步的函數，所以當我們改變后不能在同步的代碼中直接獲取，有兩種方式可以解決

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)              //這邊回調的this指向組件自身，而且獲取到最新的state
})

上面setState函數中有兩個參數，第一個參數是一個函數，會自動將最近修改的最新的state，傳入進來；第二個參數是一個也是函數，this指向組件自身；兩個函數的執行都是異步的，因為setState就是一個異步函數

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

組件的顯示是有什么決定的，就是render，return的結果，return結果中有用到jsx對象，則需要引入import React from "react"

return中的jsx組件只能被一個div包裹，組件不能并列；但可以通過來占位，優點是其不會顯示在dom節點中

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

生命周期函數

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

Mounting階段

constructor:用于初始化state，一個組件只執行一次

 static getDerivedStateFromProps(props, state);需要返回一個對象或者null，不能返回undefined；該函數的作用是可以用父組件傳進來的props的值在render之前進行修改；該函數在state修改update的時候也會執行

render函數，不是Component內置的函數，所以這個生命函數必須要寫；用于創建虛擬dom，即js對象

componentDidMount;在組件掛載完后進行的操作，只執行一次，就在掛載的最后階段；一般在這個階段進行ajax請求；在這個階段修改了state的值，上面的兩個函數render和getDerivedStateFromProps也會在再次執行

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

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

虛擬dom

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

同層比較，說白話就是從大頭才是比較，大頭壞了整個不要了，重新創建；這種方法再第一層不同，后面都相同的情況下，會帶來性能的降低，因為它會重新渲染創建；但是提高的算法的速度，很簡單就一層一層的比較，不用循環遞歸；放棄了一些極端情況，帶來了算法上的提高

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

云服務器 GPU云服務器最后一條記錄 a記錄一域名 asp刪除一條記錄 cn域名的ns記錄一

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108648.html

React Router 學習手冊(基礎篇)

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

DobbyKim 2019-08-22 10:40 評論0 收藏0
React項目服務端部署過程記錄（create-react-app）

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

spademan 2019-08-22 15:22 評論0 收藏0
深入理解js

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

caikeal 2019-08-26 11:39 評論0 收藏0
記錄一下自己的春招，唯品會、360、京東offer已收、騰訊offer_call已達！！！

摘要：春招結果五月份了，春招已經接近尾聲，因為到了周五晚上剛好有空，所以簡單地記錄一下自己的春招過程。我的春招從二月初一直持續到四月底，截止今天，已經斬獲唯品會電商前端研發部大數據與威脅分析事業部京東精銳暑假實習生的騰訊的是早上打過來的。春招結果五月份了，春招已經接近尾聲，因為到了周五晚上剛好有空，所以簡單地記錄一下自己的春招過程。我的春招從二月初一直持續到四月底，截止今天，已經斬獲唯品...

freewolf 2019-08-22 16:57 評論0 收藏1
react-redux 開發實踐與學習分享

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

imccl 2019-08-21 16:42 評論0 收藏0