Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

W3CTech美团react专场- React和 Flux 的组件定制化实践

在Flux的规则下,通过数据拼装,组件的组合渲染出页面的静态部分,过action和handler的组合实现交互部分,两者相结合生产出可配置,易扩展的应用。

Related Books

Free with a 30 day trial from Scribd

See all
  • Be the first to comment

W3CTech美团react专场- React和 Flux 的组件定制化实践

  1. 1. React和Flux的组件定制化实践 美团技术团队  王玥 美团  React  专场
  2. 2. 摘要 • 可配置的UI组件 • 通过组合开发业务应⽤用 • 静态部分:数据拼接 • 交互部分:Action-Handler组合
  3. 3. 可配置的UI组件
  4. 4. 思考:UI是什么?
  5. 5. UI是什么? 〈 What UI really is (and how UX confuses matters) 〉
  6. 6. UI是什么? • 静态部分: • 有限个组件组合 • 每个组件可以看做:f(props) • 交互部分: • 有限个function组合,f(g(action))
  7. 7. 可配置组件-基础组件 • 静态部分:表格表头、⾏行列,按钮,模态对话框…以 及UI元素的样式 • 交互部分:click,hover,load
  8. 8. 可配置组件-布局组件 • FlowLayout,FlowPanel,GridLayout…
  9. 9. 可配置组件-业务组件 • 基础组件和布局组件的组合(可以嵌套业务组件) • 有业务含义,例如:业务报表,⼯工作台.... • 通过数据源获取配置元数据,例如表头 • 通过数据源获取数据,例如表格的每⼀一⾏行
  10. 10. 可配置组件-业务组件 搜索选择
  11. 11. 可配置组件-⻚页⾯面组件 搜索选择
  12. 12. 可配置组件-总结 • 从静态的⾓角度看 • 把组件们的props⽤用统⼀一的数据结构组合起来 • 从交互的⾓角度看 • 把导致props改变function组合起来
  13. 13. 静态部分:数据拼接
  14. 14. 静态部分-数据 • 通过静态数据来描述组件 • 组件的render函数中使⽤用需要的props
  15. 15. 静态部分-规则 • 按照树形结构组织 • 可能⽆无法⼀一次拿到完整的数据,需要进⾏行拼接 • 不同type的组件实现⾃自⼰己的render⽅方法 • 相同type的组件通过不同的prop产⽣生不同实例
  16. 16. { "type": "Page", "props": { "title": "Demo", "children": [ { "type": "PageLayout", "props": { "children": [ { "type": "FlowPanel", "props": { "width": "100", "children": [ { "type": "FilledButton" }, { "type": "TextButton" } ] } } ] } } ] } }
  17. 17. • Type • Props • children 静态部分-数据 { "type": "TextButton", "props": { "style": { "margin": "5px", "color": "#655" }, "children": "click me" } }
  18. 18. 静态部分-拼接 { "type": "FlowPanel", "props": { "width": "100", "children": [ { "type": "FilledButton", "props": { "componentId": 1 } }, { "type": "TextButton", "props": { "componentId": 2 } } ] } } { "type": "FilledButton", "props": { "style": { "background": "#000" }, "children": [ { "type": "Simple", "props": { "field": "name" } } ] } } id=1的数据源返回组件元数据
  19. 19. 静态部分-拼接 { "type": "FilledButton", "props": { "componentId": 1, "style": { "background": "#000" }, "children": [ { "type": "Simple", "props": { "field": "name" } } ] } } { "name": "test button" } componentId=1组件的数据 "type": "FilledButton", "props": { "componentId": 1, "data": { "name": "test button" } //...
  20. 20. 静态部分-数据流和context { "type": "FilledButton", "props": { "componentId": 1, "data": { "name": "test button" }, "style": { "background": "#000" }, "children": [ { "type": "Text", "props": { "field": "name" } } ] } } test button { "type": "FilledButton", "props": { "componentId": 1, "data": { "name": “hello world" }, "style": { "background": "#F00" }, "children": [ { "type": "Text", "props": { "field": "name" } } ] } } hello world 改变组件的数据 改变组件的元数据
  21. 21. 静态部分-数据流和context • 业务组件会从数据源请求需要的数据 • ⾮非业务组件render时将props中的data向下传递 • 业务组件之间存在数据隔离 • 如果业务组件下存在业务组件,数据也是隔离的
  22. 22. 静态部分-Store • ⻚页⾯面的props全部放到⼀一个store中 • Store负责维护props • 根据组件ID查找 • 根据属性来查找 • 修改props
  23. 23. 交互部分:函数组合
  24. 24. 交互部分 • 静态数据的描述能⼒力越强,解析越复杂 • 函数不如静态数据直观,但更加灵活 • 通过函数组合去修改props实现交互部分 • 例如获取链接地址,⽇日期控件设置初始值
  25. 25. 交互部分-规则 • 可以配对的Action-Handler • 定义多个函数之间数据传递过程中的中间对象: action • 业务组件通过context来包装基础组件的action • 函数actionCreator根据业务逻辑和raw action去产 ⽣生传递给handler的action • 函数actionHandler根据action修改props
  26. 26. 交互部分-action • pipe: cat * | grep "Linux" | grep -v "UNIX" | wc -l • 数据传递可能存在差异 • action是函数组合的纽带
  27. 27. 交互部分-action 搜索选择 { "actionType": "FILTER_CHANGE", "name": "type", "value": 1 }
  28. 28. 交互部分-action test button click test button click test button { actionType: 'FILLED_BUTTON_CLICK' } { actionType: 'FILLED_BUTTON_CLICK', dataId: 1 }
  29. 29. 搜索选择 select的onAction 业务组件的onAction App的onAction { "actionType": "FILTER_CHANGE", "name": "type", "value": 1 } { "actionType": "FILTER_CHANGE", "name": "type", "value": 1, "componentId": 2, "componentType": "select" }
  30. 30. ActionCreator • action不是总能满⾜足业务需要 • 函数的描述能⼒力更强 • 能够添加业务逻辑代码 => f(g((action))) • action通过actionCreator得到改变props的action
  31. 31. ActionHandler • Store为不同类型的action添加handler • Handler中修改store中的props(⻚页⾯面的props都在 store中) • Handler中通知props变化
  32. 32. 总结
  33. 33. 组合⽣生产App 组件 raw action actionCreator actionHandler action store 更新props change action (业务逻辑,可配置) (业务逻辑, 可配置) (props可配置)
  34. 34. 组合⽣生产App App业务组件基础组件 action ⻚页⾯面 action’ action’’ App props ⻚页⾯面 业务组件 内置action 基础组件 props’ props’.data Action的流动 Data的流动 props’’
  35. 35. 搜索选择 搜索类型1
  36. 36. UI是什么?
  37. 37. 搜索选择 搜索类型1 f : actionCreator(action)(actionHandler)(store) f(props)
  38. 38. ⼀一些Flux框架 • Redux • Reflux
  39. 39. Q&A We shall not cease from exploration And the end of all our exploring Will be to arrive where we started And know the place for the first time. — T. S. Eliot
  40. 40. 欢迎关注美团技术团队获取更多优质技术内容

    Be the first to comment

    Login to see the comments

  • zlion

    Feb. 6, 2018

在Flux的规则下,通过数据拼装,组件的组合渲染出页面的静态部分,过action和handler的组合实现交互部分,两者相结合生产出可配置,易扩展的应用。

Views

Total views

1,066

On Slideshare

0

From embeds

0

Number of embeds

82

Actions

Downloads

64

Shares

0

Comments

0

Likes

1

×