🎀个人主页：努力学习前端知识的小羊
感谢你们的支持：收藏🎄 点赞🍬 加关注🪐

文章目录

• • React简介
  • • react的特性
    • 虚拟Dom
    • • 传统dom更新
      • 虚拟Dom
  • create-react-app
  • JSX语法与组件
  • • jsx语法
    • class组件
    • 函数组件
    • 组件嵌套
    • 组件的样式
    • 事件绑定
    • ref应用
  • 数据的数据挂载方式
  • • 状态（state）
    • 循环渲染

React简介

react简单来说，就是把界面分成了各个独立的小块，每一个块就是组件，这些组件之间可以组合、嵌套，就成了我们的界面。

react的特性

• 声明式设计–react采用声明范式，可以轻松描述应用
• 高效–react通过对DOm的模拟（虚拟Dom），最大限度地减少与Dom的交互
• 灵活–react可以与已知的库或框架很好的配合
• JSX--JSX是Javascript语法的扩展
• 组件–通过react构建组件，使得代码更加容易得到复用，能够更好的应用在大项目的开发中
• 单响应的数据流-react实现了单向响应的数据流，从而减少了重复代码，这也是为什么他比传统数据绑定更简单

虚拟Dom

传统dom更新

真实页面对应一个Dom树。在传统页面的开发模式中，每次需要更新页面时，都要手动操作来进行更新

虚拟Dom

Dom操作非常昂贵。在前端开发中，性能消耗最大的就是Dom操作，而且这部分代码会让整体项目的代码变得难以维护。react把真实Dom树转换成JavaScript对象树，也就是Virtual
Dom

create-react-app

全局安装create-react-app

$ npm install -g create-react-app

创建一个项目

$ creat-react-app project-name

如果不想全局安装，可以直接使用npx

$ npx create-react-app project-name  也可以实现相同的效果

在等待的过程，安装的三个东西

• react：react的顶级库
• react-dom：因为react有很多的运行环境，比如app端的react-native，我们在web上运行就使用react-dom
• react-scripts:包含运行和打包应用程序的所有脚本及配置

当出现下方界面，表示创建项目成功

生成目录结构如下：

JSX语法与组件

jsx语法

jsx == js + xml

jsx将Html语法加入到JavaScript中，再通过翻译器转换到纯JavaScript后由浏览器执行

class组件

app组件内

import React from "react";
class App extends React.Component{render(){return (
hello react Component
111
2222
新的内容
)}
}export default App

index.js内

import React from 'react';
import ReactDOM from 'react-dom'
import App from './01-class组件';
import { createRoot } from 'react-dom/client'const container = document.getElementById('root')
const root = createRoot(container)
root.render()

函数组件

函数组件内,导出一个函数

function App(){return (
hello react Component
111
2222
)
}export default App

index.js内

import React from 'react';
import ReactDOM from 'react-dom'
import App from './01-class组件';
import { createRoot } from 'react-dom/client'const container = document.getElementById('root')
const root = createRoot(container)
root.render()

组件嵌套

import React,{ Component} from 'react'class Child extends Component{render(){return 
child
}
}
class Navbar extends Component{render(){return 
Navbar
}
}
function Swiper(){return 
swiper
}const Tabbar = ()=> {
tabbar
}
export default class App extends React.Component{render() {return (
)}
}

组件的样式

• 内部样式

import React, { Component } from 'react'
export default class App extends Component {render() {var myname = 'ssss'var obj ={background:"yellow",color:"blue",fontSize:"30px"}return (
{10+20} + {myname}{10>20?'aaa':'bbb'}
obj}>222222222222
// 行内样式：双重大括号
{background:'red'}}>111111111111
用户名：
)}
}

• 引用外部样式

外部样式01-index.css

.active{background-color: aquamarine;color: cadetblue;font-size: 20px;
}
#myapp{background-color: aqua;
}

在js文件引入外部样式

import React, { Component } from 'react'
import './css/01-index.css'
export default class App extends Component {render() {var myname = 'ssss'var obj ={background:"yellow",color:"blue",fontSize:"30px"}return (
{10+20} + {myname}{10>20?'aaa':'bbb'}
3333333333333
5555555
用户名：
)}
}

注: React推荐我们使用行内样式，因为React觉得每一个组件都是一个独立的整体

事件绑定

• 直接在render中使用箭头函数

import React, { Component } from 'react'export default class App extends Component {a = 100;render() {return (
 ()=>{console.log("click1",this.a,"如果处理逻辑过多，不推荐使用");}}>add1
)}
}

注：render中的this指的就是App组件，故能获取this.a

• 在组件中定义一个方法，在render中调用

  import React, { Component } from 'react'export default class App extends Component {a = 100;render() {return (
  {/* bind解决this指向   不推荐使用*/}  this.handleClick2.bind(this)}>add2{/*推荐使用*/}this.handleClick3}>add3 
  )}
  // 定义一个函数handleClick2(){console.log("click2"，this.a);}
  //定义一个箭头函数handleClick3 = ()=>{console.log("cliak3",this.a);}
  }
  

补充：call与apply与bind的区别

call:改变this，自动执行函数

apply：改变this，自动执行函数

bind： 改变this，不自动执行函数，手动加（）执行函数

• 组件中定义一个方法，在render中采用箭头函数调用方法

  import React, { Component } from 'react'export default class App extends Component {a = 100;render() {return (
  ()=>{this.handleClick4()}}>add4
  )}handleClick4 = ()=>{console.log("cliak4",this.a);}
  }

  ref应用

• 给标签设置ref属性：获取input的value值，绑定input的ref属性获取

  ()=>{// refs已经被淘汰不建议这样写console.log("click",this.refs.mytext.value)}}>
  
  

• 新的写法(严格写法)：

  myref = React.createRef()render() {return (
  this.myref}/> ()=>{console.log("click",this.myref.current.value);}}>add1
  )}
  

数据的数据挂载方式

状态（state）

状态就是组件描述某种显示情况的数据，由组件自己设置和更改，也就是说由组件自己维护，使用状态的目的就是为了在不同的状态下使组件的显示不同（自己管理）

• 在App组件中设置state属性，render中改变state

  export default class App extends Component {a = 1;state = {mytext:"收藏"}render() {return (
  欢迎来到React开发-{this.state.myname}
  ()=>{this.state.mytext="取消"}}>{this.state.mytext}
  )}
  }

• 利用constructor属性添加state

  export default class App extends Component {constructor(){super()this.state = {mytext:"收藏",myshow:true,myname:"kerwin"}}render() {return (
  欢迎来到React开发-{this.state.myname}
  ()=>{this.setState({myshow:!this.state.myshow,myname:"xiaoming"}) //间接修改收藏//修改逻辑if(this.state.myshow){console.log("收藏的逻辑");} else{console.log("取消收藏的逻辑");}}}>{this.state.myshow?"收藏":"取消收藏"}
  )}
  }
  

循环渲染

利用map

• 原生js实现

  var list = ['aa',"bb","cc"]var newlist = list.map(item=>`
  ${item}
  `)console.log(newlist.join(""));
  

• react中利用map在render中实现

  export default class App extends Component {state = {list:[{id:1,text:"11"},{id:2,text:"22"},{id:3,text:"33"}]}render() {return (
  {this.state.list.map(item=>
  item.id}>{item.text}
  )}
  )}
  }
  或者
  render(){var newlist = this.state.list.map(item=>
  item.id}>{item.text}
  )return (
  { newlist }
  )
  }
  

  注: 设置key值，是为了列表的复用和重排，提高性能，理想key值：item.id，不涉及到列表的增加或删除，重排，设置成索引值也可以

🎆🎆希望对大家有所帮助，期待你们的支持✨✨✨