下载APP
登录
关闭
讲堂
算法训练营
Python 进阶训练营
企业服务
极客商城
客户端下载
兑换中心
渠道合作
推荐作者
当前播放: 25 | 拆分复杂度(2):如何组织component、action和reducer
00:00 / 00:00
标清
  • 标清
1.0x
  • 2.0x
  • 1.5x
  • 1.25x
  • 1.0x
  • 0.5x
网页全屏
全屏
00:00
付费课程,可试看

React实战进阶45讲

共46讲 · 45课时·约560分钟
6241
免费
01 | 课程介绍
免费
02 | React出现的历史背景及特...
免费
03 | 以组件方式考虑UI的构建
免费
04 | JSX的本质 : 不是模板引...
05 | React组件的生命周期及其...
06 | 理解Virtual DOM及key属...
07 | 组件设计模式 : 高阶组...
08 | 理解新的Context API及其...
09 | 使用脚手架工具创建React...
10 | 打包和部署
11 | Redux(1) : 前端为何...
12 | Redux(2) : 深入理解S...
13 | Redux(3) : 在React中...
14 | Redux(4) : 理解异步A...
15 | Redux(5) : 如何组织A...
16 | Redux(6) : 理解不可...
17 | React Router(1):路由...
18 | React Router(2):参数...
19 | UI组件库对比和介绍:Ant...
20 | 使用Next.js创建React同...
21 | 使用Jest、Enzyme等工具...
22 | 常用开发调试工具:ESLint...
23 | 前端项目的理想架构:可维...
24 | 拆分复杂度(1):按领域...
25 | 拆分复杂度(2):如何组...
26 | 拆分复杂度(3):如何组...
27 | 使用Rekit(1):创建项目...
28 | 使用Rekit(2):遵循最佳...
29 | 使用React Router管理登...
30 | 实现表单(1):初始数据...
31 | 实现表单(2):错误处理...
32 | 列表页(1):搜索,数据...
33 | 列表页(2):缓存更新,...
34 | 页面数据需要来源多个请求...
35 | 内容页的加载与缓存
36 | 基于React Router实现分...
37 | 常见页面布局的实现
38 | 使用React Portals实现对...
39 | 集成第三方JS库:以d3.js...
40 | 基于路由实现菜单导航
41 | React中拖放的实现
42 | 性能永远是第一需求:时刻...
43 | 网络性能优化:自动化按需...
44 | 使用Reselect避免重复计算
45 | 下一代React:异步渲染
46 | 使用Chrome DevTool进行...
本节摘要

拆分复杂度代码:

拆分复杂度的代码是通过 Rekit 创建的项目演示的,你可以本地创建一个项目,只需 3 步:

  1. 安装 Rekit:
npm install -g rekit
复制代码
  1. 创建项目:
rekit create my-app
复制代码
  1. 安装依赖并启动项目:
npm install
npm start
复制代码

课程源代码地址:

展开

精选留言(9)

  • 2019-04-09
    老师您好,视频四分钟的时候说到,组件内引入css的潜在问题是有可能造成css样式重复打包,这个不是很理解。难道css和js不一样,重复引用会重复打包吗?
    2
  • 2018-07-26
    您好,请问如何打包每个feat下的style.less,上面说打包style.less,是在项目主入口文件import 需要的feat的style.less吗?

    作者回复: 是的,在src/styles/index.less 里引入了所有 feature 的 style

    1
  • 2018-07-20
    你好。如果按领域模型组织结构。如何跨模型交互?比如微信客户端,即时通讯和收藏是两个模型,收藏中某一条右键发送给好友,需要调用即时通讯的action

    作者回复: 很好的问题,按领域模型组织代码不意味着两者不能交互。收藏 feature 可以直接调用即时通讯 feature 的 action,只要从那边 import 这个 action 即可。import { sendMessage } from '../im/sendMessage'; 然后绑定到收藏的 UI 组件上。

    1
  • 2019-06-06
    老师 什么时候rekit会支持ts
  • 2019-06-06
    这样按照feature组织代码,比如examples里有一个Layout.js,那么如果增加一个新的feature,需要怎样才能共享这个Layout.js呢?是不是需要创建一个单独的layout目录把layout?

    作者回复: 可以直接用 examples 里的 Layout 文件,更好一点把 Layout 组件放到 common feature 里

  • 2019-03-12
    将action 名称放到变量里单独维护有什么好处呢
  • 2019-01-19
    每个文件里只包含一个action和reducer写起来是不是太烦了,感觉dva中的model这个概念写起来效率会更高

    作者回复: 可以试下 Rekit,代码结构都生成好了。

  • 2018-11-23
    老师你好,我目前在用react做项目,你的课程给了我很多的思路,十分感谢~~
    样式文件按你推荐的方式,某一个文件引入所有样式文件,然后入口文件再引入这个文件,思路很好,这也是我之前没想到的!!
    后来我思考了一个问题:页面的图片文件需不需要这样处理呢?
    例如页面上有3个组件用到a图片,我之前是用url-loader,将这个图片像其他js模块那样来用,这样那3个组件都要import一下这个图片,如果组件被复用了,那么是不是也会将图片多次打包呢?
    我效仿样式文件的处理方式,只不过用的是export { default as a } from "xxx/xxx..."的形式,说白了是你这个项目中处理js组件的方式,但是我没法引入a图片,通过import {a} from "./",或者其他一些可能的目录,总是报Cannot find module './'这样的错,路径错误
    还是图片没有必要这么做,就直接从img中引入图片就好,这些图片是组件本身的部分,不存在样式文件的重复打包的问题呢?
    展开

    作者回复: 图片不会重复打包,会被作为静态资源打包到static目录,所以不需要这么做~

  • 2018-08-11
    我想要这节课的demo,但是在下面的地址找不到该demo呀。这是付费课程,demo应该可以放出来吧?

    作者回复: 您好,拆分复杂度的代码是通过 Rekit 创建的项目演示的,您可以本地创建一个项目,只需 3 步: 1)安装 rekit:npm install -g rekit
    2)创建项目:rekit create my-app
    3)安装依赖并启动项目:
    npm install
    npm start