React开发中创建独立页面与同页更新组件的适用场景规范问询

React开发中选择创建独立页面还是在当前页更新组件，核心判断依据是路由是否需要感知当前视图的状态，以下是具体的场景区分和通用实践：

适合创建独立页面的场景 #

满足以下任意一个条件，都可以考虑创建独立页面：

• 用户需要通过浏览器地址栏直接访问该视图，比如商品详情页、个人中心页、活动落地页，支持用户直接分享链接打开对应内容
• 属于不同业务模块的独立功能，比如后台系统的订单管理、商品管理、用户管理分属完全独立的业务域，拆分页面后路由层级更清晰，后续维护成本更低
• 需要支持浏览器前进/后退按钮进行操作回退，比如多步骤的表单填写流程，每一步拆分独立页面后，用户误操作点后退可以回到上一步，不需要整体重填
• 视图需要独立做SEO优化，独立页面可以单独配置title、meta描述等标签，更利于搜索引擎收录

适合在当前页更新组件的场景 #

满足以下任意一个条件，优先选择在当前页更新组件：

• 交互属于当前业务上下文的附属操作，比如点击按钮弹出的新增表单、筛选面板、确认提示弹窗，不需要跳出当前业务场景
• 视图状态仅在当前页面生效，不需要跨场景共享，比如列表页的筛选条件切换、排序方式切换，仅修改当前列表的渲染结果，不需要单独的可访问链接
• 轻量交互且不需要保留操作历史，比如开关折叠面板、切换同页面的Tab标签，用户不需要通过浏览器后退来撤销操作
• 视图需要频繁切换，比如同一个分析面板的图表视图和数据列表视图切换，组件内更新的渲染性能远高于页面跳转，用户体验更流畅

通用开发实践指引 #

• 优先按业务域做页面的第一层拆分，同一个业务域下的子功能再结合上述场景判断是否需要拆分子路由页面
• 仅需要用useState/useReducer管理的局部状态对应的视图，优先做组件内更新；如果状态需要跨页面共享、或者需要通过路由参数传递，再考虑拆分独立页面
• 做决策前可以先验证两个核心问题：用户是否需要直接访问这个视图？、用户是否需要通过后退按钮回到这个视图？，只要有一个答案为是，就做独立页面，否则优先组件内更新
• 针对复杂的单页多步交互，可以采用折中的方案：用路由query/params存储当前操作状态，既保留组件内更新的流畅体验，也支持前进后退和链接分享

内容的提问来源于stack exchange，提问作者Slaknation