李子豪的前端自习室

努力成为前端小牛

  • High一下

  • 首页

  • 归档

  • 标签

理解Redux

发表于 2017-09-09 | 阅读次数

昨天花了很久的时间,终于有些理解Redux了。根据官方的文档也做出了一个例子而且运用到我的项目中去。

关于Redux

对于我的了理解其实Redux就是一个能整合所有数据的大的State,它方便了组件之间的数据交流,一般的组件数据都是自上而下的通过props进行传递,而这样做的后果就是造成,对于一个嵌套了很多层的组件来讲,这样的实现方式就会显得相当麻烦,最顶层的组件不得不通过一层层的props来去和目标组件进行数据交换,这样产生的后果是造成了大量了性能缺失。而且如果两个组件拥有各自的state,但是需要进行数据交流的话,通过props进行交流这种方法就不能实现了。

阅读全文 »

React-Route-v4的一些API(2)

发表于 2017-08-18 | 阅读次数

昨天我们已经讲了RR4最重要的组件,今天我们将接触到一个也很重要的组件,

阅读全文 »

React-Router-v4中的一些重要API

发表于 2017-08-17 | 阅读次数

上一章我们了解了一个RR4很重要的组件,今天还会介绍另外一个很重要的组件

阅读全文 »

React-Router-v4

发表于 2017-08-16 | 阅读次数

React-Router-v4(简称RR4)早已经正式发布,他遵循着React的设计理念,即万物皆组件,RR4只是提供了一大堆的导航功能的组件,具有声明式,可组合性的特点,RR4本次采用了单代码仓库模型架构,这意味着有若干个相互独立的包。
他们分别是

  • React-router RR4核心
  • React-router-dom 用于DOM绑定的React Router
  • React-router-native 用于React Native 的Router
  • React-router-redux React Router和Redux的集成
  • React-router-config 静态路由配置助手
    阅读全文 »

Action Creator

发表于 2017-08-11 | 阅读次数

上一章节我们讲了Action,讲了Store和State,我们了解到一个页面应用只能有一个Store,也了解了Redux中,一个State对应一个View,只要是State相同View就相同,知道State就知道View。还有如果想要改变State就要使用Action,只有通过Action他才能吧数据运送到Store中去。

阅读全文 »

React的表单和状态提升

发表于 2017-08-10 | 阅读次数

React表单

HTML表单元素和React中的其他DOM元素有所不同,因为表单生来就保留了一些内部状态。

当用户提交表单时,HTML的默认行为会使这个表单跳转到一个新页面,在React中亦是如此,在大多数情况下,我们都会构造一个处理表单并可访问用户输入表单数据的函数,实现这一点的标准方法是使用一种称之为受控组件的技术

阅读全文 »

有关于Redux……

发表于 2017-08-09 | 阅读次数

这篇只是有关于Redux所记得一些笔记,比较杂乱,是初次接触到Redux我们必须应该掌握的基础知识,希望看了这篇文章对你有所帮助。

阅读全文 »

第十章:Object.assign的用法

发表于 2017-08-08 | 阅读次数

object.assign方法的用处

为对象添加属性

1
2
3
4
5
class Point{
consturctor(x,y){
object.assign(this,{x,y})
}
}

这个方法通过assign方法将x属性和y属性天爱到了Point类的对象实例。

为对象添加方法

1
2
3
4
5
6
7
8
Object.assign(SomeClass.prototype,{
someMethod(){
...
},
anotherMethod(){
...
}
});

等同于:

1
2
3
4
5
6
someClass.prototype.someMethod = function(arg1,arg2){
...
};
someClass.prototype.antherMethod = function(){
...
};

上面的代码使用了对象属性的简洁表示法,直接将两个函数放在大括号中,再使用assign方法添加到someClass.prototype中。

克隆对象

1
2
3
function clone(origin){
return Object.assign({}, origin)
}

上面的代码是将原始对象复制到一个空对象,就得到了原始对象的克隆。
不过采用这种方法克隆,只能克隆院士对象自身的值,不能克隆他继承的值。如果想要保持继承链,可以采用下面的代码。

1
2
3
4
function clone(origin){
let originProto = Object.getPrototypeOf(origin);
return Object.assign(Object.create(originProto),origin)
}

合并多个对象

将多个对象合并到某个对象

1
2
const merge =
(target,...sourcrs) => Object.assign(target,...suorces)

如果希望合并后返回一个新对象,可以改写上面的函数,对一个空对象合并。

1
2
const merge =
(...sources) => Object.assign({},...sources)

为属性指定默认值

1
2
3
4
5
6
7
8
const DEFAULTS = {
logLevel:0,
outputFormat: 'html'
};
function processContent(options){
let options = Object.assign({},DEFAULTS,options)
}

上面的代码制定DEFAULTS是一个默认的对象,options对像是用户提供的参数,Object.assign方法将DEFAULTS和options合并成一个新对象,如果两者有同名属性,那么option的属性就会覆盖掉DEFAUTLTS的属性值

值得注意的是,由于存在深拷贝的问题,DEFAULTS对象和options对象所有的属性的值只能是简单类型,而不是指向另一个对象,佛泽,将导致DEFAULTS对象的该属性不起作用。

React的事件处理

发表于 2017-08-06 | 阅读次数

事件处理

  • React元素的事件处理和DOM元素很相似,但是有一点语法上的不同。
  • React事件绑定的命名一般采用驼峰式写法,而不是小写。
  • 如果采用JSX的语法,需要传入一个函数作为事件处理函数,而不是一个字符串,DOM元素的写法。

代码:

1
2
3
<button onClick = {activateLasers}>
Actirate Lasers
</button>

阅读全文 »
12…6
Allen Lee

Allen Lee

55 日志
16 标签
© 2017 Allen Lee
由 Hexo 强力驱动
主题 - NexT.Muse