React

2024-02-06 19:17:28

React（用于构建用户界面的JavaScript库）

React是一个将数据渲染为HTML视图的开源JavaScript库。

React 的特点：

采用组件化开发模式，使用声明式编程，而不是命令式编程，提高了开发效率以及组件的复用率。
在React Native中可以使用React进行移动端 Android 和 ios 应用的开发。
使用虚拟DOM+diffing算法，尽量减少与真实DOM的交互。

与Vue相比的区别：

两者都是做组件化的，整体的功能都类似，但是它们的设计思路是有很多的不同的，使用React和Vue主要是理解它们设计思路的不同。

起步：

<!-- 引入react核心库 -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<!-- 引入react-dom用于支持react操作dom -->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- 引入Babel，用于JSX转换成js -->
<!-- 在书写JSX语法时，Babel的作用体现的格外重要，因为浏览器无法识别JSX的语法代码，所以需要通过Babel进行转换成浏览器可识别的JS -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<!-- 在使用JSX方式创建虚拟DOM时，必须加上type="text/babel" -->
<script type="text/babel"></script>

虚拟DOM

虚拟DOM的本质就是 Object 类型的一般对象。
虚拟DOM比较轻，真实DOM比较重，虚拟DOM是React内部使用的DOM。
创建虚拟DOM用 React.createElement( 标签名，标签属性，标签的内容 ) 方法
- 参数：
- 标签名。
- 标签属性。
- 标签内容。
渲染虚拟DOM用 React.render( jsx模板，容器（挂载点），callback() ) 方法
- 参数：
- jsx模板。
- 容器（挂载点）。
- callback() 回调函数：当内容放到页面后触发的回调函数。

JSX（JavaScript + XML）

XML是早期时一种用于存储和传输数据的文件格式如今被JSON代替

<student>
    <name>Tom</name>
    <age>19</age>
</student>

"{
	"name": "tom",
	"age": "18"
}"

创建虚拟DOM的两种方式

JSX

// const VDOM = <h1>hello react</h1>
// 在h1标签里面嵌套span标签

const VDOM = (
  <h1 id="title">
  <span class="dom">hello react</span>
  </h1>
)
ReactDOM.render(VDOM, document.getElementById('app'))

// -----------分割线----------------

// babel将JSX语法转换成浏览器可识别的JS
const VDOM = (
  <h1 id="title">
  <span class="dom">hello react</span>
  </h1>
)
// 等价于
const VDOM = React.createElement('h1', { id: 'title' }, React.createElement('span', { className : 'dom' }, 'hello world'))

JavaScript

采用JavaScript方式创建虚拟DOM时不需要用到Babel转换，因为未使用到JSX语法。

// JavaScript的方式

// const VDOM = React.createElement('h1', {id : 'title'}, 'hello world')
// 在h1标签里面嵌套span标签
const VDOM = React.createElement('h1', { id: 'title' }, React.createElement('span', { className : 'dom' }, 'hello world'))

ReactDOM.render(VDOM, document.getElementById('app'))

JSX语法规则

定义虚拟DOM时不加双引号。
样式的类名指定不要用class，而是用className。
内联样式，需要用花括号键值表达的形式去写，在遇到双单词的属性需要使用驼峰命名法。
标签中混入JS表达式时，需要使用花括号。
只有一个根标签。
标签必须闭合
标签首字母
1. 若是小写字母开头，则将标签转为HTML的同名元素，若HTML中无同名元素，则报错。
2. 若是大写字母开头，则将标签转化为虚拟DOM组件，React就去渲染对应的组件，若组件未定义，则报错。

.wrap {
  background-color: orange;
}
#title {
  color: #fff;
}

const myId = 'title'
const myClass = 'wrap'
const VDOM = ( // 定义虚拟DOM时不加双引号。
  // 样式的类名指定不要用class，而是用className
  <div className={myClass}> // 标签中混入JS表达式时，需要使用花括号。
    <h1 id={myId}>
      // 内联样式，需要用花括号键值表达的形式去写，在遇到双单词的属性需要使用驼峰命名法。
      <span style={{ color: 'red', fontSize: '39px'}}>hello react</span>
    </h1>
    <h1 id={myId}>
      <span>hello react</span>
    </h1>
  </div>
  // 只有一个根标签。
)
ReactDOM.render(VDOM, document.getElementById('app'))

React面向组件编程

函数式组件
需要注意的地方是：
- 创建函数式组件时，render函数的第一个参数JSX模板 不再是变量名，而是加上函数式组件名，因为是react调用了该函数拿到返回的值，值得注意的是组件首字母需要大写。
- 函数式组件内部的this的指向不再是window，而是undefined，这是因为函数式组件的JSX模板经过Babel的转换，而Babel内部采用了严格模式进行编译，严格模式下不允许函数内部的this指向window。
```
const arr = ['angular', 'react', 'vue']
const myClass = 'title'
// 创建函数式组件
function VDOM() {
  console.log(this)
  return (
    <div className={myClass}>
      <h1>大家好，我是函数式组件</h1>
    </div>
  )
}
// 把组件渲染到页面上
ReactDOM.render(<VDOM />, document.getElementById('app'))
```
类式组件

码农公寓

React（用于构建用户界面的JavaScript库）

React 的特点：

与Vue相比的区别：

起步：

虚拟DOM

JSX（JavaScript + XML）

创建虚拟DOM的两种方式

JSX语法规则

React面向组件编程

相关文章