初始React

文章列表

初始React

一.React的诞生

1.什么是React?

React是一个讲数据渲染为HTML视图的来源Js库，用于构建用户界面的JS库。

在以前的学习中构建用户界面的常用操作步骤：

发送请求获取数据

处理数据（过滤，整理格式等）

操作DOM呈现页面

2.React诞生的原因？

使用原生的JS操作Dom繁琐，效率低（DOM-API操作UI）

使用js直接操做DOM，浏览器会进行大量的重绘重排

原生JS没有组件化编码方案，代码复用率太低

3.react的特点

采用组件化模式，声明式编码，提高开发效率及组件复用率

在React Native中可以使用React语法进行移动端开发

使用虚拟DOM+优秀的Diffing算法，尽量减少与真实DOM的交互

4.虚拟dom的特点

关于虚拟dom:

本质是Object类型的对象（一般对象）

虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。

虚拟DOM最终会被React转化为真实DOM，呈现在页面上。

例子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3_虚拟DOM与真实DOM</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id="test"></div>
<div id="demo"></div><!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">/* 此处一定要写babel */
//1.创建虚拟DOM
const VDOM = (  /* 此处一定不要写引号，因为不是字符串 */<h1 id="title">
<span>Hello,React</span>
</h1>
)
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM, document.getElementById('test'))const TDOM = document.getElementById('demo')
console.log('虚拟DOM', VDOM);
console.log('真实DOM', TDOM);
debugger;
// console.log(typeof VDOM);
// console.log(VDOM instanceof Object);
/*关于虚拟DOM：1.本质是Object类型的对象（一般对象）2.虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。3.虚拟DOM最终会被React转化为真实DOM，呈现在页面上。*/
</script>
</body>
</html>

jsx语法规则

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jsx语法规则</title>
<style>.title {
background-color: orange;
width: 200px;}
</style>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id="test"></div><!-- 引入react核心库 -->
<script type="text/javascript" src="../../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../../js/babel.min.js"></script><script type="text/babel">
const myId = 'aTgUiGu'const myData = 'HeLlo,rEaCt'//1.创建虚拟DOMconst 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"/>
</div>)
//2.渲染虚拟DOM到页面ReactDOM.render(VDOM, document.getElementById('test'))/* jsx语法规则：1.定义虚拟DOM时，不要写引号。2.标签中混入JS表达式时要用{}。3.样式的类名指定不要用class，要用className。4.内联样式，要用style={{key:value}}的形式去写。5.只有一个根标签6.标签必须闭合7.标签首字母(1).若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。(2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。*/
</script>
</body>
</html>

==注意：==

$\\textcolor{red}{一定要区分【js语句（代码）】与【js表达式】}$

表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方

下面这些都是表达式：

demo(1)

arr.map()

function test(){}

语句（代码）:

下面这些都是语句（代码）：

if（）{}

for(){}

switch(){}

6.模块组件化理解

a.什么是模块？

1）理解：向外提供特定功能的js程序，一般是个js文件

2）为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂

3）作用：复用js，简化js的编写，提高js运行效率

b.什么是组件？

1）理解：用来实现局部功能效果的代码和资源集合（html/css/js/image等等、）

2）为什么：一个界面的功能更复杂

3）作用：复用编码，简化项目编码，提高运行效率

c.什么是模块化？

当应用的js都以模块来编写的，这个应用就是一个模块化的应用

b.什么是组件化？

当应用是以多组件的方式实现，这个应用就是组件的应用。

补充：

初始React

一.React的诞生

1.什么是React?

2.React诞生的原因？

3.react的特点

4.虚拟dom的特点

jsx语法规则

6.模块组件化理解

相关问题

公告