React基础知识（一）

文章目录

- 概念
- 特点
- 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案例

核心库一定要先引入

html 复制代码

<!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 -->
    <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 VDOM = <h1>Hello,React</h1>;
      // render()方法用于渲染虚拟DOM到页面,接收两个参数
      // 第一个参数是虚拟DOM，第二个参数是容器
      ReactDOM.render(VDOM, document.getElementById("test"));
    </script>
  </body>
</html>

虚拟DOM的两种创建方式

使用jsx创建

html 复制代码

<!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 -->
    <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"));
    </script>
  </body>
</html>

使用js创建

一般不用，方法比较繁琐

html 复制代码

<!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 -->
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>

    <script type="text/javascript">
      //1.创建虚拟DOM
      const 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面向组件编程

函数式组件

html 复制代码

<!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>

类组件

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>