react入门基础-编程知识

react入门基础

React 简介

React ------- 用于构建用户界面的JavaScript库/一个将数据渲染为HTML视图的开源JavaScript库

`React`历史

【经典水时长/水字数】

由Facebook开发，且开源

起初由Facebook的软件工程师 Jordan Walke 创建【膜拜 React 祖师爷】
于2011年部署于 Facebook的 newsfeed
在2012年部署于 Instagram
2013年5月开源

. . . . . .【这里应该加句：我们的故事还在继续...】

为什么要学 `React`

【生活所迫】

原生JavaScript操作DOM繁琐、效率低（DOM-API操作UI）
使用JavaScript直接操作DOM，浏览器会进行大量的重绘重排
原生JavaScript没有组件化编码方案，代码复用率低

【我JUBAO，老师你上vue也是这么说的】

`React`特点

【经典喝水案例，典典典典典典典典典典典典典典典典典典典】

采用组件化模式、声明式编程，提高开发效率及组件复用率
在React Native中可以使用React语法进行移动端开发【出现了，家人们】
使用虚拟DOM+优秀的diffing算法，尽量减少与真实DOM的交互【基操勿六】

React的基本使用

`hello react` 案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>hello_react</title>
</head>
<body><!-- 准备好一个容器--><div id="test"></div><!-- 引入react库 --><script  src="../js/react.development.js"></script><script src="../js/react-dom.development.js"></script><!-- 引入babel，将jsx转换成js --><script src="../js/babel.min.js"></script><script type="text/babel">// 1.创建虚拟DOMconst VDOM = <h1>Hello,React</h1>// 2.渲染虚拟DOM到页面ReactDOM.render(VDOM,document.getElementById("test"));</script>
</body>
</html>

为什么使用JSX？

使用jsx和js创建虚拟DOM的方式对比【用js也能创建虚拟DOM?涨姿势了（烂梗）】

创建形式

<h1 id='title'><span>Hello,React</span>
</h1>

使用jsx

 <script type="text/babel">// 1.创建虚拟DOMconst VDOM = (<h1 id='title'><span>Hello,React</span></h1>)// 2.渲染虚拟DOM到页面ReactDOM.render(VDOM,document.getElementById("test"));</script>

使用js

api:React.createElement(标签名,标签属性,标签内容)：用于创建虚拟dom

【原来是使用react内部的方法进行创建的】

 <script type="text/javascript">// 1.创建虚拟DOMconst VDOM = React.creatElement('h1',{id:'title'},React.creatElement('span',{},'Hello,React'))// 2.渲染虚拟DOM到页面ReactDOM.render(VDOM,document.getElementById("test"));</script>

总结：

jsx是js在react方面的语法糖【特别好，等于没说😒】

虚拟DOM

虚拟DOM的本质就是object对象【还以为是啥高级玩意】

关于虚拟DOM【我有以下几点要说】

本质是Object类型的对象（一般对象）
虚拟DOM比较“轻”，真实DOM比较重，因为虚拟DOM是React内部在用，无需真实DOM上这么多的属性
虚拟DOM最终会转换成真实DOM，呈现到页面上

JSX语法规则

【前方高能】


//   创建虚拟DOM
const VDOM = (<div><h1>JSX语法规则</h1><div><h2>JSX是什么</h2><p>JSX是一种轻量级的标记语言，它允许你在HTML中定义一个组件，然后在页面中使用这个组件。</p><input type="text"/></div></div>
);
//  渲染虚拟DOM到页面
ReactDOM.render(VDOM, document.getElementById("test"));

规则：