79 lines
2.3 KiB
Markdown
79 lines
2.3 KiB
Markdown
|
# 原生JavaScript,dom
|
||
|
|
1. 原生JavaScript操作DOM繁琐效率低
|
||
|
|
2. 使用JavaScript直接操作DOM,浏览器会进行大量的重绘重排.
|
||
|
|
3. 没有组件化编码方案,代码复用率低
|
||
|
|
# React的特点
|
||
|
|
用于构建用户界面的javaScript库,操作DOM呈现页面
|
||
|
|
## 声明式
|
||
|
|
相对命令式.
|
||
|
|
## *组件式
|
||
|
|
|
||
|
|
## 学习一次随处使用
|
||
|
|
开发web应用
|
||
|
|
开发移动端原生应用,react-native
|
||
|
|
VR开发react360
|
||
|
|
|
||
|
|
浏览器安装React Developer Tool
|
||
|
|
|
||
|
|
#### 模块
|
||
|
|
1. 理解:向外提供特定功能的js程序,一般就是一个js文件
|
||
|
|
2. 为什么要拆成模块:随着业务逻辑增加,代码越来越多且复杂
|
||
|
|
3. 作用:复用js,简化js编写,提高js运行效率
|
||
|
|
#### 组件
|
||
|
|
1. 理解:用来实现局部功能效果的代码和资源的集合(html,css,js,image等等)
|
||
|
|
2. 为什么:一个界面的功能更复杂
|
||
|
|
3. 作用:复用编码,简化项目编码,提高运行效率.
|
||
|
|
|
||
|
|
# 使用
|
||
|
|
npm升级
|
||
|
|
```shell
|
||
|
|
npm install -g npm@9.2.0
|
||
|
|
npm i create-create-app -g
|
||
|
|
```
|
||
|
|
## 创建项目
|
||
|
|
```shell
|
||
|
|
npx create-react-app my-app
|
||
|
|
```
|
||
|
|
```shell
|
||
|
|
npm i react react-dom
|
||
|
|
```
|
||
|
|
## 引入 react和react-dom两个js文件
|
||
|
|
## 创建React元素
|
||
|
|
React.createElement('元素名称,标签h,p',属性,子节点,子节点,子节点...)
|
||
|
|
## 渲染react元素到页面中
|
||
|
|
ReactDOM.render(要渲染的元素,渲染挂载点)
|
||
|
|
```html
|
||
|
|
<html>
|
||
|
|
<div id= 'root'></div>
|
||
|
|
<body>
|
||
|
|
<script src= "./node_modules/react/umd/react.development.js"></script>
|
||
|
|
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
|
||
|
|
<script>
|
||
|
|
// const title = React.createElement('h1',null,'hello xian')
|
||
|
|
// const title = React.createElement('p',{title:"我是段落",id:"p1"},'hello xian')
|
||
|
|
const title = React.createElement('p',{title:"我是段落",id:"p1"},'hello xian',React.createElement('span',null,'hello hua'))
|
||
|
|
ReactDOM.render(title,document.getElementById('root'))
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
```
|
||
|
|
|
||
|
|
# React脚手架的使用
|
||
|
|
```shell
|
||
|
|
npx create-react-app my-app
|
||
|
|
npm start
|
||
|
|
```
|
||
|
|
引入改成导入
|
||
|
|
```
|
||
|
|
// es6中模块语法
|
||
|
|
import React from 'react'
|
||
|
|
import ReactDOM from 'react-dom'
|
||
|
|
```
|
||
|
|
|
||
|
|
```html
|
||
|
|
import React from 'react';
|
||
|
|
import ReactDOM from 'react-dom';
|
||
|
|
|
||
|
|
const title = React.createElement('p',{title:"我是段落",id:"p1"},'hello xian',React.createElement('span',null,'hello hua'))
|
||
|
|
ReactDOM.render(title,document.getElementById('root'))
|
||
|
|
```
|