前端模块化开发--React框架(一): 入门和面向组件编程
一、简介
1、特点
- 1)Declarative(声明式编码)
- 2)Component-Based(组件化编码)
- 3)Learn Once, Write Anywhere(支持客户端与服务器渲染)
- 4)高效
- 5)单向数据流
2、React高效的原因
- 1)虚拟(virtual)DOM, 不总是直接操作DOM
- 2)DOM Diff算法, 最小化页面重绘
3、相关的js核心库
- 1)react.js: React的核心库
- 2)react-dom.js: 提供操作DOM的react扩展库
- 3)babel.min.js: 解析JSX语法代码转为纯JS语法代码的库
4、简单的例子
1 |
|
5、虚拟DOM
1 | 1)React提供了一些API来创建一种 `特别` 的一般js对象 |
1 | <script type="text/babel"> //声明babel |
二、JSX(JavaScript XML)介绍和使用
1、介绍
- 1)全称:
JavaScript XML
- 2)react定义的一种类似于XML的JS扩展语法: XML+JS
- 3)作用: 用来创建react虚拟DOM(元素)对象
1 | a.var ele = <h1>Hello JSX!</h1> |
4)标签名任意: HTML标签或其它标签
5)标签属性任意: HTML标签属性或其它
6)基本语法规则
1
2a.遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
b.遇到以 { 开头的代码,以JS语法解析: 标签中的js代码必须用{ }包含7)babel.js的作用
1
2a.浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
b.只要用了JSX,都要加上type="text/babel", 声明需要babel来处理2、使用
将数据的数组转为标签的数组
1 | <script type="text/babel"> |
三、模块化
1.模块
- 1)理解: 向外提供特定功能的js程序, 一般就是一个js文件
- 2)为什么: js代码更多更复杂
- 3)作用: 复用js, 简化js的编写, 提高js运行效率
2.组件
- 1)理解: 用来实现特定(局部)功能效果的代码集合(html/css/js)
- 2)为什么: 一个界面的功能更复杂
- 3)作用: 复用编码, 简化项目编码, 提高运行效率
3.模块化
- 当应用的js都以模块来编写的, 这个应用就是一个模块化的应用
四、React面向组件编程
1、自定义组件(Component)
1 | <script type="text/babel"> |
2、组件三大属性
==state
==
- 1)state是组件对象最重要的属性, 值是对象(可以包含多个数据)
- 2)组件被称为”状态机”, 通过更新组件的state来更新对应的页面显示(重新渲染组件)
1 | <script type="text/babel"> |
==props
==
- 1)每个组件对象都会有props(properties的简写)属性
- 2)组件标签的所有属性都保存在props中
- 3)通过标签属性从组件外向组件内传递变化的数据
- 4)注意: 组件内部不要修改props数据
1 | <script type="text/babel"> |
==refs
==
- 1)组件内的标签都可以定义ref属性来标识自己
1 | a.<input type="text" ref={input => this.msgInput = input}/> |
- 2)在组件中可以通过this.msgInput来得到对应的真实DOM元素
- 3)作用: 通过ref获取组件内容特定标签对象, 进行读取其相关数据
事件处理
- 1)通过onXxx属性指定组件的事件处理函数(注意大小写)
1 | a.React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 |
- 2)通过event.target得到发生事件的DOM元素对象
例子
1
2
3
4<input onFocus={this.handleClick}/>
handleFocus(event) {
event.target //返回input对象
}
1 | <script type="text/babel"> |
3、组件的组合
代码
1 | <script type="text/babel"> |
4、收集表单数据
- 1)问题: 在react应用中, 如何收集表单输入数据
- 2)包含表单的组件分类
1 | a.受控组件: 表单项输入数据能自动收集成状态 |
示意代码
1 | <script type="text/babel"> |
5、组件的生命周期
1、生命周期流程:
1 | a.第一次初始化渲染显示: ReactDOM.render() |
2、 重要的勾子
1 | 1)render(): 初始化渲染或更新渲染调用 |
代码
1 | <script type="text/babel"> |
6、虚拟DOM与DOM Diff算法
1 | <script type="text/babel"> |
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 MiChong的🏡!
评论