摘要:为什么使用的核心是将组件化,由数据驱动的展现。仅仅使用进行开发的痛点组件嵌套层级深,回调地狱。遵守容器组件与展示组件分离的原则。
为什么使用redux
React的核心是将UI组件化,由数据驱动UI的展现。但是如何管理数据模型、组件与数据模型之间的通信,react并没有很好的解决方案。Redux由flux演变而来,同时简化了Flux的流程。
仅仅使用react进行开发的痛点组件嵌套层级深,回调地狱。你可能会在一个较深层次的组件里需要更新全局state的某个字段,却无奈只能通过从顶层组件一层一层传递下来的props进行回调。
页面的state不可预测。由于state缺乏一种可预测的机制,导致用户在进行一些页面操作(更改state),或者异步请求有新的数据从服务端返回的时候,state的变化已经不可控制,很容易产生bug
redux是怎么解决痛点的?1、通过react-redux提供的Provider组件,在根组件外面包一层,这样根组件,以及所有的子组件都能拿到store。实现的原理是基于React自身提供的context属性,但是react官方不推荐直接在组件中使用this.context。所以react-redux提供了另一种方法connect,通过connect将普通的UI组件升级为容器组件,同时将获取store的细节也一并封装在生成容器组件的代码中,从而容器组件可以直接拿到store
// 定义App组件 class Foo extends React.Component{ render() { const { text } = this.props; return {text}; } } const App = connect( mapStateToProps, mapDispatchToProps )(Foo);
2、使用纯函数修改state,保证state变化可预测。每次更改都返回一个全新的state。
3、遵守容器组件与展示组件分离的原则。这是redux一个重要的思想,容器组件和展示组件各司其职。
容器组件负责以下几件事情:
处理数据逻辑
将store中的state转变为props传递给展示组件,对应mapStateToProps
将注入了dispatch的函数作为props传递给展示组件,对应mapDispatchToProps
有状态的(展示组件则是无状态的)
发起action,更新state
没有DOM标签,没有样式
展示组件可复用的组件,又称为“傻瓜组件”,仅仅通过容器组件传进来的props进行UI展示,以及操作回调。感知不到redux的存在,脱离redux框架也能使用,尽量保持无状态(可包含少量的UI状态),有以下几条原则:
不理解数据逻辑:不关心数据是如何得到的,也不关心数据是如何改变的
只通过props获取数据和操作回调
基本是无状态的:必须有的话,可以是UI的状态
什么时候引入容器组件在引入之前,你可以先只用展示组件来构建App。当你发现有些组件并不会用到传进来的属性,而仅仅只是把它往下传给子组件的时候(并且层级比较深,超过两层),你就要考虑引入容器组件了。
为什么使用immutable.js首先,在没有immutable.js的情况下,碰到较深层次的数据结构时,更新state会变得很麻烦。
旧的state:
{ priceInfo: { price: 200, promotion: { offValue: 30 } } }
现在需要只更新offValue的值为50,该怎么处理呢?
let newState = _.cloneDeep(this.state); newState.priceInfo.promotion.offValue = 50; this.setState(newState);
可以看到,需要先深度复制一份this.state,然后修改offValue的值,最后执行setState。除了这个过程的有点复杂,另外深度复制对象是挺耗性能的一件事。而通过Immutable.js,我们只需要这样做:
let initialState = Immutable.fromJS({ priceInfo: { price: 200, promotion: { offValue: 30 } } }); this.setState(initialState.setIn(["priceInfo", "promotion", "offValue"]), 50);immutable.js带来的性能提升
React做性能优化时经常用到 shouldComponentUpdate,只有深度比较才能得出正确的值,决定是否render,而深度比较是十分消耗性能的。Immutable 则提供了简洁高效的判断数据是否变化的方法,只需 === 和 is 比较就能知道是否需要执行render(),而这个操作几乎零成本,所以可以极大提高性能。
immutable.js的数据结构如何正确使用...扩展运算符在jsx的语法中,你已经习惯了使用扩展运算符来传递props,如下所示:
const titleInfo = { title: "主标题", subTitle: "副标题" }; ... import Title from "title"; render() { return (); }
但是如果你要传递的数据是Immutable.Map类型的,使用...扩展运算符,得到的数据可能与你期望的不太一样,因为Immutable.Map的实例对象并不是plain object。{...titleInfo}等同于Object.assign({}, titleInfo)。Immutable.js提供了一种方法,可以实现这种转换,如果是Map实例,只需调用toObject()(不要调用深度复制的toJS),就可以将Immutable.js的Map对象转变为可以使用...扩展运算符的plain object。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/81026.html
摘要:不过今天我希望能够更进一步,不仅仅再抱怨现状,而是从我个人的角度来给出一个逐步深入学习生态圈的方案。最后,我还是想提到下对于的好的学习方法就是回顾参照各种各样的代码库,学习人家的用法与实践。 本文翻译自A-Study-Plan-To-Cure-JavaScript-Fatigue。笔者看到里面的几张配图着实漂亮,顺手翻译了一波。本文从属于笔者的Web Frontend Introduc...
摘要:对获奖队伍,官方要求提交代码,并邀请答辩。是否允许公开代码到公共平台,如答疑可以官方会出个吗答疑会无法顺利加入团队显示密令有误和操作频繁答疑应该是团队密令有误,请注意大小写。 1、由于公开测试集,所以可以人工作答直接写答案。或者将预测值中拿不准的答案由人工来做。这是个漏洞,获奖队伍是否会由官方进行二次验证?答疑:会的。对获奖队伍,官方要求提交代码,并邀请答辩。最终的获奖名次将由模型表现...
摘要:目录开发环境调试分析环境搭建问题描述及解答开发环境调试分析下使用官方环境安装包出现错误。大部分情况下是因为网络问题下载错误,具体错误查看错误。已存在虚拟环境,则需要删掉重新安装。 ...
摘要:一,前端性能优化有哪些页面优化方面,减少请求数设计简化页面合理设置缓存资源合并与压缩图片嵌入,将外部脚本置底,异步执行脚本,,将外链放在中,异步请求,减少不必要的跳转,避免重复的资源请求代码优化方面,操作转为数组 一,前端性能优化有哪些? a) 页面优化方面: 1,减少HTTP请求数--设计简化页面--合理设置缓存--资源合并与压缩--css sprites--图片嵌入--Lazy L...
摘要:一,前端性能优化有哪些页面优化方面,减少请求数设计简化页面合理设置缓存资源合并与压缩图片嵌入,将外部脚本置底,异步执行脚本,,将外链放在中,异步请求,减少不必要的跳转,避免重复的资源请求代码优化方面,操作转为数组 一,前端性能优化有哪些? a) 页面优化方面: 1,减少HTTP请求数--设计简化页面--合理设置缓存--资源合并与压缩--css sprites--图片嵌入--Lazy L...
阅读 2907·2021-11-24 09:39
阅读 2831·2021-09-29 09:34
阅读 3515·2021-09-24 10:23
阅读 1696·2021-09-22 15:41
阅读 1670·2019-08-30 15:55
阅读 3479·2019-08-30 13:58
阅读 2575·2019-08-30 13:11
阅读 1632·2019-08-29 12:31