1.基础
1.1 简介
- react是什么? 用于构建用户界面的JavaScript库, 它是一个将数据渲染为HTML视图的开源JavaScript库.
- 界面呈现出来所需要的过程:
- 发送请求获取数据
- 处理数据 (过滤, 整理格式)
- 操作dom呈现页面
- 谁开发的? 是由Facebook开发,且开源.
(1) 起初有Facebook的软件工程师Jordan Walker创建.
(2) 于2011年部署于Facebook的newsfeed.
(3) 随后在2012年部署于Instagram.
(4) 2013年5月宣布开源.
react 近十年 "陈酿" 正在被腾讯,阿里等一线大厂广泛使用.
- 为什么要学习react?
- 原生JavaScript操作dom繁琐效率低.
- 使用JavaScript直接操作dom,浏览器会进行大量的重绘重排.
- 原生JavaScript没有组件化编码方案, 代码复用率低. (js模块化: 将一个庞大的js按照功能点,拆分成一个一个小的js) (组件化:html/css/js 结构样式都拆分)
- react的特点?
- 采用组件化模式,声明式编码,提高开发效率及组件复用率.
- 在React Native中可以使用React语法进行移动端开发.
- 使用虚拟dom + 优秀的Diffing算法, 尽量减少与真实dom的交互.
1.2 React的基本使用
- babel.js 将ES6+ 转Es5 和 将jsx转js
- react.development.js 它是react的核心库
- react-dom.development.js 它是react的扩展库,帮你操作dom
- 引入顺序, 核心库要在扩展库之前引入. 最后引入babel
<body>
<div id="testapp"></div>
<script type="text/javascript" scr="../js/react.development.js">
<script type="text/javascript" scr="../js/react-dom.development.js">
<script type="text/javascript" scr="../js/babel.min.js">
<script type="text/babel"> // 这里一定要写babel
// (1)创建虚拟dom
const VDOM = <h1>hello,react</h1> // 此处一定不要写引号, 因为不是字符串
// (2)渲染虚拟dom到页面
ReactDOM.render(虚拟DOM,容器)
ReactDOM.render(VDOM, document.getElementById("testapp"))
注意:
偏爱图标
代码一多易白屏,因为它是后遇到的babel才创建虚拟dom的,所会有警告
但凡一个框架都会出现一个调试工具, 我发现你的浏览器没有下载react的开发者工具
</script>
</body>
- 创建虚拟dom的两种方式
jsx: const VDOM = <h1 id="title">hello,react</h1>
js: const CDOM2 = React.createElement("标签名","标签属性","标签内容")
const CDOM2 = React.createElement("h1",{id: 'title'},"hello,react")
console.log('虚拟dom', VDOM)
console.log(tyepof VDOM)
console.log(VDOM instanceof Object)
let TDOM = document.getElementById('demo')
console.log(TDOM) // 真实dom
debugger;
虚拟dom:
本质是Object类型的对象 (一搬对象)
虚拟dom比较轻,真实dom比较重,因为虚拟dom是react内部在用,无需真实dom上那么多的属性.
虚拟dom最终会被react转化为真实dom,呈现在页面上.
- jsx语法
(1) 全称 JavaScript XML
(2) react 定义的一种类似于XML的JS扩展语法: JS+XML
(3) 本质是React.createElement("标签名","标签属性","标签内容") 方法的语法糖
(4) 作用: 用了简化创建虚拟dom
a. 写法 let dom = <h1> Hello tom </h1>
b. 他不是字符串,也不是HTML/XML标签
c. 它最终产生的就是一个JS对象
(6) 语法规则:
* 定义虚拟dom不用写引号
* jsx里边可以用插值语法来获取 js表达式时 用单个花阔号 { },
* <div className="ttt" style={ {color: '#fff', fontSize: '20px'} }></div> 样式类名指定不用class,要用className
* 内联样式,要用style={{}}的形式去写.
* jsx的要求是, 不能有多个根标签, 根标签只能有一个
* 标签要闭合
* 标签若小写字母开头,转为html中同名元素,若html没有这个标签则报错. 若大写字母开头,
react就去渲染对应的组件, 若组件没定义则报错.
* jsx 可以自动遍历数组, 不能遍历对象 {list} {obj}, 可以自己写个循环
{
list.map((item,index)=> { // 此处用for语句会报错
return <li key={item.id}>{item}</li>
})
}
区分js语句和js表达式:
表达式会产生一个值,可以放在任何一个需要值的地方.
语句,if(){} for(){} switch() {}
*
(7) XML早期用于存储和传输数据
<student>
<name>Tom</name>
<age>19</age>
</student>
后来人们就不用他来传输数据了, 改用了 JSON来传数据.
" {"name":"Tom", "age":19} "
JSON身上有两个方法: parse将json串转为对象, stringfy对象转成json串
- 概念区分
* 模块:
(1) 理解: 向外提供特定功能的js程序,一般是一个一个js文件
(2) 为什么拆成模块: 随着业务逻辑的增加,代码越来越多且复杂
(3) 作用: 复用js, 简化js的编写,提高js运行效率
* 组件:
(1) 理解: 用来实现局部功能效果的代码和资源的集合 (html/css/js/image...等等)
(2) 为什么拆成组件: 一个界面的功能更复杂
(3) 作用:复用编码,简化项目编码,提高运行效率
* 组件化:
当应用的js都以模块化来编写出来的, 这个应用就是一个模块化应用.
* 组件化:
当应用是以多个组件的方式实现, 这个应用就是一个组件化的应用.
2.React面向组件编程
2.1 基本使用
- 浏览器安装react开发者工具
- 效果
(1)
函数式组件(适合简单组件的定义):
function Demo() {
console.log(this) 打印undefined
return <h2>我是用函数定义的组件</h2>
}
ReactDom.render(<Demo/>, document.getElementById('test')) // 因为函数是作为组件使用的, 所以函数名也就是组件名.
(2)
类式组件(适合复杂组件的定义): 类名就是组件名
class Demo2 extend React.Component{ // 必须继承React.Component
render() { // 必须有render
console.log('render中的this', this)
return <h2>我是用类定义的组件</h2>
}
}
ReactDom.render(<Demo2 />, document.getElementById('test'))
/*
* React解析组件标签, 找到了Demo2组件
* 发现组件是使用类定义的, 随后new出来该类的实例, 并通过该实例调用到原型上的render方法.
* 将render饭后的虚拟DOM转为真实DOM,随后呈现在页面中.
*/
如果组件是有状态的就是复杂组件(state)
2.2 组件实例的三大核心属性
2.2.1 state
-
state是组件对象最重要的属性,值是对象(可以包含多个key-value的组合)
-
组件被称为"状态机",通过更新组件的state更新对应的页面显示(重新渲染组件)
-
组件render方法中的this为组件实例对象
-
组件自定义方法中this为undefined( 解决方案: 强制绑定this,通过函数对象的bind() 和箭头函数)
-
数据状态用setState() 来更改
2.2.2 props
2.2.3 refs
2.3 react中的事件处理
- 通过onXxx属性指定事件处理函数
- React使用的是自定义事件, 而不是使用的原生的DOM事件---为了更好的兼容性.
- React中的事件是通过事件委托方式处理的( 委托给组件外层的元素 )----为了高效
- 通过event.target得到发生事件的DOM元素对象, 不要过渡的使用ref
- 发生事件的元素正好是你要 操作的那个元素,就可以省略ref
2.4 react中收集表单数据
2.4.1 非受控组件
- 现用现取
2.4.2 受控组件
2.4.3 高阶函数_函数的柯里化
2.5 组件的生命周期
2.6 DOM的diffing算法
3.react脚手架
3.1 基础
- 用来帮助程序员快速创建一个基于xxx库的模板项目
- 包含了所有需要的配置(语法检查,jsx编译,devServer...)
- 下载好了所有的依赖
- 可以直接运行一个简单效果
- react提供了一个用于创建react项目的脚手架库: create-react-app
- 项目的整体结构为:react + webpack + es6 + eslint
- 使用脚手架开发的项目特点: 模块化,组件化,工程化
3.2 创建项目
- 全局安装: npm install -g create-react-app
- create-react-app my-test
- npm start
