React学习分享（一）

Moran墨染

已于 2022-08-14 16:45:17 修改

阅读量301

点赞数 1

文章标签： react.js javascript 学习

于 2022-08-12 00:44:08 首次发布

本文链接：https://blog.csdn.net/weixin_46824709/article/details/126295884

版权

一、JSX语法

JSX 将 HTML 语法直接加入到 JavaScript 代码中，再通过翻译器转换到纯 JavaScript 后由浏览器执行。在实际开发中，JSX 在产品打包阶段都已经编译成纯 JavaScript，不会带来任何副作用，反而会让代码更加直观并易于维护。编译过程由Babel 的 JSX 编译器实现。
在react18之前的写法是：

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {
    render() {
        return (
            <div>11111
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                </ul>
                <div>asdad</div>
            </div>
        )
    }
}

ReactDOM.render(<App />, document.getElementById("root"))

但是我们在使用react18版本会提示我们这样的报错

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

所以我们需要改写成：

import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));

class App extends React.Component {
    render() {
        return (
            <div>11111
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                </ul>
                <div>asdad</div>
            </div>
        )
    }
}
root.render(<App />)

关于如何VScode在jSX里面能够打出html的标签，我们只需要配置（这五步即可）：
请添加图片描述

请添加图片描述

二、类组件和函数组件

ES6的加入让JavaScript直接支持使用class来定义一个类，react创建组件的方式就是使用的类的继承， ES6 class 是目前官方推荐的使用方式，它使用了ES6标准语法来构建，看以下代码：
这里是向外暴露了一个Header类组件(01class.js)

import React, { Component } from 'react'
export default class Header extends Component {
    render() {
        return (
            <div>
                <div>我是头部</div>
            </div>
        )
    }
}

这里是向外暴露了一个Body函数组件(02function.js)

const Body = () => {
    return (
        <div>我是身体内容</div>
    )
}
export default Body

之后我们只需要在根组件index.js中引入即可使用 (注意组件的名必须开头大写，否则会报错)

import React from 'react'
import { createRoot } from 'react-dom/client';

import Header from './01class'
import Body from './02function'

const root = createRoot(document.getElementById('root'));
class App extends React.Component {
    render() {
        return (
            <div>
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                </ul>
                <div>asdad</div>
                <Header></Header>
                <Body></Body>
            </div>
        )
    }
}
root.render(<App />)

函数式组件与类组件的不同：
函数式组件也叫无状态组件，在16.8之前是没有状态的，但是在16.8之后引入了react hooks就可以写状态了。类组件就可以写状态和属性。

三、组件内的样式

首先我们需要了解给虚拟dom添加变量属性，需要使用表达式传入{ }的方式来实现：

import React, { Component } from 'react'
export default class App extends Component {
    render() {
        const name = "zhangsan"
        const a = 8
        const b = 9
        return (
            <div>
                {10 + 20} -- {name}
                <div>
                    {a > b ? "aaa" : "bbb"}
                </div>
            </div>
        )
    }
}

需注意里面必须是表达式写法。
可以先定义一个对象的形式来实现:

import React, { Component } from 'react'
export default class App extends Component {
    render() {
        const name = "zhangsan"
        const a = 8
        const b = 9
        const obj = {
            //驼峰式命名
            backgroundColor: "red"
        }
        return (
            <div>
                {10 + 20} -- {name}
                <div>
                    {a > b ? "aaa" : "bbb"}
                </div>
                {/* 注意{ }不能删去 */}
                <p style={obj}>2222222222222222</p>
            </div >
        )
    }
}

给虚拟dom添加行内样式，需要使用表达式传入样式对象的方式来实现：

{/* 注意这里的两个括号，第一个表示我们在要JSX里插入JS了，第二个是对象的括号 */}
<p style={{ color: 'red', fontSize: '14px' }}>1111111111111111111</p>

class写法：
React推荐我们使用行内样式，因为React觉得每一个组件都是一个独立的整体，我们大多数情况下还是大量的在为元素添加类名，但是需要注意的是， class 需要写成 className （因为毕竟是在写类js代码，会收到js规则的现在，而 class 是关键字）
补充：（class ==> className , for ==> htmlFor(label)）

import React, { Component } from 'react'
import './css/01index.css'
export default class App extends Component {
    render() {
        const name = "zhangsan"
        const a = 8
        const b = 9
        const obj = {
            backgroundColor: "red"
        }
        return (
            <div>
                {10 + 20} -- {name}
                <div>
                    {a > b ? "aaa" : "bbb"}
                </div>
                <p className='active'>333333333333333</p>
            </div >
        )
    }
}

Moran墨染

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React学习分享（一）

React推荐我们使用行内样式，因为React觉得每一个组件都是一个独立的整体，我们大多数情况下还是大量的在为元素添加类名，但是需要注意的是， class 需要写成 className （因为毕竟是在写类js代码，会收到js规则的现在，而 class 是关键字）函数式组件也叫无状态组件，在16.8之前是没有状态的，但是在16.8之后引入了react hooks就可以写状态了。类组件就可以写状态和属性。之后我们只需要在根组件index.js中引入即可使用 (注意组件的名必须开头大写，否则会报错).......
复制链接

扫一扫