剖析React内部运行机制-“授人以渔”

中国有句古话叫“授人以鱼不如授人以渔”，说的是传授给人以知识，不如传授给人学习知识的方法。道理其实很简单，鱼是目的，钓鱼是手段，一条鱼能解一时之饥，却不能解长久之饥，若是想永远有鱼吃，那就要学会钓鱼的方法。

这篇文章将为你们分享如何去探索React内部运行机制。

实践是检验真理的惟一标准。

一、获取React源码

Go to download

咱们把React源码拉下来以后会可以看到它的目录结构后 ，那么你的心情或许是下面这样的

推荐你先阅读 剖析React内部运行机制-源码结构 这篇文章作一个大概的了解。

当咱们对React源码结构有了一个大概的了解以后，真的要对每一个目录下的文件看一遍吗？

我是不建议这样的，由于React源码中文件数量庞大，而且各个文件之间的引入关系至关复杂，因此这时候咱们还须要探索是否有其余更好的方式去打开React的神秘大门。

二、React源码--package.json

如今的前端项目通常是模块化开发，开发中会用到各类依赖包，这样的话在项目中就少不了package.json这个文件，在package.json文件中的script模块下面会暴露出各类命令用以实现不一样的目的。咱们在React项目中package.json文件中script模块发现一个至关重要的命令

"build": "node ./scripts/rollup/build.js"
复制代码

这个命令的做用是打包，就是将各个文件目录下的模块文件打包中最终的文件。当成功打包后会获得两个主要的文件。

/build/dist/react.development.js
/build/dist/react-dom.development.js
复制代码

上面两个文件分别用于React和ReactDOM对象的定义与导出，使用时以下面这样。

import React, { Component } from 'react';
import ReactDOM from 'react-dom'
复制代码

在react.development.js和react-dom.development.js两个文件中看代码相对于直接看React源码有一个明显的好处是全部的对象与函数定义都在同一个文件中，省去了多个文件的跳转。可是与之同时而来的另外一个缺点就是代码量太过于庞大。其中react-dom.development.js文件的代码已经超过了25000行，每一个函数之间的调用关系也是很难屡清。那么对于React源码还有更好的梳理方式吗？

三、demo + Chrome调试工具(断点)

咱们先写一个很是简单的demo，就像下面这样。

app.jsx

import React from 'react';
import {render} from 'react-dom';
import HelloReact from './HelloReact';
// 这里加上debugger有助于在Chrome控制台添加断点
debugger;
render(<HelloReact name="Taylor" />, document.getElementById('root')); 复制代码

HelloReact.jsx

import React, {Component} from 'react'

class HelloReact extends Component{
  render() {
    debugger
    return (
      <div> Hello {this.props.name} </div>
    );
  }
}

export default HelloReact
复制代码

上面这个程序是 React官方网站 提供的第一个demo，它一个最基础的React使用案例。咱们在这个demo运行时使用Chrome调试工具加上断点便可获知React组件的渲染流程以及函数直接的调用关系。

断点该怎么加？加到哪里？

一、入口函数

上面图片中红框部分的几个调试按钮有着不一样的做用，能够阅读 chrome developer tool—— 断点调试篇 这篇文章作进一步了解。

二、函数内部调用的其余函数

因为函数内部会调用多个外部函数，咱们须要找到最重要的那个函数处加上断点，以此类推，一层一层深刻进去。

上面两个添加断点的方法是由外向内，咱们也能够由内向外添加断点。由内向外须要咱们找到整过demo执行流程的最后一个函数“节点”。

三、出口函数

执行完上图中的函数，内容就渲染到了页面上。若是我想知道在此以前发生了什么，咱们还须要找到该出口函数的上一级调用函数，就像下面这样。

四、函数的上一级调用函数

咱们按照这样的方式一级一级往上查找，直至找到入口函数，那么整个demo的执行流程也就有了一个大概的轮廓。

四、阅读其余相关源码分析文章

不少时候咱们本身分析一些问题老是局限于本身固有的思惟方式，惟有多获取别人的思想观点才能对问题理解更加深入、准确。

推荐文章
Inside Fiber: in-depth overview of the new reconciliation algorithm in React
「译」React Fiber 那些事: 深刻解析新的协调算法 彻底理解React Fiber