react学习笔记（一）

react的特点

（1）简单

（2）声明

React的核心是组件，组件的设计目的是提高代码复用率、降低测试难度和代码复杂度。

提高代码复用率：组件将数据和逻辑封装，类似面向对象中的类。

降低测试难度：组件高内聚低耦合，很容易对单个组件进行测试。

降低代码复杂度：直观的语法可以极大提高可读性。

 

JSX的特点

类XML的语法容易接受

增强JS语义

结构清晰

抽象程度高

代码模块化

JSX的语法

1、首字母大小写

2、嵌套

3、求值表达式

4、驼峰命名

5、htmlFor和className

 

非DOM属性：dangerouslySetInnerHTML、ref、key

dangerouslySetInnerHTML:在JSX中直接插入HTML代码

ref:父组件引用子组件

key:提高渲染性能

 

 

JSX解释器架构介绍-源码阅读方法

1、从执行顺序入手

2、适当忽略细节

3、重视烂笔头

4、反复阅读

JSX解释器架构介绍-理解解释器架构

模块的好处-方便阅读、方便协同开发

 

 

react组件生命周期详解

初始化

1、getDefaultProps: 只调用一次，实例之间共享引用

2、getInitialState：初始化每个实例特有的状态

3、componentWillMount：render之前最后一次修改状态的机会

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

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

 运行中

1、componentWillReceiveProps

2、shouldComponentUpdate

3、componentWillUpdate

4、render

5、componentDidUpdate

销毁

componentWillUnmount

 

 

事件处理函数的使用-绑定事件处理函数

事件对象介绍-事件对象使用方式

 

触摸

1、onTouchCancel

2、onTouchEnd

3、onTouchMove

4、onTouchStart

键盘