H5W3
当前位置:H5W3 > 问答 > 正文

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

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

回答

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

本文地址:H5W3 » React项目页面代码行数太长怎么办?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址