🎀个人主页:努力学习前端知识的小羊
感谢你们的支持:收藏🎄 点赞🍬 加关注🪐
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 ( <section> <div> hello react Component <ul> <li>111</li> <li>2222</li> </ul> </div> <div>新的内容</div> </section> ) } } 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(<App></App>)
函数组件
函数组件内,导出一个函数
function App(){ return ( <div> hello react Component <ul> <li>111</li> <li>2222</li> </ul> </div> ) } 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(<App></App>)
组件嵌套
import React,{ Component} from 'react' class Child extends Component{ render(){ return <div>child</div> } } class Navbar extends Component{ render(){ return <div>Navbar <Child></Child> </div> } } function Swiper(){ return <div>swiper</div> } const Tabbar = ()=> { <div>tabbar</div> } export default class App extends React.Component{ render() { return ( <div> <Navbar> </Navbar> <Swiper></Swiper> <Tabbar></Tabbar> </div> ) } }
组件的样式
- 内部样式
import React, { Component } from 'react' export default class App extends Component { render() { var myname = 'ssss' var obj ={ background:"yellow", color:"blue", fontSize:"30px" } return ( <div> {10+20} + {myname} {10>20?'aaa':'bbb'} <div style={obj}>222222222222</div> // 行内样式:双重大括号 <div style={{background:'red'}}>111111111111</div> <label htmlFor='username'>用户名:</label> <input type="text" id="username" /> </div> ) } }
- 引用外部样式
外部样式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 ( <div> {10+20} + {myname} {10>20?'aaa':'bbb'} <div className="active"> 3333333333333 </div> <div id='myapp'>5555555</div> <label htmlFor='username'>用户名:</label> <input type="text" id="username" /> </div> ) } }
注: React推荐我们使用行内样式,因为React觉得每一个组件都是一个独立的整体
事件绑定
- 直接在render中使用箭头函数
import React, { Component } from 'react' export default class App extends Component { a = 100; render() { return ( <div> <input /> <button onClick={ ()=>{ console.log("click1",this.a,"如果处理逻辑过多,不推荐使用"); }}>add1</button> </div> ) } }
注:render中的this指的就是App组件,故能获取this.a
- 在组件中定义一个方法,在render中调用
import React, { Component } from 'react' export default class App extends Component { a = 100; render() { return ( <div> <input /> {/* bind解决this指向 不推荐使用*/} <button onClick={this.handleClick2.bind(this)}>add2</button> {/*推荐使用*/} <button onClick={this.handleClick3}>add3</button> </div> ) } // 定义一个函数 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 ( <div> <input /> <button onClick={()=>{ this.handleClick4() }}>add4</button> </div> ) } handleClick4 = ()=>{ console.log("cliak4",this.a); } }
ref应用
- 给标签设置ref属性:获取input的value值,绑定input的ref属性获取
<div> <input ref = "mytext" /> <button onClick = {()=>{ // refs已经被淘汰不建议这样写 console.log("click",this.refs.mytext.value) }}> </div>
- 新的写法(严格写法):
myref = React.createRef() render() { return ( <div> <input ref={this.myref}/> <button onClick={ ()=>{ console.log("click",this.myref.current.value); }}>add1</button> </div> )
数据的数据挂载方式
状态(state)
状态就是组件描述某种显示情况的数据,由组件自己设置和更改,也就是说由组件自己维护,使用状态的目的就是为了在不同的状态下使组件的显示不同(自己管理)
- 在App组件中设置state属性,render中改变state
export default class App extends Component { a = 1; state = { mytext:"收藏" } render() { return ( <div> <h1>欢迎来到React开发-{this.state.myname}</h1> <button onClick={()=>{ this.state.mytext="取消" }}>{this.state.mytext}</button> </div> ) } }
- 利用constructor属性添加state
export default class App extends Component { constructor(){ super() this.state = { mytext:"收藏", myshow:true, myname:"kerwin" } } render() { return ( <div> <h1>欢迎来到React开发-{this.state.myname}</h1> <button onClick={()=>{ this.setState({ myshow:!this.state.myshow, myname:"xiaoming" }) //间接修改收藏 //修改逻辑 if(this.state.myshow){ console.log("收藏的逻辑"); } else{ console.log("取消收藏的逻辑"); } }}>{this.state.myshow?"收藏":"取消收藏"}</button> </div> ) } }
循环渲染
利用map
- 原生js实现
var list = ['aa',"bb","cc"] var newlist = list.map(item=>`<li>${item}</li>`) 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 ( <div> <ul> { this.state.list.map(item=> <li key={item.id}>{item.text}</li>) } </ul> </div> ) } } 或者 render(){ var newlist = this.state.list.map(item=><li key={item.id}>{item.text}</li>) return ( <div> <ul> { newlist } </ul> </div> ) }
注: 设置key值,是为了列表的复用和重排,提高性能,理想key值:item.id,不涉及到列表的增加或删除,重排,设置成索引值也可以
🎆🎆希望对大家有所帮助,期待你们的支持✨✨✨