【React】React入门(一)--React的创建、Jsx语法与组件以及状态(state)

简介: React的创建、Jsx语法与组件以及状态(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:包含运行和打包应用程序的所有脚本及配置

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

df2637bf0fbd4c86a1bf1eaf9b950bb2.png

生成目录结构如下:

7ccbebfd6e3643d3842e1ceb5975a9c2.png

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,不涉及到列表的增加或删除,重排,设置成索引值也可以

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

目录
相关文章
|
24天前
|
前端开发 开发者
React 函数组件与类组件对比
【10月更文挑战第4天】本文详细比较了React中的函数组件与类组件。函数组件是一种简单的组件形式,以纯函数的形式返回JSX,易于理解与维护,适用于简单的UI逻辑。类组件则是基于ES6类实现的,需要重写`render`方法并能利用更多生命周期方法进行状态管理。文章通过示例代码展示了两者在状态管理与生命周期管理上的差异,并讨论了常见的问题如状态更新异步性与生命周期管理的复杂性,最后给出了相应的解决方法。通过学习,开发者可以根据具体需求选择合适的组件类型。
47 8
|
22天前
|
人工智能 自然语言处理 前端开发
SpringBoot + 通义千问 + 自定义React组件:支持EventStream数据解析的技术实践
【10月更文挑战第7天】在现代Web开发中,集成多种技术栈以实现复杂的功能需求已成为常态。本文将详细介绍如何使用SpringBoot作为后端框架,结合阿里巴巴的通义千问(一个强大的自然语言处理服务),并通过自定义React组件来支持服务器发送事件(SSE, Server-Sent Events)的EventStream数据解析。这一组合不仅能够实现高效的实时通信,还能利用AI技术提升用户体验。
118 2
|
6天前
|
监控 前端开发 JavaScript
React 静态网站生成工具 Next.js 入门指南
【10月更文挑战第20天】Next.js 是一个基于 React 的服务器端渲染框架,由 Vercel 开发。本文从基础概念出发,逐步探讨 Next.js 的常见问题、易错点及解决方法,并通过具体代码示例进行说明,帮助开发者快速构建高性能的 Web 应用。
27 10
|
3天前
|
前端开发 JavaScript 安全
学习如何为 React 组件编写测试:
学习如何为 React 组件编写测试:
13 2
|
10天前
|
前端开发 JavaScript 测试技术
React 高阶组件 (HOC) 应用
【10月更文挑战第16天】高阶组件(HOC)是 React 中一种复用组件逻辑的方式,通过接受一个组件并返回新组件来实现。本文介绍了 HOC 的基础概念、核心功能和常见问题,包括静态方法丢失、ref 丢失、多个 HOC 组合和 props 冲突的解决方案,并提供了具体的 React 代码示例。通过本文,读者可以更好地理解和应用 HOC,提高代码的复用性和可维护性。
29 8
|
9天前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
|
20天前
|
前端开发 JavaScript 开发者
探索现代Web前端技术:React框架入门
【10月更文挑战第9天】 探索现代Web前端技术:React框架入门
|
21天前
|
前端开发 JavaScript 调度
React 组件状态(State)
10月更文挑战第8天
13 1
|
21天前
|
前端开发 JavaScript API
React将组件作为属性传递的最佳实践
本文探讨了在React中将组件作为属性传递的三种常见方式:作为元素传递、作为组件传递、作为函数传递。通过构建带图标的按钮组件,对比分析了每种方式的优缺点,最终推荐将组件作为函数传递,因为它提供了更好的可控性、灵活性和可扩展性。
29 0
|
22天前
|
JavaScript 前端开发 算法
写 React / Vue 项目时为什么要在列表组件中写 key
在React或Vue项目中,为列表组件中的每个元素添加唯一的key属性,有助于框架高效地更新和渲染列表。Key帮助虚拟DOM识别哪些项已更改、添加或删除,从而优化性能并减少不必要的重新渲染。