剖析React內部運行機制-「授人以漁」

時間 2019-11-06

標籤剖析 react 內部運行機制授人欄目 React 简体版

原文原文鏈接

中國有句古話叫「授人以魚不如授人以漁」，說的是傳授給人以知識，不如傳授給人學習知識的方法。道理其實很簡單，魚是目的，釣魚是手段，一條魚能解一時之飢，卻不能解長久之飢，若是想永遠有魚吃，那就要學會釣魚的方法。html

這篇文章將爲你們分享如何去探索React內部運行機制。前端

實踐是檢驗真理的惟一標準。node

一、獲取React源碼

Go to downloadreact

咱們把React源碼拉下來以後會可以看到它的目錄結構後，那麼你的心情或許是下面這樣的git

推薦你先閱讀剖析React內部運行機制-源碼結構這篇文章作一個大概的瞭解。

當咱們對React源碼結構有了一個大概的瞭解以後，真的要對每一個目錄下的文件看一遍嗎？github

我是不建議這樣的，由於React源碼中文件數量龐大，而且各個文件之間的引入關係至關複雜，因此這時候咱們還須要探索是否有其餘更好的方式去打開React的神祕大門。web

二、React源碼--package.json

如今的前端項目通常是模塊化開發，開發中會用到各類依賴包，這樣的話在項目中就少不了package.json這個文件，在package.json文件中的script模塊下面會暴露出各類命令用以實現不一樣的目的。咱們在React項目中package.json文件中script模塊發現一個至關重要的命令算法

"build": "node ./scripts/rollup/build.js"
複製代碼

這個命令的做用是打包，就是將各個文件目錄下的模塊文件打包中最終的文件。當成功打包後會獲得兩個主要的文件。chrome

/build/dist/react.development.js
/build/dist/react-dom.development.js
複製代碼

上面兩個文件分別用於React和ReactDOM對象的定義與導出，使用時以下面這樣。json

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
複製代碼