React+Redux组件化那些事ppt

前端狗

2019/09/18 发布于 技术 分类

文字内容
1. 组件化体系在NOW直播中的实践 React+Redux IMWEB-willliang 1
2. 介绍 • • • • 腾讯高级工程师—梁伟盛(大 圣) IMWeb团队成员 先后参与花样,交友,NOW直 播等业务的核心开发和架构设 计 现在负责互动视频业务前端架 构设计与开发 2
3. NOW直播 素人直播 3
4. 花样直播 秀场直播 4
5. CONTENTS 组件化方案 why redux 1 3 2 why redux why react 5 4
6. 6
7. 7
8. 组件 angular react 数据 传入数据 处理数据 处理数据 controller component 业务逻辑 业务逻辑 UI逻辑 UI逻辑 8
9. 数据流向 angular • react 没有规范数据流向 • 9 规范单向数据流
10. 单向数据流 component props props component props component component props props component component 10 props component
11. 数据交互 11
12. 数据交互 angular • • • react 通过observer做数据的监听交 互? • 父controller定义model传给子 controller,互相监听交互? • 定义model后,DI注入到 controller中? • 12 通过observer做数据的监听交 互? 子component调用父 component,由父component 交互数据 使用context上下文
13. 组件化 angular • directive实现? react • 13 天生组件化
14. 生命周期 angular • 没有完善的生命周期 react • componentWillMount • componentDidMount • componentWillUpdate • componentDidUpdate • 。。。 14
15. Why React? • 非常完整的生命周期 • 天生组件化 • 单向数据流 • Virtual DOM • JSX(同构) 15
16. 强大的生态圈 16
17. 丰富的周边 react-native react 同构(Isomorphic) react-redux 17
18. react缺点 • • • component依然很重 单向数据流,一旦组件层次变深,传递数据会变 得异常复杂 依然没解决数据交互问题 18
19. CONTENTS 组件化实践 why redux 1 3 2 组件化方案 why react 19 4
20. Why Redux? • 单一数据源store • action解耦 • react-redux提供了Provider和connect 20
21. 单一数据源store reducer 1 middleware 1 newState action middleware 2 reducer 2 middleware n reducer n 21 store
22. React+Redux component reducer 1 middleware 1 newState action middleware 2 reducer 2 middleware n reducer n 22 store
23. 单向数据流? react-redux提供了Provider和connect 23
24. Provider 24
25. connect 25
26. connect store connect component info userInfo connect message charm 26
27. this.props拥有 info message 27
28. 妈妈不用担心我的数据从哪获取了 28
29. 29
30. NOW直播 30
31. CONTENTS 组件化实践 why redux 1 3 2 组件化方案 why react 31 4
32. 32
33. ctrl+c、ctrl+v大法好 33
34. 但这真的OK了么 34
35. 业务越来越多,迭代越 来越快 35
36. 36
37. 你的代码真的符合规范? 能快速切换不同的场景? 不同的业务? 37
38. 无规矩不成方圆 38
39. 数据中心 展示组件 组件化方案 高阶组件 数据组件 39
40. NPM(包管理器) node_modules src(源文件) index.js index.css … dist(编辑后文件) test example pageage.json40
41. 数据中心 • 单一数据源store • 暴露注入reducer与middleware的函数 • 暴露Provider与connect函数 41
42. 静态写入 store • store静态写入 middleware与reducer middleware reducer 42
43. 动态注入 • 新增addMiddleware函数负责 动态注入middleware addMiddleware store • 新增addReducer函数负责动态 注入reducer addReducer 43
44. 以下哪些是业务代码? A. 用户点击关注主播,修改数据变更关注状态 B. 用户点击头像,调用资料卡组件展示用户资料卡 C. 用户点击资料卡关闭按钮,关闭资料卡 44
45. 以下哪些是业务代码? A. 用户点击关注主播,修改数据变更关注状态 B. 用户点击头像,调用资料卡组件展示用户资料卡 C. 用户点击资料卡关闭按钮,关闭资料卡 45
46. 展示组件 46
47. component 传入数据 处理数据? component 业务逻辑? UI逻辑 47
48. 展示组件 48
49. 复用展示组件 生命周期 extends component new component UI逻辑函数 。。。 49
50. 展示组件 • 和正常react组件写法完全一致 • 不包含业务逻辑,只包含展示和交互逻辑 • 必须使用PropTypes校验字段 • 复用方式extends • 不与数据组件耦合 50
51. 数组组件 51
52. action 52
53. reducer 53
54. 数据组件 • • • redux为基础框架,包含action与reducer 依赖数据源组件,使用时,将reducer注入到数据 源组件中 不与展示组件耦合 54
55. 高阶组件 55
56. 展示组件connect数据组件 56
57. connect 展示组件 数据组件 高阶组件 57
58. 组件关系(N对N) 展示组件 1 数据组件 1 高阶组件 1 展示组件 2 数据组件 2 高阶组件 2 展示组件 n 数据组件 n 高阶组件 3 。。。 高阶组件 n 58
59. extends+connect 数据 extends 高阶组价1 connect 高阶组件2 业务逻辑 59
60. 高阶组件 • 展示组件与数据组件组成高阶组件 • 在connect编写业务逻辑 • 复用使用extends+connect • 展示组件与数据组件是多对多关系 • 高阶组件高度聚合,而展示组件和数据组件间又 充分解耦 60
61. 展示组件 数据组件 高阶组件 store 展示组件 数据组件 高阶组件 展示组件 数据组件 高阶组件 61 页面
62. CONTENTS 组件化实践 why redux 1 3 2 组件化方案 why react 62 4
63. 组件分解 • • • • • • 头部展示(highorder-header) 聊天展示(highorder-message) 礼物展示(highorder-giftmsg) 点赞飘心(highorder-bubble) 视频(highorder-video) 。。。 63
64. 组件分解 • • • 头部展示(nowjs-highorder-header) 聊天展示(nowjs-highorder-message) 视频(nowjs-highorder-video) 64
65. 可复用的高阶组件 m install highorder-header highorder-message highorder-vid 65
66. 搭建高阶组件 66
67. 67
68. 68
69. 架构的优势 • 组件的引用简单(npm install) • 快速搭建项目与快速切换不同的场景 • 展示组件与数据组件之间实现的低耦合,而连接 两者的高阶组件实现了高内聚 69
70. Future • react+redux开源组件化平台 • 组件平台可视化编辑组件 • 。。。 70
71. 明天有个活动,全部人都排下期 没问题 没问题 不行 71
72. 72
73. 谢谢 73