React基础篇

最新推荐文章于 2024-08-12 16:05:52 发布

赤妖碟

最新推荐文章于 2024-08-12 16:05:52 发布

阅读量326

点赞数 1

文章标签： react.js html 前端

本文链接：https://blog.csdn.net/Ayangdaye/article/details/122222718

版权

本文介绍了React，一个用于构建用户界面的JavaScript库，由Facebook开源。React的特点包括声明式编程、组件化设计和高效的DOMDiffing算法。JSX用于简化创建虚拟DOM，允许在JavaScript中编写HTML。文章还展示了如何进行文本和条件渲染、事件处理以及状态更新。此外，通过示例代码解释了React组件的实现，包括列表渲染和条件展示。

摘要由CSDN通过智能技术生成

React简介

官网地址：

英文官网: https://reactjs.org/

中文官网: https://react.docschina.org/

介绍描述以及特点

用于动态构建用户界面的javascript库，由Facebook开源

声明式，组件化编码

高效（优秀的Diffing算法）

使用虚拟（virtual）DOM，不总是直接操作页面真实DOM

DOM Diffing算法，最小化页面重绘

React JSX

全称：JavaScript XML

作用：用来简化创建虚拟DOM

语法：var ele=<h1>Hello JSX</h1>

语法基本规则：{} 里写javascript

[] 里面可以直接写html标签

import './App.css';
function App() {
  var arr = [
    <h2>花满楼</h2>,
    <p>周美灵</p>,
    <p>awd awdawda</p>
  ]
  var styles = {
    fontSize: "40px",
    color: "#f70",
  }
  return (
    <div>你好react
      <p className='active'>赤妖蝶</p>
      <p>{2 + 3}</p>
      {arr}
      <p style={styles}>文本行</p>
    </div>
  )
}

export default App;

模板语法

文本渲染：

文本渲染： {}

html文本渲染：dangerouslySetInnerHTML={{__html.xxx}}

条件渲染：

条件?<></>

&&符号{{条件&&<></>}}

事件

onClick={this.dian} onClick={this.dian.bind(this,参数)} onClick={()=>{this.dian(参数)}

更新状态State

this.setState({key:value})

this.setState({key:value},()=>conlose.log("欧尼酱“))

import React, { Component } from 'react'

export default class App extends Component {
    constructor(props) {
        super(props)
        this.state = {
            msg: "赤<strong>妖</strong>蝶",
            isShow: false,
            list: [
                "赤妖蝶", "温斯顿", "死神"
            ],
        }
    }
    sayHi(msg = "欧巴") {
        alert(msg)
    }
    render() {
        return (
            <div>
                {/* 更新数据 */}
                <button onClick={() => {
                    this.setState({ isShow: !this.state.isShow }, () => {
                        console.log("瞎搞完了")
                    })
                }}>咔咔咔</button><br />
                {/* 事件 */}
                <button onClick={this.sayHi.bind(this, "欧尼酱")}>点击传参2</button>
                <button onClick={() => { this.sayHi("阿尼哈撒哟") }}>点击传参</button>
                <button onClick={this.sayHi}>点击</button>
                <button onClick={() => alert("元旦快乐")}>元旦快乐</button>
                {/* 列表渲染 */}
                {this.state.list.map(item => <p key={item}>{item}</p>)}
                你好吗?{this.state.msg}
                <div dangerouslySetInnerHTML={{ __html: this.state.msg }}></div>
                {this.state.isShow ? <p>欢迎回来</p> : <p>滚蛋吧</p>}
                {this.state.isShow && <p>番茄炒蛋</p>}
            </div >
        )
    }
}