深入理解react

CoderStudy 發布于2019-08-23 13:52 / 1558人閱讀

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

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

createElement和component

在react里面，經過babel的解析后，jsx會變成createElement執行后的結果。

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

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

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

key

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

cloneElement

原來對cloneElement的理解就是類似cloneElement(App, {})這種寫法，現在看了實現之后才理解。原來第一個參數應該是一個reactElement，而不是一個reactComponent，應該是，而不是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導致多次渲染帶來不必要的性能開銷，所以會將待更新的state放到隊列中，等到合適的時機（一般是組件第一次渲染或觸發事件后）后進行batchUpdate，所以在setState后無法立即拿到更新后的state，很多人說setState是異步的，setState表現確實是異步，只是里面沒有用異步代碼實現。
如果是給setState傳入一個函數，這個函數是執行前一個setState后才被調用的，所以函數返回的參數可以拿到更新后的state。
但是如果將setState在異步方法中（setTimeout、Promise等等）調用，由于方法是異步的，會導致組件pending結束后才執行異步方法中的setState，這個時候由于組件已經不處于pending狀態了，會導致setState立即執行，這時通過this.state可以拿到最新的值。

ref

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

shouldComponentUpdate

當shouldComponentUpdate返回false的時候，組件沒有重新渲染，但是更新后的state和props已經掛載到了組件上面，這個時候如果打印state和props，會發現拿到的已經是更新后的了。

云服務器 GPU云服務器深入理解系列深入理解linux 深入理解webrtc 深入理解python

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

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

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

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

cangck_X 2019-08-23 15:29 評論0 收藏0
React 深入系列１：React 中的元素、組件、實例和節點

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

techstay 2019-08-22 16:01 評論0 收藏0
React.js 小書 Lesson20 - 更新階段的組件生命周期

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

Yumenokanata 2019-08-21 17:34 評論0 收藏0
React 深入系列7：React 常用模式

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

Chao 2019-08-22 17:28 評論0 收藏0
React 深入系列1：React 中的元素、組件、實例和節點

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

LeviDing 2019-08-22 17:26 評論0 收藏0