react和flux的组件定制化实践 - w3ctech.pdfVIP

React和Flux的组件定制化实践 美团技术团队 王玥 美团 React 专场 摘要 • 可配置的UI组件 • 通过组合开发业务应⽤ • 静态部分：数据拼接 • 交互部分：Action-Handler组合 可配置的UI组件 思考：UI是什么？ UI是什么？ 〈 What UI really is (and how UX confuses matters) 〉 UI是什么？ • 静态部分： • 有限个组件组合 • 每个组件可以看做：f(props) • 交互部分: • 有限个function组合，f(g(action)) 可配置组件-基础组件 • 静态部分：表格表头、⾏列，按钮，模态对话框…以 及UI元素的样式 • 交互部分：click ，hover ，load 可配置组件-布局组件 • FlowLayout ，FlowPanel ，GridLayout… 可配置组件-业务组件 • 基础组件和布局组件的组合（可以嵌套业务组件） • 有业务含义，例如：业务报表，⼯作台 • 通过数据源获取配置元数据，例如表头 • 通过数据源获取数据，例如表格的每⼀⾏ 可配置组件-业务组件 选择 搜索 可配置组件-⻚⾯组件 选择 搜索 可配置组件-总结 • 从静态的⾓度看 • 把组件们的props⽤统⼀的数据结构组合起来 • 从交互的⾓度看 • 把导致props改变function组合起来 静态部分：数据拼接 静态部分-数据 • 通过静态数据来描述组件 • 组件的render函数中使⽤需要的props 静态部分-规则 • 按照树形结构组织 • 可能⽆法⼀次拿到完整的数据，需要进⾏拼接 • 不同type的组件实现⾃⼰的render⽅法 • 相同type的组件通过不同的prop产⽣不同实例 { type: Page, props: { title: Demo, children: [ { type: PageLayout, props: { children: [ { type: FlowPanel, props: { width: 100, children: [ { type: FilledButton }, { type: TextButton } ] } } ] } } ] } 静态部分-数据