React源码解析 - ReactClass.js

Big_fat_cat 发布于2019-08-20 15:38 / 1698人阅读

摘要：下面，我将从上到下挑选出能给自己一些启发的源码做注解。省略了很多代码通过这段精简的，我们看到，，返回的是一个构造函数，该函数原型继承于，并将参数中定义的属性合并到其中。

ReactClass.js

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

2017.4.9 更新自15.5版本开始，createClass将不再包含到react核心库，而需要从一个独立的npm package - create-react-class获取。更新说明

我们最常用的React.createClass方法就是在这个文件中定义的（JSX代码最终都要转换成createClass这种形式的）。这也是我阅读react源码过程中，打算详细解读的第一个文件。下面，我将从上到下挑选出能给自己一些启发的源码做注解。有些代码，已有注释，就不在这里粘贴了。包含__DEV__的代码段，也暂且忽略。

"use strict";

"use strict";是es5语法中用来定义严格模式的。顾名思议，严格模式使得js引擎校验js语法的时候，标准更加严格。一些在非严格模式下被忽略的非友好的语法，在严格模式下会直接报错。所以，总是使用严格模式，使得js代码更加安全。这是一个好习惯。

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

ReactBaseClasses定义了React.Component和React.PureComponent两个类，此处不展开。

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

ReactNoopUpdateQueue是默认的updater对象。当我们setState的时候，就会马上调用updater.enqueueReplaceState方法，将新的state放入一个队列中，异步处理。

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

fbjs是一个工具集，是独立于react的另一个项目，被facebook不同项目所共享，如relay。

invariant用在一些强制条件不被满足的地方，比如变量类型用错。invariant在react项目中大量地使用，必须要细看一下。找到invariant文件的位置。继续只关注值得学习的地方。

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方法，是可以递归调用的。

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所用的类型系统Flow了。

type SpecPolicy定义了一个枚举类型。

注释中的@interface让我误以为ReactClassInterface是一个接口类型，其实不然，查flow文档，才确定其为Object Type。它规定这个object中的每个key必须是一个string，值必须是SpecPolicy类型。[key: string]中的key本身只是种注解而已，为了方便代码的阅读，没有实际的意义，你可以把它改为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，返回的是一个构造函数，该函数原型继承于ReactClassComponent，并将参数spec中定义的属性合并到其prototype中。如果结合createClass的一个实例来看个文件，就更容易理解了。比如：

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

基中，Contacts就是一个函数，一个构造函数。可以用来生成React.Component。

至此，这个800多行的React.createClass核心代码，就理顺了。

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

私有云 GPU服务器 React 源码 React源码源码解析 webrtc源码解析

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82386.html

react解析: render的FiberRoot(三)

摘要：查看创建核心函数源码行调用函数创建是相关，不用管源码行这个指的是调用创建，下面我们将会说到对象源码行源码行函数中，首先创建了一个，然后又创建了一个，它们两者还是相互引用。感谢 yck: 剖析 React 源码解析，本篇文章是在读完他的文章的基础上，将他的文章进行拆解和加工，加入我自己的一下理解和例子，便于大家理解。觉得yck写的真的很棒。React 版本为 16.8.6，关于源码的...

muddyway 2019-08-26 10:42 评论0 收藏0
React源码解析之ReactDOM.render()

摘要：一更新的方式有三种渲染接下来，我们就来看下源码二作用在提供的里渲染一个元素，并返回对该组件的引用常见的用法是这个官网网址源码服务端使用方法渲染节点是让服务端尽可能复用节点，提高性能元素容器应用渲染结束后，调用的函数错误抓取方法本质是返回 showImg(https://segmentfault.com/img/remote/1460000020064414?w=1240&h=641);...

iKcamp 2019-08-26 10:45 评论0 收藏0
React源码解析之React.createRef()/forwardRef()

摘要：一作用获取目标的实例使用源码可修改的不可变的对象没见过这种写法初始化对象，属性初始值为解析源码比较简单，就是返回了带有属性的二作用从父组件中获取子组件是的实例使用是没有实例的，因为它是，所以没有，所以不能通过来拿到实例将的传给子组件，并绑定 showImg(https://segmentfault.com/img/remote/1460000019877636); 一、React.cr...

aisuhua 2019-08-26 10:21 评论0 收藏0
Luy 1.0 ：一个React-like轮子的诞生

摘要：司徒正美的一款了不起的化方案，支持到。行代码内实现一个胡子大哈实现的作品其实就是的了源码学习个人文章源码学习个人文章源码学习个人文章源码学习个人文章这几片文章的作者都是司徒正美，全面的解析和官方的对比。前言在过去的一个多月中，为了能够更深入的学习，使用React，了解React内部算法，数据结构，我自己，从零开始写了一个玩具框架。截止今日，终于可以发布第一个版本，因为就在昨天，我...

codecook 2019-08-21 17:05 评论0 收藏0