React学习笔记（三）

属性，状态和事件详解。

一、Props

1. 含义

props：传递给组件的对象，用于盛放数据，对于组件来说是只读的。

2. 用法

一般情况下用键值对的方式，另外还可以使用如下展开语法：

var props={
  one:"123",
  two:123
}
//"..."表示一种展开语法，相当于同时赋给props两个键值对，没有这个符号就相当于直接赋值一个对象
<MyComponent {...props}>

还有一种setProps()方法用于内部设置属性，但是不推荐在内部修改属性。

二、State

1. 含义

React把组件看成一个“状态机”，state就相当于组件的数据模型，组件可以自由操作它，状态的改变会导致组件重新渲染。

2. 用法

getInitialState用于设置初始状态，setState()用于设置状态。调用setState()之后React会通过diff算法决定哪些组件需要更新。

三、对比

1. 相似点

都是JS对象

都会触发render更新

具有确定性，状态和结果是一一对应的，相同属性或者状态得到的结果是相同的

都可以设置初始值

2. 区别

属性可以直接从父组件获得或修改，而状态不能；

组件可以在组件内部修改，而属性不能；

四、实战

编写一个文本评论框，见我的另一篇博客。

五、事件

1. 事件处理函数

事件处理函数包括React自有方法以及用户自定义方法，用属性的方式绑定处理函数。事件包括：

onTouchCancel,onTouchEnd,onTouchMove,onTouchStart;
onKeyDown,onKeyPress,onKeyUp;
onCopy,onCut,onPaste;
onChange,onInput,onSubmit;
onFocus,onBlur
onScroll,onWheel
onDoubleClick,onContextMenu,onMouseOver,onMouseOut,onMouseDown,onMouseUp,onMouseEnter,onMouseLeave,onClick
onDrop,onDrag

2. 事件对象

React中的Event对象是重新封装过的，含有的几个重要的通用属性：

target：发生事件的DOM对象；
isTrusted：是否可信，可信是指事件由用户触发（比如鼠标单击）；
nativeEvent：原生的事件对象；
preventDefault：阻止默认行为；
stopPropagation：阻止事件传播（冒泡和捕获）；
type：事件类型；

其它还有很多诸如键盘，鼠标，触摸，滚动等事件特有的属性。

3. 绑定事件

使用属性赋值：onCopy={this.handleCopy};
使用事件监听器：this.refs.btn.addEventListener('click',this.handleClick);

六、组件协同使用

1. 组件嵌套

父组件和子组件之间的嵌套关系。

父组件可以通过修改子组件的属性来实现通信。子组件向父组件通信是间接的，需要在子组件中调用父组件的处理函数，这种机制叫委托。
组件嵌套的逻辑一般比较清晰，易于理解，封装细节后有助于模块化开发。其缺点在于，如果嵌套关系比较多会导致代码变得很复杂，不宜调试bug。

2. Mixin

Mixin代表一组方法，用于横向抽离出组件的相似代码。

var MyMixin={
  componentWillMount:function(){},
  methodA:function(){}
};

var OtherComponent=React.createClass(
  mixins:[MyMixin],  //使用mixin，当前组件实例化时会自动执行mixins里面的WillMount函数
  methodB:function(){}
);

Mixin抽离通用代码的方法可以提高代码复用率，实现即插即用的开发流程，修改一处代码，多处都能有效。其缺点在于编写难度高，考虑到兼容性等要求，会导致某些情况下的冗余，同时Mixin打破了组件之间尽量独立的原则。

七、可控与不可控组件

将数据直接写在属性里，导致其不可更改，后面只能通过真实的DOM节点来获取属性值，这样的组件是不可控的。
如果把属性赋值为state的某个属性，通过修改state属性就可以修改属性值，这样的组件是可控的。