React学习之相关代码库(三十六)

前端之家收集整理的这篇文章主要介绍了React学习之相关代码库(三十六)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本章将讲述React代码库的组织,约定,和它的实现方式。

如果你想更加关注React,或者说作为开发贡献者,对React进行一些修改,这篇博客或许可以帮到你。

当然,我们没必要去过度的关注React应用的约定,因为其中有很多是历史遗留问题,后续版本可能会被pass掉。

1.自定义模板系统

Facebook,他们内部人员使用了一个叫做Haste自定义模板系统,这个系统非常类似CommonJS规范,也使用require(),但是又有些不同从而让部分开发者很尴尬,迷糊着。

CommonJS中,你使用相对路径来导入一个模板

// 同一目录下
var setInnerHTML = require('./setInnerHTML');

// 不同目录下
var setInnerHTML = require('../utils/setInnerHTML');

// 多层
var setInnerHTML = require('../client/utils/setInnerHTML');

上述的setInnerHTML可以在多个文件夹中存在,但是,在React代码库中,您可以导入任何模板与其他模板的名称Haste要求名称必须是全局唯一的。

var setInnerHTML = require('setInnerHTML');

Haste最开始被设计出来就是为了开发大型项目的,比如Facebook,你可以将你需要的文件放在不同的文件下面,导入时也不用使用什么相对地址,通过一个全局唯一的名字,它可以帮你定位到文件,这也是Haste的特点,文件名必须唯一,在同一个项目中不能同时出现两个相同的文件名。

React他自身就是从Facebook这个大型项目的代码库分离出来的,所以它会保留一些Haste的一些特性,在以后的版本,React可能会使用CommonJS或者ES6的模板导入来代替它,当然,在Facebook内部的话可能会很难发生改变,毕竟项目这么大,基本架构都已成熟。

这是一些Haste的规则:

  • React源码库中文件名必须唯一, [

猜你在找的React相关文章