如何用React打造一个完整的移动端问卷调查应用？

在移动互联网时代，问卷调查已成为获取用户反馈的重要方式。本文将带你一步步剖析一个真实的React移动端问卷项目，揭示从技术选型到用户体验设计的完整开发思路。

一、项目全景：不只是问卷那么简单

这个看似简单的问卷调查应用，实际上是一个现代React技术栈的微型样板工程。它融合了当下最前沿的开发工具与实践：

技术栈组合：React 19 + TypeScript + Redux Toolkit + React Router + Vite
核心流程：首页引导 → 答题交互 → 结果展示的闭环体验
适配方案：基于rem的响应式设计
状态管理：集中化的答题数据流

让我们深入探索这些技术是如何协同工作的，以及它们解决了哪些实际问题。

二、移动端适配：rem方案的智慧

为什么需要rem适配？

在移动端开发中，最令人头疼的问题就是如何让应用在数千种不同尺寸的设备上保持一致的体验。传统px单位无法解决这个问题，而rem方案正是为此而生。

核心实现原理

javascript 复制代码

(function(win, doc) {
  // 根据屏幕宽度动态计算根字体大小
  const updateRem = () => {
    doc.documentElement.style.fontSize = win.screen.width / 18.75 + 'px'
  }
  
  updateRem(); // 初始设置
  win.addEventListener('resize', updateRem); // 响应屏幕变化
})(window, document)

这段代码的精妙之处在于：

动态计算：根字体大小 = 屏幕宽度 / 18.75
18.75的奥秘：基于375px设计稿（主流手机宽度），100px元素在375屏上为100/375=0.2666屏宽，转换后为0.2666×18.75≈5rem
实时响应：监听resize事件，确保旋转屏幕时自动适配

实际应用示例

在CSS中使用rem单位：

css 复制代码

.question-card {
  width: 16rem; /* 在375px屏上=200px */
  padding: 0.8rem; /* 在375px屏上=10px */
}

这种方案的优势是：设计师只需提供375px宽的设计稿，开发人员直接使用设计稿标注的px值除以20（375/18.75≈20）即可得到rem值，大幅提升开发效率。

三、状态管理：Redux Toolkit的优雅实践

为何选择Redux Toolkit？

传统的Redux需要编写大量的样板代码（action、reducer等），而Redux Toolkit通过createSlice API将这些流程简化了70%以上。

状态设计解析

typescript 复制代码

const questional = createSlice({
  name: 'questional',
  initialState: {
    questions: [],    // 题目数据
    answersId: [] as number[], // 用户答案ID集合
    score: 0          // 最终得分
  },
  reducers: {
    setQuestions(state, action) {
      state.questions = action.payload // 存储题目
    },
    setAnswersId(state, action: PayloadAction<number>) {
      state.answersId.push(action.payload) // 记录每道题答案
    },
    setScore(state) {
      // 计算得分：统计正确答案(值为1)的数量
      const correctCount = state.answersId.filter(id => id === 1).length
      state.score = Math.round((correctCount / state.questions.length) * 100)
    },
    resetScore(state) {
      state.score = 0
      state.answersId = [] // 重置状态
    }
  }
})

这个状态设计的精妙之处在于：

数据分离：原始题目数据与用户答案分开存储
高效计分：通过标记正确答案ID(1)快速计算得分
原子操作：每个reducer只负责单一功能

使用场景示例

在答题页面提交答案时：

typescript 复制代码

// 用户选择答案后
dispatch(setAnswersId(selectedAnswer.is_standard_answer))

// 完成所有题目后
dispatch(setScore())

四、路由设计：流畅的用户旅程

核心路由结构

typescript 复制代码

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/question' element={<Question />} />
        <Route path='/result' element={<Result />} />
      </Routes> 
    </BrowserRouter>
  )
}

这个极简的路由设计映射了完整的用户路径：

首页(Home)：应用入口，引导用户开始
问卷页(Question)：核心答题区域
结果页(Result)：展示得分与反馈

导航的智能控制

在答题页面，导航逻辑需要处理多种状态：

typescript 复制代码

const nextTopic = () => {
  if (!isSelected) return alert('请选择答案') // 验证选择
  
  if (num === ques.length) { // 最后一道题
    dispatch(setAnswersId(selectedAnswer.is_standard_answer))
    navigate('/result') // 跳转结果页
  } else { // 中间题目
    dispatch(setAnswersId(selectedAnswer.is_standard_answer))
    setNum(num + 1) // 下一题
    setIsSelected(false) // 重置选择状态
  }
}

这段代码实现了：

防错机制：阻止未选择答案时前进
状态保存：每次选择后即时存储答案
流程控制：自动识别最后一题并跳转

五、组件设计：用户体验的细节艺术

1. 首页组件 - 第一印象至关重要

typescript 复制代码

function Home() {
  const navigate = useNavigate()
  
  return (
    <div className='home-container'>
      <div className="home-box">
        <div className="home-box-hd">
          <img src={logo} alt="问卷Logo" />
          <h1>欢迎参与问卷调查</h1>
          <p>您的每一个想法都很重要</p>
        </div>
        <button className="start-btn" onClick={() => navigate('/question')}>
          开始问卷
        </button>
      </div>
    </div>
  )
}

设计要点：

视觉焦点集中
行动按钮醒目
文案简洁友好

2. 问卷页 - 复杂交互的优雅处理

核心功能包括：

题目加载
选项交互
进度展示
导航控制

进度条动态实现：

typescript 复制代码

<div className="progress-bar">
  <div className="progress-fill" 
       style={{ width: `${(currentQuestion/totalQuestions) * 100}%` }}>
  </div>
</div>

选项选择逻辑：

typescript 复制代码

const [selectedOption, setSelectedOption] = useState<number|null>(null)

// 渲染选项
{options.map(option => (
  <div 
    className={`option ${selectedOption === option.id ? 'selected' : ''}`}
    onClick={() => handleSelect(option.id)}
  >
    {option.text}
  </div>
))}

3. 结果页 - 个性化的情感连接

通过分数给予不同的情感化反馈：

typescript 复制代码

const getFeedback = (score: number) => {
  if (score === 100) return '学霸本霸！🎓 你就是传说中的答题机器！'
  if (score >= 80) return '很不错哦！🌟 再努力一点就能成为学霸啦！'
  if (score >= 60) return '刚好及格 😅 恭喜你踩线成功！'
  if (score >= 40) return '加油加油！✨再刷几遍题目就能进步啦！'
  return '哎呀呀... 🤦‍♂️ 建议重新来一遍？'
}

设计哲学：冰冷的分数需要温暖的包装，情感化反馈能显著提升用户满意度。

六、项目亮点与学习价值

1. 现代化技术栈的优势组合

技术	解决的问题	优势
Vite	构建速度慢	秒级冷启动，快速热更新
TypeScript	类型错误	开发时类型检查，减少运行时错误
Sass	CSS管理混乱	变量、嵌套、混入等高级特性
Redux Toolkit	Redux样板代码多	简化store配置，减少代码量

2. 文件组织结构最佳实践

bash 复制代码

src/
├── pages/       # 页面组件
│   ├── Home.tsx
│   ├── Question/
│   └── Result/
├── store/       # 状态管理
│   └── modules/
├── lib/         # 工具函数
│   └── rem.js
├── assets/      # 静态资源
└── styles/      # 全局样式

这种结构遵循了关注点分离原则，使项目易于维护和扩展。

3. 用户体验的精细打磨

进度可视化：实时进度条降低用户焦虑
防错机制：阻止未选择跳转
情感化设计：分数反馈建立情感连接
交互动效：选项选中状态清晰反馈
性能优化：异步加载题目数据

七、总结：从项目中学到什么？

这个项目虽然功能聚焦，但完整展示了现代React开发的核心路径：

响应式设计 - rem方案解决多设备适配
状态管理 - Redux Toolkit简化数据流
路由规划 - 清晰映射用户旅程
组件设计 - 从简单到复杂的渐进式开发
用户体验 - 细节决定产品成败

对初学者的价值：通过一个完整项目理解React开发生态，避免从零开始的迷茫。

对资深开发者的启发：如何在有限功能中实践最佳架构，平衡开发效率与用户体验。

这个项目的源代码已托管在GitHub仓库。真正的掌握始于实践，现在就动手克隆项目，在本地运行体验吧！当你完成第一个自定义问题时，你会深刻理解React组件如何协同工作，创建出流畅的用户体验。

最后思考：当我们需要添加"保存进度"功能时，应该如何扩展当前架构？欢迎在评论区分享你的解决方案！