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

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

目录
相关文章
|
10天前
|
XML 前端开发 JavaScript
react之了解jsx
react之了解jsx
|
6天前
|
前端开发 JavaScript 测试技术
React 分页组件 Pagination
本文介绍了如何在 React 中从零构建分页组件,涵盖基础概念、常见问题及解决方案。通过示例代码详细讲解了分页按钮的创建、分页按钮过多、初始加载慢、状态管理混乱等常见问题的解决方法,以及如何避免边界条件、性能优化和用户反馈等方面的易错点。旨在帮助开发者更好地理解和掌握 React 分页组件的开发技巧,提升应用的性能和用户体验。
29 0
|
10天前
|
JavaScript 前端开发 容器
React零基础入门02--JSX语法基础
React零基础入门02--JSX语法基础
React零基础入门02--JSX语法基础
|
11天前
|
移动开发 前端开发 API
React 拖拽组件 Drag & Drop
本文介绍了在 React 中实现拖拽功能的方法,包括使用原生 HTML5 Drag and Drop API 和第三方库 `react-dnd`。通过代码示例详细讲解了基本的拖拽实现、常见问题及易错点,帮助开发者更好地理解和应用拖拽功能。
41 9
|
6天前
|
前端开发 UED 开发者
React 分页组件 Pagination
本文介绍了如何在 React 中实现分页组件,从基础概念到常见问题及解决方案。分页组件用于将大量数据分成多个页面,提升用户体验。文章详细讲解了分页组件的基本结构、快速入门步骤、以及如何处理页面跳转不平滑、页码过多导致布局混乱、边界条件处理和数据加载延迟等问题。通过本文,读者可以全面了解并掌握 React 分页组件的开发技巧。
10 2
|
9天前
|
设计模式 前端开发 编译器
与普通组件相比,React 泛型组件有哪些优势?
与普通组件相比,React 泛型组件有哪些优势?
26 6
|
18天前
|
前端开发 JavaScript 安全
学习如何为 React 组件编写测试:
学习如何为 React 组件编写测试:
34 2
|
10天前
|
存储 前端开发 JavaScript
react之jsx编译原理
react之jsx编译原理
|
12天前
|
前端开发 UED
React 模态框 Modal 组件详解
【10月更文挑战第27天】本文介绍了如何在 React 中实现一个功能完善的模态框组件。从基础概念入手,逐步讲解了简单的模态框实现、CSS 样式、传递子组件、键盘事件处理等高级功能。同时,还探讨了常见问题及易错点,如背景点击关闭、键盘事件冲突和动画效果。通过本文,读者可以全面了解 React 模态框组件的实现细节。
26 0
|
12天前
|
前端开发 JavaScript 开发者
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
40 9