【React】React入门(一)--React的创建、Jsx语法与组件以及状态(state)-阿里云开发者社区

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

2023-07-29 145

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 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:包含运行和打包应用程序的所有脚本及配置

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

生成目录结构如下：

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

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

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

🎀个人主页：努力学习前端知识的小羊

React简介

react的特性

虚拟Dom

create-react-app

JSX语法与组件

jsx语法

class组件

函数组件

组件嵌套

组件的样式

事件绑定

ref应用

数据的数据挂载方式

状态（state）

循环渲染

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

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

🎀个人主页：努力学习前端知识的小羊

React简介

react的特性

虚拟Dom

create-react-app

JSX语法与组件

jsx语法

class组件

函数组件

组件嵌套

组件的样式

事件绑定

ref应用

数据的数据挂载方式

状态（state）

循环渲染

热门文章

最新文章

相关课程

相关电子书

相关实验场景