React学习笔记

去除所有的DOM操作；组件把状态和结果一一对应起来，从而直观理解，程序在不同状态时，产生什么输出；

jsx的特点

类XML语法容易接受

增加JS语义

结构清晰

抽象程度高：屏蔽掉手动DOM操作；跨平台（react native）

代码模块化

var HelloMessage = React.createClass({
render:function(){
return <div className="test">Hello {this.props.name}</div>
}
});
React.render(<HelloMessage name="John" />,mountNode);

元素名HelloMessage ，子节点{this.props.name},节点属性：name="John"

JSX语法：

首字母大小写敏感：

大写：自定义的组件HelloMessage

小写：DOM中的组件div

嵌套

求值表达式（可以进行运算）

驼峰命名

html=>htmlFor,class=>className

条件判断

三元表达式

{this.props.name?this.props.name:'world'}

变量

var HelloWorld = React.createClass({
getName:function(){
if( this.props.name)
return this.props.name
else
return 'world'
},
render : funcfion(){
var name=this.getName();
return <p>Hello ,{name}</p>
}
)};
React.render(<div><HelloWorld name="Li"></HelloWorld></div>,document.body)

直接调用函数

return <p>Hello,{this.getName()}</p>

||运算符

{this.props.name || "world"}

非DOM属性

dangerouslySetInnerHtml、ref、key

dangerouslySetInnerHtml：在JSX中直接插入HTML代码

ref：父组件引用子组件===》this.refs.childp(虚拟的DOM节点)

key：提供渲染性能===>组件内部，key不可以相同

JSX解析器

入口函数---》载入其他模块==>解析JSX==>执行JS

组件的生命周期：

初始化：getDefaultProps、getInitialState、componentWillMount、render、componentDidMount

运行中：componentWillReceiveProps、shouldComponUpdate、componentWillUpdate、render、componentDidUpdate

销毁：componentWillUnmount

在删除组件之前进行清理操作，比如计时器和事件监听器

状态只和组件自己相关，由自己维护；组件不能修改属性；

组件在运行时需要修改的数据就是状态。

绑定事件处理函数：

触摸类事件：

onTouchCancel、onTouchEnd、onTouchMove、onTouchStart

键盘类事件：

onKeyDown、onKeyPress、onKeyUp

剪切类事件

onCopy、onCut、onPaste

表单

onChange、onInput、onSubmit

焦点：

onFocus、onBlur

UI元素

onScroll

滚动

onWheel

鼠标

onClik、onContextMenu、onDoubleClick、onMouseDown按下、onMouseEnter进入、onMouseLeave离开、onMouseMove移动、

onMouseOut、onMouseOver、onMouseUp

鼠标拖拽

onDrop、onDrag、onDragEnd、onDragEnter、onDragExit、onDragLeave、onDragOver、onDragStart

组件协同：

组件的协同本质上是对组件的一种组织、管理方式。

目的：逻辑清晰、代码模块化、封装细节、代码可复用