V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
zeal7s
V2EX  ›  程序员

问下用 React + Redux 实现这样一个功能要怎样做才算 best practice?

  •  
  •   zeal7s · 2016-10-20 10:39:48 +08:00 · 2692 次点击
    这是一个创建于 2992 天前的主题,其中的信息可能已经有所发展或是发生改变。

    写一个网页,显示的内容是不变的,但是根据某些条件,网页的布局会发生变化,总共有 7 ~ 8 种可能吧。

    我目前的想法是把网页中不变的元素封装成一个个 container 或者 component ,然后根据这些不同的条件,写 7 ~ 8 个大的 container 包含所有页面元素,对应这些不同的布局。比如把 sidebar 封装成一个 container ,有的页面把 sidebar 放左边,有的页面把 sidebar 放右边。当用户请求时,根据条件,渲染对应的页面布局。

    总感觉会有更加简单的方法,请问各位怎么看?

    10 条回复    2016-10-21 09:45:19 +08:00
    dtysky
        1
    dtysky  
       2016-10-20 10:47:24 +08:00
    react-router + inline-style
    kenshinhu
        2
    kenshinhu  
       2016-10-20 10:50:40 +08:00
    同求 React + Flux Best Practice
    hansnow
        3
    hansnow  
       2016-10-20 11:35:14 +08:00
    能想到的和你说的一样,同期待最佳实践
    jaimezhan
        4
    jaimezhan  
       2016-10-20 12:00:20 +08:00
    直接将布局写好后,用 redux 提供的 store 来控制各个布局层的展示就好了
    reus
        5
    reus  
       2016-10-20 12:03:48 +08:00
    没有更简单的,这种就是最佳做法了。也不用什么 router 。
    再复杂的页面也是这种套路,可以无脑堆组件,也是我喜欢 react 类框架的原因,不用像 jquery 一样手工写过程。
    hronro
        6
    hronro  
       2016-10-20 14:19:21 +08:00
    我觉得,如果只是 ui 的变化,根本不用上 Redux
    dantegg
        7
    dantegg  
       2016-10-20 23:42:21 +08:00
    用不上 redux 吧
    hantsy
        8
    hantsy  
       2016-10-20 23:52:59 +08:00
    1. Pure stateless functional components.
    2. Container/presenter pattern, split concerns, presenter components only for rendering UI.
    3. State management with Redux, and extension, such as redux-obseverable, redux-promise, form, fetch, immutablejs, etc.
    hantsy
        9
    hantsy  
       2016-10-20 23:55:10 +08:00
    Another popular combination, React+Mobx, plus amouts of Mobx extensions.
    xieguanglei
        10
    xieguanglei  
       2016-10-21 09:45:19 +08:00
    你这需求,用不上 redux 。

    不用写 7 到 8 个大 container ,只要写一个大 container ,根据「不同的条件」输出不同的 JSX 就可以了。

    「不同的条件」是什么很重要,如果只被交互影响,直接放在大 container 的 state 上即可 。更复杂的话,可以考虑 react-router 。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1182 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 17:50 · PVG 01:50 · LAX 09:50 · JFK 12:50
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.