深入理解React

前段時(shí)間參加了一場知乎Live萝勤,老師解析得很透徹,昨天仔細(xì)又聽了幾遍,寫個(gè)筆記分享出來:

理解React的工作原理

本質(zhì):

  1. UI = f(data)

    • 數(shù)據(jù)(props & state)驅(qū)動(dòng)function改變UI
    • 如何實(shí)現(xiàn),對(duì)大部分dev來說不care,virtual Dom澎办, DIff函數(shù)
    • virtual Dom如何比對(duì):
      • 動(dòng)態(tài)使用子組件的時(shí)候一定要使用key
      • diff算法:用來比對(duì)文件前后的變化(類似git diff,git diff的算法時(shí)間復(fù)雜度O(n^3))
      • react放棄比對(duì)(如下圖:A移動(dòng)到B),取其次:刪除A金砍,R上增加X,B上增加A(O(n)的時(shí)間復(fù)雜度局蚀,從根節(jié)點(diǎn)往下比對(duì),先比較類型恕稠,類型不同琅绅,會(huì)觸發(fā)Mount,類型相同會(huì)觸發(fā)update)
      • image
      • key的作用:由于react使用了另一種比對(duì)方式鹅巍,當(dāng)遇到如下場景千扶,會(huì)產(chǎn)生很多不必要的渲染消耗,動(dòng)態(tài)產(chǎn)生的子組件需要key這個(gè)prop:
        image
      • 1.key的值在兄弟節(jié)點(diǎn)之間唯一骆捧,2.key的值在渲染的過程中要穩(wěn)定
  2. 一切都是組件
    組件化:軟件都像樂高積木一樣
    組件化的模型不需要關(guān)心別人的積木怎么搭
    react中組件可以做任何事情

  3. 聲明式編程 (Declarative Programming)
    實(shí)現(xiàn)了申明式:很少去調(diào)用react的api澎羞,聲明式,而不是主動(dòng)去調(diào)用API改變

冒泡:拍桌子-》拍大樓-》拍地球
jq敛苇,命名式設(shè)計(jì)妆绞,對(duì)冒泡的處理:bind(), live(), delegate(),on()

JSX的優(yōu)勢(shì)與局限

爭議:HTML內(nèi)容,CSS樣式枫攀,JS動(dòng)態(tài)括饶。全都放到一個(gè)文件里
結(jié)論:應(yīng)該遵循相關(guān)邏輯code應(yīng)該放到一起的原則
CSS侵入性:引入一個(gè)class影響全局css class
麻煩:jsx需要babel,又需要webpack

render函數(shù):
1.花括號(hào)里不能寫語句,只能寫表達(dá)式
2.純函數(shù)来涨,不要使用push图焰,reverse。蹦掐。

使用props還是state

react一切皆組件技羔,小組件組成大組件
props:組件外部傳入的數(shù)據(jù)
state:組件內(nèi)部的狀態(tài)僵闯,一個(gè)組件的state可以作為
傳給子組件的數(shù)據(jù)來源,一個(gè)組件改變自己的狀態(tài)只能改變state藤滥,絕對(duì)不能修改傳入的props


image

盡量構(gòu)建一個(gè)state很少的組件(無狀態(tài))盡量使用props解決問題

生命周期

三種過程:

  • mount:從無到有
  • update: 因?yàn)闋顟B(tài)改變或者屬性改變鳖粟,分為state
    change引發(fā)的,和props引發(fā)的
  • unmount:從有到無的過程

mount過程:

getDefaultProps(默認(rèn)props)
getInitialState(初始的state)
componentWillMount(mount之前做的事情)
render(執(zhí)行這個(gè)改變state與props)
componentDidMount(只在瀏覽器端執(zhí)行超陆,服務(wù)器端吐出來的是字符串)

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

shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate

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

componentWillReceiveProps
shouldComponentUpdate(可以截胡牺弹,節(jié)省不必要的渲染性能開銷浦马,提高react性能)
componentWillUpdate
render
componentDidUpdate

為什么盡量使用無狀態(tài)組件

組件分解时呀,遵守函數(shù)式編程的原則,大部分組件以純函數(shù)形式表現(xiàn)(單元測試晶默,少bug)

組件分類為:有狀態(tài)+無狀態(tài)有些寬泛谨娜,也可以有組件什么都不畫

import React from 'react';

export default class HeartBeat extends React.Component {
  render() {
    return null;
  }

  componentDidMount() {
    this.timer = setInterval(() => {
      fetch('/api/v1/heartbeat');
    }, 5000);
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }
}

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

HOC應(yīng)用場景:如果功能在組件之間可以共享磺陡,那么創(chuàng)建HOC

包含方式創(chuàng)建:

const HoC = (WrappedComponent) => {
    const WrappingComponent = (props) => (
        <div className="foo">
            <WrappedCompoent {...props} />
        </div>
    );
    return WrappingComponent;
};

繼承方式創(chuàng)建(不推薦):

const HoC = (WrappedComponent) => {
    class WrappingComponent extends WrappendComponent {
        render() (
            const {user, ...otherProps} = this.props;
            this.props = otherProps;
            return super.render();
        }
    }
    return WrappingComponent;
};

一個(gè)HOC沒有說只有一個(gè)組件類作為參數(shù):

const HoC = (WrappedComponent, LoginView) => {
    const WrappingComponent = () => {
         const {user} = this.props;  
         if (user) {
            return <WrappedComponent {...this.props} />
         } else {
            return <LoginView {...this.props} />
         }
    };
    return WrappingComponent;
};

組件之間通訊

對(duì)react來說趴梢,組件間通信的確是一件棘手的事情,所以在構(gòu)建大型應(yīng)用的時(shí)候币他,我們不得不引入第三方的東西來處理(比如:redux)

  1. 父子通信關(guān)系
    方法一:
    • 父傳子:props直接傳
    • 子傳父:父通過props傳遞函數(shù)讓子調(diào)用來影響父
      方法二:
    • ref(不推薦)
    • callback(promise)


      父子通信
  2. 兄弟通信關(guān)系
    父組件造兩個(gè)函數(shù)傳給兩個(gè)子組件坞靶,父組件橋接作用,讓兩個(gè)子組件通信(很笨拙)


    兄弟通信
  3. 任意位置兩個(gè)組件通信
    全局變量+emmit


    任意位置組件通信
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末蝴悉,一起剝皮案震驚了整個(gè)濱河市彰阴,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌拍冠,老刑警劉巖尿这,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異庆杜,居然都是意外死亡射众,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門晃财,熙熙樓的掌柜王于貴愁眉苦臉地迎上來叨橱,“玉大人,你說我怎么就攤上這事断盛〕猓” “怎么了?”我有些...
    開封第一講書人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵郑临,是天一觀的道長栖博。 經(jīng)常有香客問我,道長厢洞,這世上最難降的妖魔是什么仇让? 我笑而不...
    開封第一講書人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任典奉,我火速辦了婚禮,結(jié)果婚禮上丧叽,老公的妹妹穿的比我還像新娘卫玖。我一直安慰自己,他們只是感情好踊淳,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開白布假瞬。 她就那樣靜靜地躺著,像睡著了一般迂尝。 火紅的嫁衣襯著肌膚如雪脱茉。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,713評(píng)論 1 312
  • 那天垄开,我揣著相機(jī)與錄音琴许,去河邊找鬼。 笑死溉躲,一個(gè)胖子當(dāng)著我的面吹牛榜田,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播锻梳,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼箭券,長吁一口氣:“原來是場噩夢(mèng)啊……” “哼!你這毒婦竟也來了疑枯?” 一聲冷哼從身側(cè)響起辩块,我...
    開封第一講書人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎神汹,沒想到半個(gè)月后庆捺,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡屁魏,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年滔以,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片氓拼。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡你画,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出桃漾,到底是詐尸還是另有隱情坏匪,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布撬统,位于F島的核電站适滓,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏恋追。R本人自食惡果不足惜凭迹,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一罚屋、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧嗅绸,春花似錦脾猛、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至蚀狰,卻和暖如春愉昆,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背造锅。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來泰國打工撼唾, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留廉邑,地道東北人哥蔚。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像蛛蒙,于是被迫代替她去往敵國和親糙箍。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • 在目前的前端社區(qū)牵祟,『推崇組合深夯,不推薦繼承(prefer composition than inheritance)...
    Wenliang閱讀 77,690評(píng)論 16 125
  • React+Redux非常精煉咕晋,良好運(yùn)用將發(fā)揮出極強(qiáng)勁的生產(chǎn)力。但最大的挑戰(zhàn)來自于函數(shù)式編程(FP)范式收奔。在工程化...
    小馬哥歸來閱讀 154,447評(píng)論 21 166
  • 原文地址: http://mxstbr.blog/2017/02/react-children-deepdive/...
    太平洋的微風(fēng)閱讀 5,562評(píng)論 0 3
  • 有些一時(shí)的吃虧掌呜,多年后發(fā)現(xiàn)反而是個(gè)福報(bào)。 這一周坪哄,我們聊到#吃多少虧才算夠#质蕉,就跟大家分享我自己的一段經(jīng)歷。 我做...
    劉軒在簡書閱讀 943評(píng)論 5 28
  • 今天就不重復(fù)文章內(nèi)容翩肌,以圖片代替模暗。 對(duì)于出售時(shí)間的思考有一下幾點(diǎn): 一、賦予自己時(shí)間意義念祭; 二兑宇、記錄時(shí)間開銷,清楚...
    莫哦墨閱讀 266評(píng)論 0 0