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

Question

当页面的业务逻辑复杂后一个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中要想实现这样的效果该怎么做呢？

Answer 1

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