一、React的简介
- 英文官网: https://reactjs.org/
- 中文官网: https://react.docschina.org/
- 资料地址:git@gitee.com:zhong-qing-wang/react-code.git
1. react是什么
- 用于动态构建用户界面的 JavaScript 库(只关注于视图)
2. 谁开发的?
3. 特点
原生js
1. 原生JavaScript操作DOM繁琐,效率低(DOM-APi操作UI)
2. 使用JavaScript直接操作DOM,浏览器会进行大量的重绘重排
3. 原生JavaScript没有组件化编码方案,代码的复用率低
React
1. 声明式编码
2. 组件化编码
3. React Native 编写原生应用
4. 高效(优秀的 Diffing 算法)
例子
-
原生js实现列表渲染
-
数据更新,原生js的操作
- 数据更新,原生React的操作
二、React的基本使用
1. 环境搭建
引入react环境
`
- 注意:js引是
有顺序
的
<!-- 引入react核心库 -->
<script src="../js/react.development.js"></script>
<!-- 引入react-dom,用于支持react操作DOM -->
<script src="../js/react-dom.development.js"></script>
<!-- 引入babel,用于将jsx转为js -->
<script src="../js/babel.min.js"></script>
hello,React的小案例
<!-- 准备一个容器 -->
<div id="app"></div>
<!-- 此处一定要写babel -->
<script type="text/babel">
// 1. 创建虚拟DOM
const VDOM = <h1>hello, React</h1> /* 此处一定不要写引号,因为不是字符串 */
// ReactDOM.render(虚拟DOM,容器)
ReactDOM.render(VDOM, document.getElementById('app'))
</script>
2. 创建虚拟 DOM 的两种方式
纯JS方式(一般不用)
- 这里不需要引入
babel.min.js
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<!-- 容器 -->
<div id="app"></div>
<script type="text/javascript">
// 1. 创建虚拟DOM
// const VDOM = React.createElement(标签名, 标签属性,标签内容)
const VDOM = React.createElement('h1', { id: 'title' }, 'hello, React')
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM, document.getElementById('app'))
</script>
JSX方式
<div id="app"></div>
<script type="text/babel">
// 1. 创建虚拟DOM
const VDOM = (<h1 id='title'>hello, React</h1>)
// 2. 渲染虚拟DOM到页面
ReactDOM.render(VDOM, document.getElementById('app'))
</script>
两者的区别
3. 虚拟DOM与真实DOM
<!-- 准备好一个容器 -->
<div id="test"></div>
<div id="demo"></div>
<script type="text/babel">
//1.创建虚拟DOM
const VDOM = (<h1 id="title">
<span>Hello,React</span>
</h1>)
// 真实DOM
const TDOM = document.getElementById('demo')
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM, document.getElementById('test'))
console.log('虚拟DOM', VDOM);
console.log('真实DOM', TDOM);
</script>
总结:虚拟DOM
1. 本质是Object类型的对象(一般对象)
2. 虚拟DOM比较“轻”,真实DOM比较“重”,因为虚拟DOM是React内部在用,无需真实DOM上那么多的属性。
3. 虚拟DOM最终会被React转化为真实DOM,呈现在页面上。
4. React JSX
- 全称:
JavaScript XML
- react 定义的一种类似于XML的JS 扩展语法: JS + XML 本质是
React.createElement(component, props, ...children)
方法的语法糖
- 作用: 用来简化创建
虚拟DOM
,它不是字符串
, 也不是HTML/XML标签
,它最终产生的就是一个JS对象
- 标签中混入JS表达式时要用
{}
。- 样式的类名指定不要用class,要用
className
。- 内联样式,要用
style={{key:value}}
的形式去写。- 只有一个
根标签
标签必须闭合
- 标签首字母
- 若
小写字母开头
,则将该标签转为html中同名元素,若html中无该标签对应的同名元素,则报错。- 若
大写字母开头
,react就去渲染对应的组件,若组件没有定义,则报错。
<style>
.title {
background-color: orange;
width: 200px;
}
</style>
<!-- 准备好一个容器-->
<div id="test"></div>
<script type="text/babel">
const myId = 'aTgUiGu'
const myData = 'HeLlo,rEaCt'
//1.创建虚拟DOM
const VDOM = (<div>
<h2 className="title" id={myId.toLowerCase()}>
<span style={{ color: 'white', fontSize: '29px' }}>{myData.toLowerCase()}</span>
</h2>
<h2 className="title" id={myId.toUpperCase()}>
<span style={{ color: 'white', fontSize: '29px' }}>{myData.toLowerCase()}</span>
</h2>
<input type="text" />
<good>123</good> //html有就渲染,否则报错
<Good>456</Good> // 报错
</div>)
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM, document.getElementById('test'))
</script>
5. 【js语句(代码)】与【js表达式】的区别
表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方
1. a
2. a+b
3. demo(1)
4. arr.map()
5. function test () {}
js语句(代码)
1. if(){}
2. for(){}
3. switch(){case:xxxx}
6. jsx小案例
<!-- 准备好一个容器 -->
<div id="test"></div>
<script type="text/babel">
//模拟一些数据
const data = ['Angular', 'React', 'Vue']
//1.创建虚拟DOM
const VDOM = (<div>
<h4>前端js框架列表</h4>
<ul>
{
data.map((item, index) => {
return <li key={index}>{item}</li>
})
}
</ul>
</div>)
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM, document.getElementById('test'))
</script>
三、模块与组件、模块化与组件化的理解
模块
1. 理解:向外提供特定功能的js程序, 一般就是一个js文件
3. 为什么要拆成模块:随着业务逻辑增加,代码越来越多且复杂。
3. 作用:复用js, 简化js的编写, 提高js运行效率
组件
1. 理解:用来实现局部功能效果的代码和资源的集合(html/css/js/image 等等)
2. 为什么要用组件: 一个界面的功能更复杂
3. 作用:复用编码, 简化项目编码, 提高运行效率
模块化
- 当应用的 js 都以模块来编写的, 这个应用就是一个模块化的应用
组件化
- 当应用是以多组件的方式实现, 这个应用就是一个组件化的应用