React 大众点评学习1，VScode-React常用插件，初始化react项目，Redux入门总结，设计State的原则，view层与state层独立，Immutable，架构设计之目录结构

最新推荐文章于 2023-04-03 14:58:48 发布

qq_40196738

最新推荐文章于 2023-04-03 14:58:48 发布

阅读量422

点赞数

本文链接：https://blog.csdn.net/qq_40196738/article/details/100094867

版权

传统的js,jquery开发都是基于面向过程的开发
react或vue 都是基于面向组件（对象）的开发

面向对象的三大基本特征：封装,继承,多态。

VScode-React常用插件
prettier // 格式化代码
reactjs code snippets // 快速生成react代码 rcc
来自2017收集

个人安装（2020年1月1日）
在这里插入图片描述

初始化react项目
1、npx create-react-app todolist
2、cnpm init react-app todolist

本地mock数据方式
第一种：nodejs的serve
cnpm i -g serve
在mock文件夹下运行serve

第二种：通过public访问静态资源
直接http://localhost:3000/mock/data.json 拿（简单到极致）

踩坑：
在最新构建的react项目中增加package.json的p 在这里插入图片描述 roxy选项，会报错。所以只能降版本和大佬一致。

React: 是否为State？
代表ui完整且最小的状态集合
1、是否由父组件props传入？
2、是否不会随着时间、交互操作变化？
3、是否可以通过其他state或props计算得到？
满足上述任一一条，均不是state。

React: 分析State保存位置？
1、状态上移
…

Redux: (状态层)

State：状态管理
Action: 描述了如何去修改一个state
Reducer: 是actions的解析器，去实现过程。

Reducer拆分
1、便于扩展和维护
2、合并API: combineReducers

Redux（reducer拆分模式）案例

actions部分是描述在这里插入图片描述
reducers拆分模块，是各个描述的实践（解析器）

将各个reducer合并。

创建Store对象，粘合reducer，订阅state变化，发送actions，订阅响应，取消订阅

React-Redux (组件—状态)

来自大神的完全解读

https://github.com/brickspert/blog/issues/22

注意：展示型组件(components)和容器型组件(containers)
在这里插入图片描述
components展示型组件：不关心数据从何而来，也不关心我如何去修改数据。
containers容器型组件：关注逻辑的实现，如何获取数据，以及数据如何修改。并且connect到展示型组件。
mapDispatchToProps：对应redux中的action，action通知reducer去实现state的修改。
注：在 <App />组件最外层注入 <Provider store={store} />，即完成了状态层的连接

actions返回的是一个对象。
如果异步actions 返回的是一个函数，就需要借助redux的中间件

相比于Vuex，我现在思绪非常混乱。

react-redux 最佳实践
一：按照类型 // 文件夹
在这里插入图片描述

二、按照功能模块
在这里插入图片描述

三、Ducks（鸭子）
reducer actions action-type selectors 都聚合到各自的文件内。
最终通过index.js进行合并。
…

可能看我博客的兄弟姐妹觉得我写得没头没## 标题脑，
确实,不过最后我还是总结一下redux以及react-redux。

Redux:
action 描述 -> reducer 解析器 -> createStore(reducer)生成store -> store.subscribe(()=> {})发布订阅
-> 通过 store.dispatch(action方法)

React-Redux:
action -> reducer -> ( components与containers进行connect 并将dispatch与state映射到props ) -> createStore(rootReducer) -> 通过react-redux提供的Provide组件，从根注入store属性。

设计State的原则

1、数据按照领域把整个应用的状态分成若干个子State，子State之间不能保存重复的数据。
2、表中State以键值对的结构存储数据，以记录的key/Id作为记录的索引，记录中的其他字段都依赖于索引。
3、State中不能保存可以通过已有数据计算而来的数据，即State中的字段不互相依赖。

view层与state层独立

即components（container）的state的数据，和redux的state的数据是解耦的。
在这里插入图片描述
并不是通过state的数据结构通信。

此时，就需要selectors中间层去传递，而不是一处修改处处修改。

Store Enhancer

Enhancer可能会修改底层的源码，是特殊的middleware中间件，少用。尽量去使用开源的中间。

常用库集成：Immutable.js

注：以下深拷贝 可以换成 不可变类型

无论是基本state，还是redux的state，修改值的方式都需要返回一个新对象或者新数组，开发大量用到扩展运算符。也就是深拷贝，一、两层还好。
如果，当state的层级比较深的时候，会比较麻烦。

注：Vue优于React一点就是，vue 更关注数据本身是否变化，是双向的。

Immutable提供了 Map和List数据类，它避免了拷贝的性能问题，以及

let state = Immutable.fromJS(); // 可以将js对象变成深拷贝对象。
state.set(“name”, “手儿”); // 添加或修改state里name字段，仍是不可变对象。

注： Immutable会深度检索创建时的对象的层级，并深拷贝。但是你之后加入的数据，它并不会检测，所以，之后添加的数据，比如对象，或者数组，你必须将它Immutable之后，在merge，这样才是深拷贝。

也就是 时刻注意Immutable.fromJS(对象/数组);

list类型的api是 state.push()
map类型的api是 state.set()

state.getIn([‘info’, ‘name’]) // 逐层的遍历每一层属性

解构赋值与immutable 操作对比
在这里插入图片描述

然后最后在mapStateToProps时需要转换成普通js对象，才能方便展示。使用
state.toJS()
注： toJS()方法每次都会返回新数据，无论是否发生变化。
以及在 reducers的index.js中combineReducers时
需要借助 redux-immutable 库来实现深拷贝对象到普通对象的转换。

注意展示型组件与第三库之间的解耦
以及高阶组件的设计

Reselect
避免state的某一字段变化，导致整体select都重复计算。
对有逻辑处理的selector需要进行reselect