React 学习笔记01

Happyileaf
131 阅读1分钟

「这是我参与11月更文挑战的第14天，活动详情查看：2021最后一次更文挑战」

React 学习笔记01

一、React简介

用于动态构建用户界面的 JavaScript 库(只关注于视图)

React官网

为什么要学React

原生Javascript存在的问题:

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

React的特点

  • 组件化编码，声明式编码
  • React Native 编写原生应用
  • 高效（优秀的Diffing算法）

React高效的原因

  • 使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。
  • DOM Diffing算法, 最小化页面重绘。

二、JSX语法

在React中有大量的JSX语法，所以学习React有必要了解JSX语法。
JSX全称是JavaScript XML。一种类似于XML的JS扩展语法: JS + XML。在React中本质是 React.createElement(component, props, ...children)方法的语法糖。用来简化创建虚拟DOM。

写法：var ele = <h1>Hello JSX!</h1>

注意：

  • 它不是字符串, 也不是HTML/XML标签
  • 它最终产生的就是一个JS对象
  • 标签名和标签属性任意: HTML标签（属性）或其它标签（属性）

1. 基本语法规则

  1. 定义虚拟DOM时，不要写引号。

  2. 遇到以 < 开头的代码，以标签语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析。

  3. 遇到以 { 开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包含。

  4. 标签中混入JS表达式时要用{ }。

  5. 样式的类名指定不要用class，要用className，因为要和Class类区分开。

  6. 内联样式，要用style={{key:value}} 的形式去写。

  7. 只有一个根标签

  8. 标签必须闭合

  9. 标签首字母大小写敏感，且有不同的解析规则。 (1). 若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
    (2). 若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

2. babel.js的作用

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

三、 React的基本使用

1.相关js库

1. react.js：React核心库。
2. react-dom.js：提供操作DOM的react扩展库。
3. babel.min.js：解析JSX语法代码转为JS代码的库。

2. 举例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>hello_react</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>Hello,React</h1> /* 此处一定不要写引号，因为不是字符串 */
		//2.渲染虚拟DOM到页面
		ReactDOM.render(VDOM,document.getElementById('test'))
	</script>
</body>
</html>
avatar
文章
阅读
粉丝