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

資訊專欄INFORMATION COLUMN

深入理解react

CoderStudy / 1607人閱讀

摘要：最近在看源碼，發(fā)覺以前對的理解實在浮淺，這里記錄了一些以前疏忽的點。和在里面，經(jīng)過的解析后，會變成執(zhí)行后的結(jié)果。原來對的理解就是類似這種寫法，現(xiàn)在看了實現(xiàn)之后才理解。

最近在看react源碼，發(fā)覺以前對react的理解實在浮淺，這里記錄了一些以前疏忽的點。

createElement和component

在react里面，經(jīng)過babel的解析后，jsx會變成createElement執(zhí)行后的結(jié)果。

const Test = (props) => 
hello, {props.name}
;

經(jīng)過babel解析后會變?yōu)閏reateElement(Test, {name: "world})，這里的Test就是上面的Test方法，name就是Test方法里面接受的props中的name。
實際上當(dāng)我們從開始加載到渲染的時候做了下面幾步：

// 1. babel解析jsx
 -> createElement(Test, {name: "world"})
// 2. 對函數(shù)組件和class組件進(jìn)行處理
// 如果是類組件，不做處理，如果是函數(shù)組件，增加render方法
const props = {name: world};
const newTest = new Component(props);
newTest.render = function() {
    return Test(props);
}
// 3. 執(zhí)行render方法
newTest.render();
key

react中的diff會根據(jù)子組件的key來對比前后兩次virtual dom（即使前后兩次子組件順序打亂），所以這里的key最好使用不會變化的值，比如id之類的，最好別用index，如果有兩個子組件互換了位置，那么index就會導(dǎo)致diff全部失效。

cloneElement

原來對cloneElement的理解就是類似cloneElement(App, {})這種寫法，現(xiàn)在看了實現(xiàn)之后才理解。原來第一個參數(shù)應(yīng)該是一個reactElement，而不是一個reactComponent，應(yīng)該是，而不是App，這個也確實是我沒有好好看文檔。

setState

react里面setState后不會立即更新，但在某些場景下也會立即更新，下面這幾種情況打印的值你都能回答的上來嗎？

class App extends React.Component {
    state = {
        count: 0;
    }
    test() {
        this.setState({
            count: this.state.count + 1
        }); 
        console.log(this.state.count); // 此時為0
        this.setState({
            count: this.state.count + 1
        });
        console.log(this.state.count); // 此時為0
    }
    test2() {
        setTimeout(() => {
            this.setState({
                count: this.state.count + 1
            });
            console.log(this.state.count); // 此時為1
            this.setState({
                count: this.state.count + 1
            });
            console.log(this.state.count); // 此時為2
        })
    }
    test3() {
        Promise.resolve().then(() => {
            this.setState({
                count: this.state.count + 1
            });
            console.log(this.state.count); // 此時為1
            this.setState({
                count: this.state.count + 1
            });
            console.log(this.state.count); // 此時為2
        })
    }
    test4() {
        this.setState(prevState => {
            console.log(prevState.count); // 0
        return {
            count: prevState.count + 1
        };
        });
        this.setState(prevState => {
            console.log(prevState.count); // 1
            return {
                count: prevState.count + 1
            };
        });
    }
    async test4() {
        await 0;
        this.setState({
            count: this.state.count + 1
        });
        console.log(this.state.count); // 此時為1
        this.setState({
            count: this.state.count + 1
        });
        console.log(this.state.count); // 此時為2
    }
}

在react中為了防止多次setState導(dǎo)致多次渲染帶來不必要的性能開銷，所以會將待更新的state放到隊列中，等到合適的時機(jī)（一般是組件第一次渲染或觸發(fā)事件后）后進(jìn)行batchUpdate，所以在setState后無法立即拿到更新后的state，很多人說setState是異步的，setState表現(xiàn)確實是異步，只是里面沒有用異步代碼實現(xiàn)。
如果是給setState傳入一個函數(shù)，這個函數(shù)是執(zhí)行前一個setState后才被調(diào)用的，所以函數(shù)返回的參數(shù)可以拿到更新后的state。
但是如果將setState在異步方法中（setTimeout、Promise等等）調(diào)用，由于方法是異步的，會導(dǎo)致組件pending結(jié)束后才執(zhí)行異步方法中的setState，這個時候由于組件已經(jīng)不處于pending狀態(tài)了，會導(dǎo)致setState立即執(zhí)行，這時通過this.state可以拿到最新的值。

ref

ref用到原生的標(biāo)簽上，可以直接在組件內(nèi)部用this.refs.xxx的方法獲取到真實DOM。
ref用到組件上，需要用ReactDOM.findDOMNode(this.refs.xxx)的方式來獲取到這個組件對應(yīng)的DOM節(jié)點。

shouldComponentUpdate

當(dāng)shouldComponentUpdate返回false的時候，組件沒有重新渲染，但是更新后的state和props已經(jīng)掛載到了組件上面，這個時候如果打印state和props，會發(fā)現(xiàn)拿到的已經(jīng)是更新后的了。

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

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

相關(guān)文章

  • 深入理解Webpack核心模塊Tapable鉤子[同步版]

    摘要：本文將根據(jù)以下章節(jié)分別梳理每個鉤子同步鉤子首先安裝是簡單的同步鉤子，它很類似于發(fā)布訂閱。至此，我們把的所有同步鉤子都解析完畢異步鉤子比同步鉤子麻煩些，我們會在下一章節(jié)開始解析異步的鉤子傳送門深入理解核心模塊鉤子異步版代碼 記錄下自己在前端路上爬坑的經(jīng)歷 加深印象，正文開始～ tapable是webpack的核心依賴庫 想要讀懂webpack源碼 就必須首先熟悉tapableok.下面是...

    cangck_X 評論0 收藏0

  • React 深入系列１：React 中的元素、組件、實例和節(jié)點

    摘要：中的元素組件實例和節(jié)點，是中關(guān)系密切的個概念，也是很容易讓初學(xué)者迷惑的個概念。組件和元素關(guān)系密切，組件最核心的作用是返回元素。只有組件實例化后，每一個組件實例才有了自己的和，才持有對它的節(jié)點和子組件實例的引用。 文：徐超，《React進(jìn)階之路》作者授權(quán)發(fā)布，轉(zhuǎn)載請注明作者及出處 React 深入系列，深入講解了React中的重點概念、特性和模式等，旨在幫助大家加深對React的理解...

    techstay 評論0 收藏0

  • React.js 小書 Lesson20 - 更新階段的組件生命周期

    摘要：所以對于組件更新階段的組件生命周期，我們簡單提及并且提供一些資料給大家。這里為了知識的完整，補充關(guān)于更新階段的組件生命周期你可以通過這個方法控制組件是否重新渲染。大家對這更新階段的生命周期比較感興趣的話可以查看官網(wǎng)文檔。 React.js 小書 Lesson20 - 更新階段的組件生命周期 本文作者：胡子大哈本文原文：http://huziketang.com/books/react...

    Yumenokanata 評論0 收藏0

  • React 深入系列7：React 常用模式

    摘要：本篇是深入系列的最后一篇，將介紹開發(fā)應(yīng)用時，經(jīng)常用到的模式，這些模式并非都有官方名稱，所以有些模式的命名并不一定準(zhǔn)確，請讀者主要關(guān)注模式的內(nèi)容。 React 深入系列，深入講解了React中的重點概念、特性和模式等，旨在幫助大家加深對React的理解，以及在項目中更加靈活地使用React。 本篇是React深入系列的最后一篇，將介紹開發(fā)React應(yīng)用時，經(jīng)常用到的模式，這些模式并非都有...

    Chao 評論0 收藏0

  • React 深入系列1：React 中的元素、組件、實例和節(jié)點

    摘要：中的元素組件實例和節(jié)點，是中關(guān)系密切的個概念，也是很容易讓初學(xué)者迷惑的個概念。組件和元素關(guān)系密切，組件最核心的作用是返回元素。只有組件實例化后，每一個組件實例才有了自己的和，才持有對它的節(jié)點和子組件實例的引用。 React 深入系列，深入講解了React中的重點概念、特性和模式等，旨在幫助大家加深對React的理解，以及在項目中更加靈活地使用React。 React 中的元素、組件、實...

    LeviDing 評論0 收藏0

發(fā)表評論

0條評論

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