美文网首页前端之美-ReactNative我爱编程
React 如何利用index.js文件进行‘模块引用路径优化’

React 如何利用index.js文件进行‘模块引用路径优化’

作者: 神木惊蛰 | 来源:发表于2018-06-11 20:52 被阅读5次

初次接触React组件开发时,感觉这种引入的方式很好。但是后来随着组件的增加,如何管理好自己的组件,成为了一个令人头疼的问题。
以下是我在开发过程中,总结出来的一些小技巧,仅供大家参考。
原理:
主要是利用打包工具默认加载index.js文件这个特性。
实现:

  1. 在src文件夹下,新建component文件夹,用于存放所有组件。
  2. 在component文件夹下,为每个组件新建一个文件夹,并起一个有意义的名字,注意首字母大写。
  3. 在新建的组件文件夹中新建一个index.js文件,写入组件代码,并导出。
  4. 在component目录下新建一个index.js文件,用于将所有组件统一导出。
  5. 最后,在src目录下的index.js文件中引入所有组件。

代码:
源码托管在github上了。点击这里

优化详解 优化结果

参考文章:
export语法

相关文章

网友评论

    本文标题:React 如何利用index.js文件进行‘模块引用路径优化’

    本文链接:https://www.haomeiwen.com/subject/lznheftx.html