React项目页面代码行数太长怎么办?

heath_learning
  • 1.1k

当页面的业务逻辑复杂后一个jsx文件可能会有上千行代码,其中包括:

  • 导入变量import语句
  • 组件中定义的方法state
  • render函数中的布局代码

我个人喜欢将js代码html代码css代码拆分成不同的文件,这样单个文件的代码量都不会很多,看起来舒服,这在vue中很容易实现,如:

xxx.vue

<template>
   <div>xxx</div>
</template>

<script>
  import index from 'xxx_js.js';
  export default index;
</script>

<style lang="scss">
  @import "./xxx.scss
</style>

请教各位React大神在react中要想实现这样的效果该怎么做呢?

评论
阅读 357
1 个回答

代码复用和拆分,将一个大的组件拆分成多个小组件。高阶组件 (HOC)、自定义 Hooks 都是用于复用的技术。

撰写回答

登录后参与交流、获取后续更新提醒

宣传栏