02 JSX学习

最新推荐文章于 2023-05-09 12:00:57 发布

Stephy_Yy

最新推荐文章于 2023-05-09 12:00:57 发布

阅读量101

点赞数

分类专栏：系统学习 # react 文章标签： react.js

本文链接：https://blog.csdn.net/weixin_43503511/article/details/120443358

版权

系统学习同时被 2 个专栏收录

112 篇文章 1 订阅

订阅专栏

react

35 篇文章 0 订阅

订阅专栏

使用vite处理jsx

vite引入的脚本必须是ESM的

npm init -y
yarn add vite
package.json 添加vite命令
index.html引入jsx

JSX是什么

一种标签语法，在JS基础上进行的语法扩展
不是字符串、也不是HTML
是描述UI呈现与交互的直观的表现形式
JSX被编译后会生成React元素（React.createElement的效果），是对象
遵循JS的命名规范（小驼峰） class → className tabindex → tabIndex
用插值表达式写逻辑（绑定事件处理函数、显示变量）
单标签必须闭合
只能有一个根标签

render之前发生了什么

所有JSX都会转成字符串
所有输入的内容都会进行转义（避免XSS攻击）

React元素

JSX经过内部转换为React元素，和React.createElement()创建的元素相同

console.log(<h1 className="test">123</h1>)

在这里插入图片描述

React为什么不把视图标记和逻辑分离

渲染和UI标记有逻辑耦合
即使耦合，也能实现关注点分离

插值表达式

一切有效的，符合JS变成逻辑的表达式 { title }
引号表示的是字符串

修改state setState

this.setState({
     openStatus: !this.state.openStatus
})

class组件必须render并return

函数组件只return

相关代码

package.json

{
  "name": "02",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "vite"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vite": "^2.5.10"
  }
}

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>REACT 01</title>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
</head>

<body>
    <div id="app"></div>
    <script src="./index.jsx" type="module"></script>
</body>

</html>

index.jsx

const el = <div className="title">JSX创建React元素</div>
ReactDOM.render(
    el, // 不是类组件，不用React.createElement
    document.getElementById('app')
)

index.jsx

class MyButton extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            openStatus: true
        }
    }
    // 注意，ES6语法中，state写在constructor外部和内部是一样的
    // state = {
    //   openStatus: true
    // }
    // button绑定的事件处理函数默认的this为undefined（不是button！！）
    // ES6 class模块默认不对事件处理函数进行this的再绑定
    // bind显示改变this指向类的实例(类组件中常规操作)
    statusChange() {
        this.setState({
            openStatus: !this.state.openStatus
        })
    }
    render() {
        return (
            <div className="button_wrap">
                <p className="text">
                    {this.state.openStatus ? '打开状态' : '关闭状态'}
                </p>
                <button onClick={this.statusChange.bind(this)}>
                    {this.state.openStatus ? '去关闭' : '去打开'}
                </button>
            </div>
        )
    }
}

ReactDOM.render(
    React.createElement(MyButton), 
    // 类组件，不是React元素，要React.createElement
    // 或者这么写<MyButton /> ，则为React元素
    document.getElementById('app')
)

ReactDOM.render第一个参数

1. JSX

const oEl = <h1>test</h1>
ReactDOM.render(
    oEl,
    document.getElementById('app')
)

2. 函数

// 返回JSX，和上面是换汤不换药
function update() {
    return (
        <h1>test</h1>
    )
}
ReactDOM.render(
    update(),
    document.getElementById('app')
)

在方法里ReactDOM.render 执行函数

function update() {
    const oEl = <h1>test</h1>
    ReactDOM.render(
        oEl,
        document.getElementById('app')
    )
}
update()

3. 写类组件

ReactDOM.render(
    <MyButton />,
    document.getElementById('app')
)
// 或者
ReactDOM.render(
    React.createElement(MyButton),
    document.getElementById('app')
)

Stephy_Yy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
02 JSX学习

使用vite处理jsxvite引入的脚本必须是ESM的npm init -yyarn add vitepackage.json 添加vite命令index.html引入jsxJSX是什么一种标签语法，在JS基础上进行的语法扩展不是字符串、也不是HTML是描述UI呈现与交互的直观的表现形式JSX被编译后会生成React元素（React.createElement的效果），是对象遵循JS的命名规范（小驼峰） class → className tabindex → tabInde
复制链接

扫一扫