【Under-the-hood-ReactJS-Intro】React源码解读

seasonley 发布于2019-08-22 18:16 / 1748人阅读

摘要：所以为了简化流程，这些的代码都先暂时忽略了。也就是说，每个平台都有独立的实现。我们将调试两个过程，和分别对应挂载和更新两个阶段。

概述：
先看看React的架构图：
https://bogdan-lyashenko.gith...

好好看一下上图，初看看起来好像很复杂，但是事实上，它只描述了两个过程：挂载和更新。由于卸载在某种程度上就是“反挂载”，上图中我们移除了卸载的过程，以使得流程图看起来更简单些。当然，上图不是100%匹配源码，但是已经能够用来描述react架构的主要流程了。简而言之，上图覆盖了60%的代码，但是剩下的40%基本上没有什么特别大的价值。所以为了简化流程，这些40%的代码都先暂时忽略了。

我们先在图中看下模块之间的依赖关系。

正如你所知，React是支持多个环境的：
1 手机端（RaectNative）
2 游览器端（ReactDOM）
3 服务端渲染
4 ReactART（使用React绘制矢量图）
5 其他

正是为了支持多平台，上图中很多文件的代码量是比图里展现的要多的多。以下是包含多平台支持的流程图。

正如你所见，一些内容被重复了两次。也就是说，每个平台都有独立的实现。比如说，ReactEventListener。很显然，这个方法的实现在不同的平台是不同的。技术上来说，这些平台独立模块应该会以某种方法注入或者连接到当前的逻辑过程中，其实，这些模块中有很多像这样的injectors。因为它们的语法是标准合成模式的一部分，为了简化，它们也被暂时忽略了。

我们先学习下React DOM在游览器中的逻辑流程。这是用的最多的平台，同时这个函数基本上也覆盖了React架构的所有思想。

代码示列：
学习一个框架或者库的最后的办法是什么呢？阅读和调试代码。我们将调试两个过程，React.render和component.setState,分别对应挂载和更新两个阶段。我们的实例代码包含几个带有render方法的小组件，这样会更有利于我们调试。

class ChildCmp extends React.Component {
    render() {
        return  {this.props.childMessage} 
    }
}

class ExampleApplication extends React.Component {
    constructor(props) {
        super(props);
        this.state = {message: "no message"};
    }

    componentWillMount() {
        //...
    }

    componentDidMount() {
        /* setTimeout(()=> {
            this.setState({ message: "timeout state message" });
        }, 1000); */
    }

    shouldComponentUpdate(nextProps, nextState, nextContext) {
        return true;
    }

    componentDidUpdate(prevProps, prevState, prevContext) {
        //...
    }

    componentWillReceiveProps(nextProps) {
        //...
    }

    componentWillUnmount() {
        //...
    }

    onClickHandler() {
        /* this.setState({ message: "click state message" }); */
    }

    render() {
        return 
            
            
            And some text as well!
        
    }
}

ReactDOM.render(
    ,
    document.getElementById("container"),
    function() {}
);

（未完待续）

云服务器 GPU云服务器源码解读 webrtc源码解读 webrtc fec源码解读 js v8源码解读

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

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

React 源码深度解读（三）：首次 DOM 元素渲染 - Part 3

摘要：在学习源码的过程中，给我帮助最大的就是这个系列文章，于是决定基于这个系列文章谈一下自己的理解。到此为止，首次渲染就完成啦总结从启动到元素渲染到页面，并不像看起来这么简单，中间经历了复杂的层级调用。前言 React 是一个十分庞大的库，由于要同时考虑 ReactDom 和 ReactNative ，还有服务器渲染等，导致其代码抽象化程度很高，嵌套层级非常深，阅读其源码是一个非常艰辛的过...

U2FsdGVkX1x 2019-08-23 12:26 评论0 收藏0
React 源码深度解读（四）：首次自定义组件渲染 - Part 1

摘要：本篇开始介绍自定义组件是如何渲染的。组件将自定义组件命名为，结构如下经过编译后，生成如下代码构建顶层包装组件跟普通元素渲染一样，第一步先会执行创建为的。调用顺序已在代码中注释。先看图，这部分内容将在下回分解前言 React 是一个十分庞大的库，由于要同时考虑 ReactDom 和 ReactNative ，还有服务器渲染等，导致其代码抽象化程度很高，嵌套层级非常深，阅读其源码是一个非...

Warren 2019-08-23 12:37 评论0 收藏0
React 源码深度解读（六）：依赖注入

摘要：依赖注入和控制反转，这两个词经常一起出现。一句话表述他们之间的关系依赖注入是控制反转的一种实现方式。而两者有大量的代码都是可以共享的，这就是依赖注入的使用场景了。下一步就是创建具体的依赖内容，然后注入到需要的地方这里的等于这个对象。前言 React 是一个十分庞大的库，由于要同时考虑 ReactDom 和 ReactNative ，还有服务器渲染等，导致其代码抽象化程度很高，嵌套层级...

glumes 2019-08-23 12:50 评论0 收藏0
React 源码深度解读（一）：首次DOM元素渲染 - Part 1

摘要：调用栈是这样的这里生成的我们将其命名为，它将作为参数传入到。整个的调用栈是这样的组件间的层级结构是这样的到此为止，顶层对象已经构造完毕，下一步就是调用来自的方法，进行页面的渲染了。通过表达的结构最终会转化为一个纯对象，用于下一步的渲染。欢迎关注我的公众号睿Talk，获取我最新的文章：showImg(https://segmentfault.com/img/bVbmYjo); 一、前言...

daydream 2019-08-23 12:26 评论0 收藏0
React 源码深度解读（八）：事务 - Part 2

摘要：前言是一个十分庞大的库，由于要同时考虑和，还有服务器渲染等，导致其代码抽象化程度很高，嵌套层级非常深，阅读其源码是一个非常艰辛的过程。在学习源码的过程中，给我帮助最大的就是这个系列文章，于是决定基于这个系列文章谈一下自己的理解。前言 React 是一个十分庞大的库，由于要同时考虑 ReactDom 和 ReactNative ，还有服务器渲染等，导致其代码抽象化程度很高，嵌套层级非常...

airborne007 2019-08-23 12:55 评论0 收藏0