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