資訊專欄INFORMATION COLUMN
摘要：虛擬的構建在組件渲染到網(wǎng)頁前會執(zhí)行一個這個函數(shù)必須和一起使用該函數(shù)在組件更新完后會自動執(zhí)行，第三個參數(shù)是的返回值階段發(fā)生在組件的刪除前，會自動執(zhí)行，我們常用于清除組件之前被添加的還會繼續(xù)執(zhí)行的東西。
react 學習記錄
自己學習，記錄便于后面回顧
基礎知識點的記憶：state與props
state是組件自己的數(shù)據(jù)，而props是父組件通過屬性賦值方式將其傳送給組件；這樣達到了，父子組件數(shù)據(jù)的聯(lián)通
state的賦值方式，推薦用函數(shù)式賦值
this.setState(() => ({
react: "i like"
}))
setState是一個異步函數(shù)，并且多次setSate，會將其放入隊列中，合并成一次進行執(zhí)行
正因為是異步的函數(shù)，所以當我們改變后不能在同步的代碼中直接獲取，有兩種方式可以解決
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，傳入進來；第二個參數(shù)是一個也是函數(shù)，this指向組件自身；兩個函數(shù)的執(zhí)行都是異步的，因為setState就是一個異步函數(shù)
而子組件怎么想父組件傳送數(shù)據(jù)呢？這通過父組件先子組件賦值方法，子組件通過調(diào)用父組件的方法，來達到將其數(shù)據(jù)返回給父組件，所以最終props的數(shù)據(jù)還是在父組件的方法中
組件的顯示是有什么決定的，就是render，return的結果，return結果中有用到jsx對象，則需要引入import React from "react"
return中的jsx組件只能被一個div包裹，組件不能并列；但可以通過
怎么不轉譯html形式的文本,dangerouslySetInnerHTML = {{ __html: xxx}};第一層{}是說明里面要填寫js語句，第二層則是說明寫的是一個對象，整句話的意思就是innerHTML=XXX
生命周期函數(shù)什么事生命周期函數(shù)：就是說在某個階段會自動執(zhí)行的函數(shù)，叫做生命周期函數(shù)；
Mounting階段
constructor:用于初始化state，一個組件只執(zhí)行一次
static getDerivedStateFromProps(props, state);需要返回一個對象或者null，不能返回undefined；該函數(shù)的作用是可以用父組件傳進來的props的值在render之前進行修改；該函數(shù)在state修改update的時候也會執(zhí)行
render函數(shù)，不是Component內(nèi)置的函數(shù)，所以這個生命函數(shù)必須要寫；用于創(chuàng)建虛擬dom，即js對象
componentDidMount;在組件掛載完后進行的操作，只執(zhí)行一次，就在掛載的最后階段；一般在這個階段進行ajax請求；在這個階段修改了state的值，上面的兩個函數(shù)render和getDerivedStateFromProps也會在再次執(zhí)行
updating階段
就是當組件的state發(fā)生改變的時候會再次執(zhí)行一些生命周期函數(shù)
會先執(zhí)行getDerivedStateFromProps；接著shouldComponentUpdate(nextProps, nextState)，參數(shù)是最新的數(shù)據(jù)nextState和nextProps，可以和之前的this.state,this.props進行操作比較詢問是否允許進行更新返回一個布爾值，false則不需更新，后面的生命周期函數(shù)不會再自動執(zhí)行這個false常用來提升性能，因為父組件更新state時，子組件的render函數(shù)也會被執(zhí)行，我們返回false，就不會執(zhí)行沒必要的子組件的render，提高了性能，返會true則，會進行下一個函數(shù)render。虛擬dom的構建；在組件渲染到網(wǎng)頁前會執(zhí)行一個getSnapshotBeforeUpdate(prevProps, prevState)這個函數(shù)必須和componentDidUpdate(prevProps, prevState, snapshot)一起使用;該函數(shù)在組件更新完后會自動執(zhí)行，第三個參數(shù)是getSnapshotBeforeUpdate的返回值
Unmounting階段
發(fā)生在組件的刪除前，會自動執(zhí)行，我們常用于清除組件之前被添加的還會繼續(xù)執(zhí)行的東西。例如定時器
只理解了一些簡單的概念：虛擬dom就是js對象，是替代真實dom，讓js更加高效的進行操作；
state發(fā)生update后render函數(shù)會生成新的虛擬dom，來和之前之前老的虛擬dom進行比較：
主要采取幾種策略：
同層比較，說白話就是從大頭才是比較，大頭壞了整個不要了，重新創(chuàng)建；這種方法再第一層不同，后面都相同的情況下，會帶來性能的降低，因為它會重新渲染創(chuàng)建；但是提高的算法的速度，很簡單就一層一層的比較，不用循環(huán)遞歸；放棄了一些極端情況，帶來了算法上的提高
key值的對組件標識，通過標識來觀察新舊組件，是否一致，缺少了或增加了一目了然
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/108648.html
摘要：該手冊是基于和使用教程學習編寫而成，可能會有描述不夠清楚的地方，大家可自行參考原文，為提供了一個完整的路由庫，它允許你通過的變化來控制組件的切換與變化有關全家桶的其余相關文章，可以查看以下鏈接，會持續(xù)更新別眨眼看安裝使用進行安裝之后 該手冊是基于react-router 和 React Router 使用教程 學習編寫而成，可能會有描述不夠清楚的地方，大家可自行參考原文， React ...
摘要：但在完成最后部署上線是遇到一些小問題，由于搜索無果，便記錄于此。由于是自己的項目，自己的云服務器。由于之前部署項目時也碰到過這種類似的問題，當時是通過修改配置解決的。 1.前言 說在最最前 這次分享比較啰嗦啦，想說的很多。實際問題的解決是 2-3.恍然大悟 部分，可以直接跳過其他多余的絮叨哦～ 最近入職新公司由于前端主要是react，遂開始去學習了解react，這兩天跟著電子書《The...
摘要：春招結果五月份了，春招已經(jīng)接近尾聲，因為到了周五晚上剛好有空，所以簡單地記錄一下自己的春招過程。我的春招從二月初一直持續(xù)到四月底，截止今天，已經(jīng)斬獲唯品會電商前端研發(fā)部大數(shù)據(jù)與威脅分析事業(yè)部京東精銳暑假實習生的騰訊的是早上打過來的。 春招結果 五月份了，春招已經(jīng)接近尾聲，因為到了周五晚上剛好有空，所以簡單地記錄一下自己的春招過程。我的春招從二月初一直持續(xù)到四月底，截止今天，已經(jīng)斬獲唯品...
摘要：簡介是一個狀態(tài)管理的庫，由基礎上開發(fā)出來，與的主要區(qū)別是只有一個，關于，后文會詳述。這個函數(shù)接受四個參數(shù)，它們分別是，，和。之前在注冊頁面，如果沒有滿足相關條件，則觸發(fā)的行為。具體定義了項目中觸發(fā)的行為類別，通過屬性來區(qū)別于不同的行為。 redux簡介 redux是一個js狀態(tài)管理的庫，由flux基礎上開發(fā)出來，與flux的主要區(qū)別是只有一個store，關于store，后文會詳述。在各...
閱讀 1257·2021-11-08 13:25
閱讀 1449·2021-10-13 09:40
閱讀 2781·2021-09-28 09:35
閱讀 744·2021-09-23 11:54
閱讀 1136·2021-09-02 15:11
閱讀 2442·2019-08-30 13:18
閱讀 1677·2019-08-30 12:51
閱讀 2696·2019-08-29 18:39
