react一周学习笔记

前端 框架 学习笔记

写在前面：决定学react之后却得知实习需要用vue，于是试着连续专注学了一周react。这里记下一些感受和提要，希望对以后断点续学有帮助...

React使用感受

因为先前有简单的使用vue的经验，现在使用React最大的感受之一就是：专注于视图层。
使用ES6的类继承React.Component，虽然不如Vue配置式地生成Vue实例那样直观，但正因为是原生写法，可拓展性灵活性也相当高（个人感觉）
React的重点工作：更新UI。通过维护state，配合virtual DOM和diff算法，高效地操作DOM，让开发者专注于数据的处理

Redux使用感受

状态管理方案
三个核心：
1. 单个state树
2. state只读
3. 通过纯函数触发变化

步骤简单总结（不全）：
0. 写测试用例
1. 设计state tree（可能要在开发过程中逐渐完善，但建议先设计好）
2. 写reducer（即oldstate+action=newstate）
3. 通过combineReducers合并多个reducer,通过createStore把reducer生成store
4. store可getState()，subscribe()，dispatch(action)
5. (其中action可以通过编写action creator来生成)
---里程碑---
0. 将组件划分成presentational component和container component
1. presentational component 只关注外观，不含逻辑实现（通过props传入），甚至可在不同应用间高度重用
2. container component 包裹presentation component，并赋予具体实现逻辑（container可通过react-redux库的connect()()方法自动生成，需要使用时再查文档）
3. 为高重用性，store作为props传入。[非必须]为了避免层层传入，可将store挂在再context上，具体可通过react-redux的{ Provider }便捷实现（需要使用时再查文档）。

总结

1. 最外层，container component的组合，基本不传props
2. container component负责业务逻辑，使用store，dispatch action，并forceUpdate（通过connect()()生成的container已包含forceUpdate）
3. presentation只负责展现，尽可能抽象化，使其可重用
4. store的传递：必要时使用context挂载

总的感受

React纯粹的管理了UI的更新，而Redux清晰地管理了数据的流动。
特别是单纯写React时对一些逻辑的安排总会很疑惑，而Redux首先有较为清晰地流程，其次写好store之后大体的逻辑就稳定下来了（配合测试能高效开发）
但是redux不是必须的，组件间通讯频繁等场合才比较适用。其他的简单场合增加的复杂度太高