发表于 | 阅读次数

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

关于Redux

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

阅读全文 »

发表于 | 阅读次数

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，讲了Store和State，我们了解到一个页面应用只能有一个Store，也了解了Redux中，一个State对应一个View，只要是State相同View就相同，知道State就知道View。还有如果想要改变State就要使用Action，只有通过Action他才能吧数据运送到Store中去。

阅读全文 »

发表于 | 阅读次数

React表单

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

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

阅读全文 »

发表于 | 阅读次数

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

阅读全文 »

发表于 | 阅读次数

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

代码：

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

阅读全文 »