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

键盘

 

 

 

 

 

原文地址:https://www.cnblogs.com/ron123/p/5488557.html