河北智能网站建设平台_包装设计需要哪些信息_高质量外链平台_网站优化排名服务

文章目录

- 概念
- 特点
- React基本使用
- - hello_react案例
  - 虚拟DOM的两种创建方式
  - - 使用jsx创建
    - 使用js创建
  - 虚拟DOM和真实DOM
- React jsx
- - XML
  - jsx语法规则
  - - 作用
    - 基本语法规则
    - js语句和js代码
    - babel.js作用
- 模块与组件
- - 模块
  - 组件
- React面向组件编程
- - 函数式组件
  - 类组件

概念

react是一个将数据渲染为Html视图的开源js库

特点

采用组件化模式，声明式编码，提高开发效率及组件复用率。
在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>Document</title></head><body><!-- 准备好一个容器 --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><scripttype="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 VDOM = <h1>Hello,React</h1>;// render()方法用于渲染虚拟DOM到页面,接收两个参数// 第一个参数是虚拟DOM，第二个参数是容器ReactDOM.render(VDOM, document.getElementById("test"));</script></body>
</html>

虚拟DOM的两种创建方式

使用jsx创建

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>1_使用jsx创建虚拟DOM</title></head><body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><scripttype="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.创建虚拟DOMconst VDOM = (/* 此处一定不要写引号，因为不是字符串 */<h1 id="title"><span>Hello,React</span></h1>);//2.渲染虚拟DOM到页面ReactDOM.render(VDOM, document.getElementById("test"));</script></body>
</html>

使用js创建

一般不用，方法比较繁琐

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>2_使用js创建虚拟DOM</title></head><body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><scripttype="text/javascript"src="../js/react-dom.development.js"></script><script type="text/javascript">//1.创建虚拟DOMconst VDOM = React.createElement("h1",{ id: "title" },React.createElement("span", {}, "Hello,React"));//2.渲染虚拟DOM到页面ReactDOM.render(VDOM, document.getElementById("test"));</script></body>
</html>

虚拟DOM和真实DOM

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

React jsx

XML

早期用于存储和传输数据
在这里插入图片描述

jsx语法规则

全称JavaScript XML,react定义的一种类似于XML的js扩展语法：js+XML;
本质是React.createElement(component,props,…children)方法的语法糖.
标签名任意: HTML标签或其它标签
标签属性任意: HTML标签属性或其它

作用

用来简化创建虚拟DOM

写法：var ele = < h1 >Hello JSX!< /h1>
注意1：它不是字符串, 也不是HTML/XML标签
注意2：它最终产生的就是一个JS对象

基本语法规则

● 遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
● 遇到以 { 开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包含
● 定义虚拟DOM时，不要写引号。
● 标签中混入JS表达式时要用{}。
● 样式的类名指定不要用class，要用className。
● 内联样式，要用style={{key:value}}的形式去写。
● 只有一个根标签
● 标签必须闭合
● 标签首字母
● 若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
● 若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

js语句和js代码

表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
下面这些都是表达式：

a
a+b
demo(1)
arr.map()
function test () {}

语句(代码)：
下面这些都是语句(代码)：

if(){}
for(){}
switch(){case:xxxx}

babel.js作用

浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
只要用了JSX，都要加上type=“text/babel”, 声明需要babel来处理

模块与组件

模块

理解：向外提供特定功能的js程序, 一般就是一个js文件
为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。
作用：复用js, 简化js的编写, 提高js运行效率

组件

理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
为什么要用组件：一个界面的功能更复杂
作用：复用编码, 简化项目编码, 提高运行效率

React面向组件编程

函数式组件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>1_函数式组件</title>
</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">//1.创建函数式组件function MyComponent(){console.log(this); //此处的this是undefined，因为babel编译后开启了严格模式return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2>}//2.渲染组件到页面ReactDOM.render(<MyComponent/>,document.getElementById('test'))/* 执行了ReactDOM.render(<MyComponent/>.......之后，发生了什么？1.React解析组件标签，找到了MyComponent组件。2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。*/</script>
</body>
</html>

类组件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>2_类式组件</title>
</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">//1.创建类式组件class MyComponent extends React.Component {render(){//render是放在哪里的？—— MyComponent的原型对象上，供实例使用。//render中的this是谁？—— MyComponent的实例对象 <=> MyComponent组件实例对象。console.log('render中的this:',this);return <h2>我是用类定义的组件(适用于【复杂组件】的定义)</h2>}}//2.渲染组件到页面ReactDOM.render(<MyComponent/>,document.getElementById('test'))/* 执行了ReactDOM.render(<MyComponent/>.......之后，发生了什么？1.React解析组件标签，找到了MyComponent组件。2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。3.将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。*/</script>
</body>
</html>