ReactJs学习之生命周期及事件

玩了几个月的mui和h builder开发，整体上感觉在开发效率上提高了些，但是在体验上确实不敢恭维，对于一个做原生开发的程序猿来说，指望设备在webview方面有质的提升来提高app的用户体验太被动了。当然，h5+原生才是app的生存之道–也就是大前端嘛。项目前端框架主要用的是mui+vue,配合开放的一些plus api，算是将项目完成，期间也踩了很多坑。不过遇到问题，一般都跟框架有关，这就需要对框架有稍微深刻的理解，至少对原理有个整体把握。接下来几个月正式开始React Native的学习。学习React Native，前提是先了解并掌握ReactJs前端解决框架。此框架目的是解决大型web端频繁更新dom导致页面更新缓慢问题。先整理下ReactJs需要掌握的东东,主要知识点：JSX、组件生命周期、属性和状态、事件的用法。

1.组件生命周期

组件包含初始化阶段、运行中阶段、销毁阶段。每个阶段对应的具体钩子函数如下：

初始化阶段：

getDefultProps:只调用一次，实例之间共享引用

getInitalState:初始化每个实例特有的状态

componentWillMount: render之前最后一次修改状态的机会

render: 只能访问this.props和this.state,只有一个顶层组件，不允许修改状态和DOM输出

componentDidMount:成功render并渲染完成真实DOM之后触发，可以修改DOM

运行中阶段：

componentWillReceiveProps:父组件修改属性触发，可以修改属性、修改状态

shouldComponentUpdate:组件是否要更新，返回false会阻止render调用

componentWillUnpdate:不能修改状态和属性

render:只能访问this.props和this.state,不允许修改状态和DOM输出

componentDidUpdate:可以修改DOM

销毁阶段：

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

2.事件的用法

事件处理函数：

触摸：onTouchCancel、onTouchEnd、onTouchMove、onTouchStart

键盘：onKeyDown、onKeyPress、onKeyUp

剪切：onCopy、onCut、onPaste

表单：onChange、onInput、onSubmit

焦点：onFocus、onBlur

UI元素：onScroll

滚动：onWheel

鼠标：onClick、onContextMenu(右键)、onDoubleClick、onMouseDown、onMouseEnter、onMouseLeave、onMouseMove、onMouseOut、onMouseOver、onMouseUp

鼠标拖拽：onDrop、onDrag、onDragEnd、onDragEnter、onDragExit、onDragLeave、onDragOver、onDragStart

事件的通用属性：

处理一个事件例子如下：

handleChange:function(event){
console.log(event.target.value);
},

event事件对象包含的属性及方法：

通用：

boolean bubbles： 是否可以冒泡

boolean cancelable：是否可以取消

DOMEventTarge currentTarget：如果可以冒泡，则和target可能不同

boolean defultPrevented：是否禁止默认行为

number eventPhase： 事件所处的阶段

boolean isTrusted：事件是否可信，trigger是不可信事件（代码触发）

DOMEvent nativeEvent：浏览器原生事件

void preventDefault()： 禁止默认事件

void stopPropagation()： 是否要禁止冒泡

DOMEventTarget target：

number timeStamp：时间戳

string type：事件类型

键盘：

string key:按下的键

Number keyCode:key对应的code

String location:位置

Number which:经过通用化的xcode或keyCode

其他还有鼠标、触摸、黏贴板、滚动、UI元素等。与native开发关系不大就不提了。

事件和状态关联：

handleChange:function(event){
this.setState({inputText:event.target.value});
}