成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

React源碼解析 - ReactClass.js

Big_fat_cat / 1898人閱讀

摘要：下面，我將從上到下挑選出能給自己一些啟發(fā)的源碼做注解。省略了很多代碼通過這段精簡的，我們看到，，返回的是一個(gè)構(gòu)造函數(shù)，該函數(shù)原型繼承于，并將參數(shù)中定義的屬性合并到其中。

ReactClass.js

源文件: https://github.com/facebook/react/blob/master/src/isomorphic/classic/class/ReactClass.js

2017.4.9 更新 自15.5版本開始，createClass將不再包含到react核心庫，而需要從一個(gè)獨(dú)立的npm package - create-react-class獲取。更新說明

我們最常用的React.createClass方法就是在這個(gè)文件中定義的（JSX代碼最終都要轉(zhuǎn)換成createClass這種形式的）。這也是我閱讀react源碼過程中，打算詳細(xì)解讀的第一個(gè)文件。下面，我將從上到下挑選出能給自己一些啟發(fā)的源碼做注解。有些代碼，已有注釋，就不在這里粘貼了。包含__DEV__的代碼段，也暫且忽略。

"use strict";

"use strict";是es5語法中用來定義嚴(yán)格模式的。顧名思議，嚴(yán)格模式使得js引擎校驗(yàn)js語法的時(shí)候，標(biāo)準(zhǔn)更加嚴(yán)格。一些在非嚴(yán)格模式下被忽略的非友好的語法，在嚴(yán)格模式下會直接報(bào)錯(cuò)。所以，總是使用嚴(yán)格模式，使得js代碼更加安全。這是一個(gè)好習(xí)慣。

var ReactBaseClasses = require("ReactBaseClasses");
var ReactElement = require("ReactElement");
var ReactNoopUpdateQueue = require("ReactNoopUpdateQueue");

ReactBaseClasses定義了React.Component和React.PureComponent兩個(gè)類，此處不展開。

ReactElement定義了一些操作React Element的方法，比如creatEelment,cloneElement,createFactory等

ReactNoopUpdateQueue是默認(rèn)的updater對象。當(dāng)我們setState的時(shí)候，就會馬上調(diào)用updater.enqueueReplaceState方法，將新的state放入一個(gè)隊(duì)列中，異步處理。

var emptyObject = require("fbjs/lib/emptyObject");
var invariant = require("fbjs/lib/invariant");
var warning = require("fbjs/lib/warning");

fbjs是一個(gè)工具集，是獨(dú)立于react的另一個(gè)項(xiàng)目，被facebook不同項(xiàng)目所共享，如relay。

invariant用在一些強(qiáng)制條件不被滿足的地方，比如變量類型用錯(cuò)。invariant在react項(xiàng)目中大量地使用，必須要細(xì)看一下。找到invariant文件的位置。繼續(xù)只關(guān)注值得學(xué)習(xí)的地方。

var args = [a, b, c, d, e, f];
var argIndex = 0;
error = new Error(
    format.replace(/%s/g, function() { return args[argIndex++]; })
);

get新技能，原來string的replace方法，是可以遞歸調(diào)用的。

warning和invariant類似，也會在瀏覽器中輸出紅色的提示，只是warning輸出的是警告信息，消息體中帶有warning字樣。warning所在的文件位置。

type SpecPolicy =
| "DEFINE_ONCE"
| "DEFINE_MANY"
| "OVERRIDE_BASE"
| "DEFINE_MANY_MERGED";

// ...
/**
 * @interface ReactClassInterface
 * @internal
 */
var ReactClassInterface: {[key: string]: SpecPolicy} = {
    mixins: "DEFINE_MANY",
    // ...
}

要理解上面一段代碼，就必須要了解react所用的類型系統(tǒng)Flow了。

type SpecPolicy定義了一個(gè)枚舉類型。

注釋中的@interface讓我誤以為ReactClassInterface是一個(gè)接口類型，其實(shí)不然，查flow文檔，才確定其為Object Type。它規(guī)定這個(gè)object中的每個(gè)key必須是一個(gè)string，值必須是SpecPolicy類型。[key: string]中的key本身只是種注解而已，為了方便代碼的閱讀，沒有實(shí)際的意義，你可以把它改為name等任何字符串。

// ... 省略了很多代碼
var ReactClassComponent = function() {};
Object.assign(
  ReactClassComponent.prototype,
  ReactComponent.prototype,
  ReactClassMixin,
);

var ReactClass = {
    createClass: function(spec) {
        var Constructor = identity(function(props, context, updater) {
            this.props = props;
            this.context = context;
            this.refs = emptyObject;
            // ...
        };
        Constructor.prototype = new ReactClassComponent();
        Constructor.prototype.constructor = Constructor;
        
        // ...
        
        mixSpecIntoComponent(Constructor, spec);
        
        // ...
        return Constructor;
    }
}

通過這段精簡的createClass，我們看到，createClass，返回的是一個(gè)構(gòu)造函數(shù)，該函數(shù)原型繼承于ReactClassComponent，并將參數(shù)spec中定義的屬性合并到其prototype中。如果結(jié)合createClass的一個(gè)實(shí)例來看個(gè)文件，就更容易理解了。比如：

const Contacts = React.createClass({
    propTypes: {
    
    },
    getDefaultProps() {
        return {
          
        };
    },
    render() {
        return (
          

        );
    }
});

基中，Contacts就是一個(gè)函數(shù)，一個(gè)構(gòu)造函數(shù)?？梢杂脕砩?b>React.Component。

至此，這個(gè)800多行的React.createClass核心代碼，就理順了。

原文：http://react.apptravel.cn/article/59

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/82386.html

相關(guān)文章

  • react解析: render的FiberRoot(三)

    摘要：查看創(chuàng)建核心函數(shù)源碼行調(diào)用函數(shù)創(chuàng)建是相關(guān)，不用管源碼行這個(gè)指的是調(diào)用創(chuàng)建，下面我們將會說到對象源碼行源碼行函數(shù)中，首先創(chuàng)建了一個(gè)，然后又創(chuàng)建了一個(gè)，它們兩者還是相互引用。 感謝 yck: 剖析 React 源碼解析，本篇文章是在讀完他的文章的基礎(chǔ)上，將他的文章進(jìn)行拆解和加工，加入我自己的一下理解和例子，便于大家理解。覺得yck寫的真的很棒 。React 版本為 16.8.6，關(guān)于源碼的...

    muddyway 評論0 收藏0

  • React源碼解析之ReactDOM.render()

    摘要：一更新的方式有三種渲染接下來，我們就來看下源碼二作用在提供的里渲染一個(gè)元素，并返回對該組件的引用常見的用法是這個(gè)官網(wǎng)網(wǎng)址源碼服務(wù)端使用方法渲染節(jié)點(diǎn)是讓服務(wù)端盡可能復(fù)用節(jié)點(diǎn)，提高性能元素容器應(yīng)用渲染結(jié)束后，調(diào)用的函數(shù)錯(cuò)誤抓取方法本質(zhì)是返回 showImg(https://segmentfault.com/img/remote/1460000020064414?w=1240&h=641);...

    iKcamp 評論0 收藏0

  • React源碼解析之React.createRef()/forwardRef()

    摘要：一作用獲取目標(biāo)的實(shí)例使用源碼可修改的不可變的對象沒見過這種寫法初始化對象，屬性初始值為解析源碼比較簡單，就是返回了帶有屬性的二作用從父組件中獲取子組件是的實(shí)例使用是沒有實(shí)例的，因?yàn)樗?，所以沒有，所以不能通過來拿到實(shí)例將的傳給子組件，并綁定 showImg(https://segmentfault.com/img/remote/1460000019877636); 一、React.cr...

    aisuhua 評論0 收藏0

  • Luy 1.0 ：一個(gè)React-like輪子的誕生

    摘要：司徒正美的一款了不起的化方案，支持到。行代碼內(nèi)實(shí)現(xiàn)一個(gè)胡子大哈實(shí)現(xiàn)的作品其實(shí)就是的了源碼學(xué)習(xí)個(gè)人文章源碼學(xué)習(xí)個(gè)人文章源碼學(xué)習(xí)個(gè)人文章源碼學(xué)習(xí)個(gè)人文章這幾片文章的作者都是司徒正美，全面的解析和官方的對比。 前言 在過去的一個(gè)多月中，為了能夠更深入的學(xué)習(xí)，使用React，了解React內(nèi)部算法，數(shù)據(jù)結(jié)構(gòu)，我自己，從零開始寫了一個(gè)玩具框架。 截止今日，終于可以發(fā)布第一個(gè)版本，因?yàn)榫驮谧蛱?，?..

    codecook 評論0 收藏0

發(fā)表評論

0條評論

Big_fat_cat

男|高級講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<