官网：
-
英文官网: https://reactjs.org/
React 简介
React 是什么？
官网定义是：React 是一个用于构建用户界面的 JavaScript 库。
简单点说：是一个将数据渲染为HTML视图的开源JavaScript 库。
为什么要学 React？
1、原生JavaScript操作DOM繁琐、效率低（) .
2、使用JavaScript直接操作DOM，浏览器会进行大量的。
3、3.原生JavaScript没有编码方案，代码复用率低。
React 的特点
1.采用组件化模式、
，提高开发效率及组件复用率。
2.在React Native中可以使用React语法进行。
3.使用 + 优秀的
，尽量减少与真实DOM的交互。
React高效的原因
1.使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。
2.DOM Diffing算法, 最小化页面重绘。
一、React入门
1、虚拟DOM与真实DOM
虚拟DOM，用普通js对象来描述DOM结构，因为不是真实DOM，所以称之为虚拟DOM。
真实DOM，浏览器把拿到的HTML代码,结构化为一个浏览器可识别并且js可操作的一个模型而已。
关于虚拟DOM:
1.本质是Object类型的对象（一般对象)
2.虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。
3.虚拟DOM最终会被React转化为真实DOM，呈现在页面上。
虚拟DOM本质是Object类型的对象
虚拟DOM属性较少，顶部再次证明了虚拟DOM是一个对象
真实DOM拥有非常多的属性
2、JSX语法
写JSX语法需要引入的js库
<!-- 引入React核心库 -->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!-- 引入 react-dom： 用来支持 react 的dom操作(渲染) -->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 引入 babel：用来将引入 babel：用来将jsx语法转换成js -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
jsx语法规则:
1.定义虚拟DOM时，不要写引号。
2.标签中混入JS表达式时要用{}。
3.样式的类名指定不要用class，要用c1assName。
4.内联样式,要用style={{key :value}}的形式去写。
5.虚拟DOM只有一个根标签。
6.标签必须闭合。
7.标签首字母
(1).若小写字母开头，则将改标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
(2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。
<!DOCTYPE html>
<html>
<head>
<title>JSX语法规则</title>
<!-- 引入React核心库 -->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!-- 引入 react-dom： 用来支持 react 的dom操作(渲染) -->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 引入 babel：用来将引入 babel：用来将jsx语法转换成js -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<!-- 样式 -->
<style>
.title{
background-color: hotpink;
}
</style>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="app"></div>
<!-- script的类型必须是text/babel -->
<script type="text/babel">
let title = "hello React";
let person = {
username: 'laohu',
age: 1000
}
//创建虚拟DOM
const VDOM = (// 定义虚拟DOM时，不要写引号。
<div>//虚拟DOM只有一个根标签。
<h1 className="title">//样式的类名指定不要用class，要用c1assName。
<span style={{color: "white",fontSize: "36px"}}>{title}</span>//内联样式,要用style={{key :value}}的形式去写。
</h1>
<p>姓名: {person.username}</p>// 标签中混入JS表达式时要用{}。
<p>年龄: {person.age}</p>
兴趣爱好：<input type="text" />//标签必须闭合。
</div>
)
console.log(VDOM)//打印虚拟DOM
// 渲染虚拟DOM到页面上
ReactDOM.render( // render方法接收两个参数
VDOM,
document.querySelector('#app')
)
*/
</script>
</body>
</html>
JSX小练习
image.png
一定注意区分:【js语句(代码)】与【js表达式】
1.表达式:一个表达式会产生一个值，可以放在任何一个需要值的地方
下面这些都是表达式:
(1). a
(2). a+b
(3). demo(1)
(4). arr.map()
(5). function test () o
2.语句(代码):
下面这些都是语句(代码):
(1).if(){}
(2).for(){}
(3).switch(){case:xxx×}
<body>
<!-- 准备好一个容器 -->
<div id="app"></div>
<!-- script的类型必须是text/babel -->
<script type="text/babel">
// 模拟数据
let list = ["Angular","React","Vue"];
//创建虚拟DOM
const VDOM = (/*此处一定不要写引号，因为不是字符串*/
<div>
<h1>前端框架列表</h1>
<ul>
{
list.map((item,index) => {
return <li key={index}>{item}</li>
})
} //JSX语法规则：标签中混入JS表达式时要用{}，表达式具体有哪些，上面一个代码块有讲
</ul>
</div>
)
// 渲染虚拟DOM到页面上
ReactDOM.render( // render方法接收两个参数
VDOM,
document.querySelector('#app')
)
</script>
</body>
3、模块与组件、模块化与组件化的理解
1、模块
1.理解：提供特定功能的js程序, 一般就是一个js文件
2.为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。
3.作用：复用js, 简化js的编写, 提高js运行效率
2、组件
1.理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
2.为什么要用组件： 一个界面的功能更复杂
3.作用：复用编码, 简化项目编码, 提高运行效率
3、模块化
当应用的js都以模块来编写的, 这个应用就是一个模块化的应用
4、组件化
当应用是以多组件的方式实现, 这个应用就是一个组件化的应用
image.png
网友评论