一、react
1、市面上的三大框架
vue
渐进式框架
尤雨溪
设计模式：MVVM model 模型 view 试图 viewModel 试图模型（M和V之间的桥梁）
双向数据绑定
v-for v-model v-if v-show
angular
谷歌
1.x MVC model 模型 view 视图 controller控制器
2.x MVVM 微软的ts
ng-if ng-show ng-model
react
库
开源
主要针对于试图
2、react介绍
react是Facebook内部的一个JavaScript类库
react用户创建web交互界面
react并不是一个完整的MVC框架，可以被认为是MVC中的V（view）
react设计思想非常独特，创新，性能出众，代码逻辑简单
react引入了虚拟DOM机制
react引入了组件化的思想
react使用了Facebook专门为它开发的一套语法糖：JSX（JavaScript XML）
3、react的优缺点
优点
-
react速度很快
-
一切皆组件
-
单项数据流
-
同构、纯粹的JavaScript
-
兼容性好
缺点
react不是一个完整的框架，它只是实现了MVC中的V，如果要构建大型的项目，那么还需要加上react-router （路由） redux（状态管理）
4、安装
脚手架
npm i create-react-app -g + create-react-app@5.0.1
创建项目
create-react-app 项目名称（不能用驼峰）
5、官网
React 官方中文文档 – 用于构建用户界面的 JavaScript 库
用于构建用户界面的 JavaScript 库
6、项目目录
my-app ├── README.md 阅读指南 ├── node_modules 第三方依赖 ├── package.json 项目配置文件 ├── .gitignore 忽略文件 ├── public │ ├── favicon.ico 小图标 │ ├── index.html 单页面 │ └── manifest.json 主题配置文件 └── src ├── App.css ├── App.js 主组件 ├── index.css ├── index.js 主入口文件 ├── logo.svg
7、设置端口号
{
"scripts": {
"start": "set port=端口号 && react-scripts start"
},
}
8、入口文件
-
src/index.js
-
引入react库
// 1、引入react核心库 import React from "react"
-
引入reactdom库
// 2、引入react-dom 库client文件 import ReactDOM from "react-dom/client"
-
创建根节点
// 3、创建根节点
const Root= ReactDOM.createRoot(document.getElementById("root"))
-
渲染视图
// 4、渲染试图 Root.render( // 要渲染的内容 <h1> 哈哈哈 </h1> )
9、创建组件
9.1 函数创建组件
语法：
function App(){
return (
// jsx语法 模板
)
}
export default App
在src下创建主组件
src/App.js （一般主组件里面只嵌套其他组件）
function App(){
return <h1>主组件</h1>
}
export default App
在index.js中引入并渲染主组件
// 引入主组件 import App from "./App.jsx"
Root.render( // 要渲染的内容 // 组件名的首字母要求大写 <App /> )
9.2 类创建组件
语法：
// 引入 react
import React from "react";
class Home extends React.Component {
render(){
return (
<div>
<h1>home</h1>
</div>
)
}
}
export default Home
import {Component} from "react"
class App extends Component{
render(){
// render 函数时react的一个声明周期函数
return (
// 这里是jsx语法
)
}
}
export default App
案例：
// 引入 react
import React from "react";
import "../assets/home.css"
let navlist=["首页","分类","购物车","个人中心"]
let active=0
class Home extends React.Component {
render(){
return (
<div className="home">
<h1>home</h1>
<div className="nav">
{
navlist.map((item,index)=>{
return <div key={item} className={index==active?"active":""}>{item}</div>
})
}
</div>
</div>
)
}
}
export default Home
9.2.1 state和setState
-
state 存储数据 （不是所有的数据都需要定义到state中的）
constructor(){
super()
this.state={
name:"郭伟",
age:18
}
}
-
setState 修改数据
-
setState函数的特点
-
setState 可以触发render的渲染
-
render函数中不可以调用setState 它会造成死循环
-
setState 是异步的，有回调函数
-
-
this.setState({
// 重新设置数据
})
changeName(){
console.log(this);//undefined 自己声明的函数是没有this的，需要通过bind call apply绑定this
// this.state.name="韩九华"
// react是单数据流, 修改数据之后，不会直接重新渲染页面
// 必须手动的触发修改
// this.setState 可以重新触发render
// 所以不要把this.setState 写到render里面
this.setState({
name:"韩九华"
})
}
9.3 两者区别
-
函数组件没有state，没有声明周期
-
类组件有state，有声明周期
10、jsx语法特点
1、js和html的混合使用
2、有且只能有一个根元素
3、{/* jsx的注释 */}
4、遇见<> 则解析为html语法 遇见 { } 则解析成js语法
5、jsx语法中，js中的一些关键字与dom属性相同时要区分
class==>className for===>htmlFor οnclick==>onClick
6、jsx中的行内样式: style={ json }
7、jsx语法中，自闭和标签必须加结束符
8、在jsx语法中， js中的 if else for 都不能用
11、数据绑定
{ 数据 }
let msg = "你好 hello react"
let num=123
let bool=true
let arr=[1,2,3,4,5,6]
let obj={
name:"zs",
age:10
}
function App(){
return ( <div>
<h1>{msg}</h1>
<h1>{num}</h1>
<h1>{bool}</h1>
<h1>{arr}</h1>
<h1>{JSON.stringify(obj)}</h1>
<h1>{obj.name}</h1>
<h1>{obj.age}</h1>
</div>)
}
12、动态属性绑定
属性={变量}
let img="https://img2.baidu.com/it/u=582136457,2836724675&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=400"
let haha="哈哈哈"
function App(){
return <div>
<h1>{msg}</h1>
<img src={img} alt="" hehe={haha}/>
</div>
}
13、三目运算渲染
{ 条件? 内容 : 内容 }
{ 条件? 标签 : 标签 }
let h1 =<h1>真</h1>
let h11=<h1>假</h1>
function App() {
return (
<div>
{ flag?"真":"假" }
{
flag? h1: h11
}
</div>
)
}
14、列表渲染（数组绑定）
{
数组.map((item,index)=>{
return 循环的内容
})
}
let userinfo=[
{
id:1,
name:"郭伟"
},{
id:2,
name:"韩九华"
},{
id:3,
name:"崔琳琳"
}
]
<ul>
{
userinfo.map(item=>{
return <li key={item.id}>{item.name}</li>
})
}
</ul>
15、动态样式
动态class
className={变量}
import "./assets/app.css"
let arr=["数码","家具" ,"家居","服饰" , "健身"]
let active=2
function App(){
return (
<div>
<ul>
{
arr.map((item,index)=> {
// return <li key={item} class="active">{item}</li>
// Invalid DOM property `class`. Did you mean `className`
// class js中class是用来声明类的，为了解决冲突，要使用className
return <li key={item} className={index==active?"active":""}>{item}</li>
} )
}
</ul>
</div>
)
}
动态style
style={ json }
let obj={
backgroundColor:"pink",
color:"red",
width:"300px"
}
function App(){
return (
<div>
{/* <h1 style={{ color:"red"}}>hello</h1> */}
<h1 style={obj}>hello</h1>
</div>
)
}
export default App
/*
绑定style
style={ json对象 }
*/
16、组件嵌套
// 引入 组件 import 组件名 from "组件的地址"
// 调用组件 <组件名 />
17、静态资源
import img3 from "../assets/images/3.webp"
let goodslist=[
{
id:1,
goodsname:"小熊饼干",
// img:"../assets/images/1.webp"
img:require("../assets/images/1.webp")
},{
id:2,
goodsname:"我是保安",
img:"https://img1.baidu.com/it/u=2990935198,1069729003&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500"
},{
id:3,
goodsname:"保卫平安",
img:img3
}
]
18、事件
创建事件==》事件绑定==》事件传参==》事件对象==》事件传播==》各个库或者框架中的特殊方法
事件的创建和绑定
<button onClick={触发函数}>点击按钮</button>
<button onClick={this.fun}>点击执行fun</button>
绑定this
<button onClick={this.fun.bind(this)}>点击执行funbind</button>
<button onClick={ ()=>this.fun() }>点击执行fun</button>
传递参数
<button onClick={this.fun.bind(this,"李贺")}>点击执行funbind李贺</button>
<button onClick={ ()=>{
this.fun("杨涛")
} }>点击执行fun</button>
314
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
