React的基本学习（三）——class和列表评论案例

最新推荐文章于 2024-02-29 11:54:03 发布
最新推荐文章于 2024-02-29 11:54:03 发布
阅读量422 收藏
点赞数
文章标签： react 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46378049/article/details/106251616
版权

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

前言：

承接前面的内容，继续来学习React

 

 

 

Class

上一次的内容我们学到 通过定义一个构造函数来创建组件，现在我们来通过另一种方式创建组件

什么是class

我们先来了解一下什么是ES6的class

我们来备份一下上次写的index.js，写入新内容来测试class

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

import '@/class基本使用.js'

ReactDOM.render(<div>
    123
</div>,document.getElementById('app'))

我们新建一个文件，同目录下叫 class基本使用.js，由于这个文件没有暴露模块所以这里直接导入路径即可，我们就是要在这个文件中测试class。

我们普通的function来创建对象

function Person(name,age){
    this.name=name
    this.age=age
}
const p1=new Person('王多多',18)
console.log(p1)

而使用类的话，如下：

//创建了一个动物类
class Animal{
    //类中的constryctor构造器
    //每一个类中都会有一个构造器
    //若没有指定构造器，系统会有个隐形的空构造器
    //构造器的作用：每当new这个类的时候，必然会优先执行构造器中的代码
    constructor(name,age){
        this.name=name
        this.age=age
    }
}

const a1=new  Animal('大黄',3)
console.log(a1)

我们放在一起：

function Person(name,age){
    this.name=name
    this.age=age
}
const p1=new Person('王多多',18)
console.log(p1)

console.log('----------------------------------')

//创建了一个动物类
class Animal{
    //类中的constryctor构造器
    //每一个类中都会有一个构造器
    //若没有指定构造器，系统会有个隐形的空构造器
    //构造器的作用：每当new这个类的时候，必然会优先执行构造器中的代码
    constructor(name,age){
        this.name=name
        this.age=age
    }
}

const a1=new  Animal('大黄',3)
console.log(a1)

其中，我们的 p1 和 a1 叫做实例，他们的name、age叫做实例属性

 

static创建静态属性

如果我们用类来分配属性，这样的行为就是给构造函数挂载了属性，这就是静态属性，实例是不能调用静态属性的。

class Animal{
    //类中的constryctor构造器
    //每一个类中都会有一个构造器
    //若没有指定构造器，系统会有个隐形的空构造器
    //构造器的作用：每当new这个类的时候，必然会优先执行构造器中的代码
    constructor(name,age){
        this.name=name
        this.age=age
    }
}

Animal.info='aaaa'

const a1=new  Animal('大黄',3)
console.log(a1)

console.log(a1.info)

如果这样写，那么最后的输出就会输出 undefined，把 a1 换成 Animal 即可。

在我们的class中，可以直接这样来定义静态属性：

class Animal{
    constructor(name,age){
        this.name=name
        this.age=age
    }
    //在class内部，通过static修饰的属性，就是静态属性
    static info="eee"
}

const a1=new  Animal('大黄',3)
console.log(a1)

 

实例方法和静态方法

实例方法：

使用构造函数来创建对象的话怎么加入 实例方法？

利用prototype（原型对象）即可

function Person(name,age){
    this.name=name
    this.age=age
}
Person.prototype.say=function (){
    console.log("这是person的实例方法")
}

const p1=new Person('王多多',18)
Person.info="bbbbb"
console.log(p1)
console.log(Person.info)
p1.say()

那么对于class的对象呢？

直接在class内定义即可

//创建了一个动物类
class Animal{
    //类中的constryctor构造器
    //每一个类中都会有一个构造器
    //若没有指定构造器，系统会有个隐形的空构造器
    //构造器的作用：每当new这个类的时候，必然会优先执行构造器中的代码
    constructor(name,age){
        this.name=name
        this.age=age
    }
    //在class内部，通过static修饰的属性，就是静态属性
    static info="eee"

    //动物的实例方法
    jiao(){
        console.log('动物的实例方法')
    }
}

const a1=new  Animal('大黄',3)
a1.jiao()  //调用实例方法
console.log(a1)

在class中直接定义和在原型对象上定义的效果是一样的。

 

静态方法：

一样的道理，挂载给构造函数的就是静态方法

function Person(name,age){
    this.name=name
    this.age=age
}
Person.prototype.say=function (){
    console.log("这是person的实例方法")
}
Person.show=function (){
    console.log("静态方法")
}
Person.show()

const p1=new Person('王多多',18)
Person.info="bbbbb"
console.log(p1)
console.log(Person.info)
p1.say()

我们的静态方法挂载给了构造函数

对于class也是一样的，加上关键字static即可

class Animal{
    constructor(name,age){
        this.name=name
        this.age=age
    }
    //在class内部，通过static修饰的属性，就是静态属性
    static info="eee"

    //动物的实例方法
    jiao(){
        console.log('动物的实例方法')
    }
    static show(){
        console.log("有意思")
    }
}

const a1=new  Animal('大黄',3)
a1.jiao()
console.log(a1)
Animal.show()

Class的注意点

  • class内部，必须要有构造器
  • 在class的（）区域内，只能写构造器、静态方法和静态属性、实例方法
  • class关键字内部，还是用原来的配方实现的（构造函数），所以我们把class关键字叫做 语法糖

 

Class的继承

换一个文件

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

//import '@/class基本使用.js'
import '@/class继承.js'

ReactDOM.render(<div>
    123
</div>,document.getElementById('app'))

我们在 class继承.js 中实现继承

//父类
class Person{
    constructor(name,age){
        this.name=name;
        this.age=age;
    }
}

class American extends Person{

}

const a1=new American('Jack',30)
console.log(a1)

class Chinese extends Person{

}

const c1=new Chinese("小明",22)
console.log(c1)

这样，构造时会调用父类的构造函数

使用共有的方法也是一样的

//父类
class Person{
    constructor(name,age){
        this.name=name;
        this.age=age;
    }
    sayHello(str){
        console.log(str)
    }
}

class American extends Person{

}

const a1=new American('Jack',30)
a1.sayHello("我是美国人")
console.log(a1)

class Chinese extends Person{

}

const c1=new Chinese("小明",22)
c1.sayHello("我是中国人")
console.log(c1)

而如果我们在子类中再调用构造器，那一定要注意：

  • 一定要在构造器中手动调用 super，而且要优先调用
  • super是一个函数，即父类的构造器的一个引用

所以我们完善一下代码，就是如下：

//父类
class Person{
    constructor(name,age){
        this.name=name;
        this.age=age;
    }
    sayHello(str){
        console.log(str)
    }
}

class American extends Person{
    constructor(name,age){
        super(name,age)
    }
}

const a1=new American('Jack',30)
a1.sayHello("我是美国人")
console.log(a1)

class Chinese extends Person{
    //姓名，年龄，身份证（中国人独有）
    constructor(name,age,IDnum){
        super(name,age)
        this.IDnum=IDnum;
    }
}

const c1=new Chinese("小明",22,14041)
c1.sayHello("我是中国人")
console.log(c1)

 

 

Class创建组件

渲染出来

用class创建组件非常方便，下面是模板

class 组件名称 extends React.Component{
       render(){
             return jsx代码
       }
}

即可。

示例 index.js

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

//import '@/class基本使用.js'
//import '@/class继承.js'

class Movie extends React.Component{
    render(){
        return <h1>有意思！</h1>
    }
}

ReactDOM.render(<div>
    123
     {/*这里的Movie是实例标签，相当于创造了一个实例对象*/}
    <Movie></Movie>
</div>,document.getElementById('app'))

 

传递参数

用class封装的组件接收参数很有意思，不需要像函数那样设置形参来接收。

直接使用 this.props.XXX 即可接收

如下：

import React, { useReducer } from 'react'
import ReactDOM from 'react-dom'

//import '@/class基本使用.js'
//import '@/class继承.js'

class Movie extends React.Component{
    render(){
    return <h1>
        有意思！--
        {this.props.name}--
        {this.props.age}
    </h1>
    }
}

const user={
    name:'小红',
    age:22
}

ReactDOM.render(<div>
    123
    <Movie {...user}></Movie>
</div>,document.getElementById('app'))

和function创建组件一样，class创建组件传来的参数props也是只读的，不可被赋值

class创建组件方法 和 function创建组件方法 的对比：

  • 使用class关键字创建的组件，有自己的私有数据（this.state）和生命周期函数
  • 使用function创建的组件，只有props，没有私有数据和声明周期函数

 

this.state

关于state，更多细节可以参考这个菜鸟教程

import React, { useReducer } from 'react'
import ReactDOM from 'react-dom'

//import '@/class基本使用.js'
//import '@/class继承.js'

class Movie extends React.Component{
    //构造器
    constructor(){
        //由于Movie组件，继承了React.Component父类，
        //所以,自定义的构造器中，必须调用super()
        super()
        //只有调用了super()以后，才能使用 this 关键字
        this.state={   
            msg:'大家好，我是class创建的Movie组件'
        }
        
    }


    //render函数的作用，是渲染当前组件所对应的虚拟DOM元素
    render(){
    return <h1>
        有意思！--
        {this.props.name}--
        {this.props.age}
        <div>{this.state.msg}</div>
    </h1>
    }
}

const user={
    name:'小红',
    age:22
}

ReactDOM.render(<div>
    123
    <Movie {...user} />
</div>,document.getElementById('app'))

这个state是一个可读又可写的属性

根据这个state:

  • 用构造函数创建出来的组件：叫做“无状态组件”
  • 用class关键字创建出来的组件：叫做“有状态组件”
  • 有状态组件和无状态组件之间的本质区别就是：有无 state 属性 和 有无生命周期函数

 

 

评论列表案例

基础实现显示

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

//使用class 关键字定义父组件
class CmtList extends React.Component{
    constructor(){
        super()
        this.state={
            CommentList:[     //评论列表数据
                {id:1,user:'小明',constent:'有意思？'},
                {id:2,user:'小红',constent:'真可爱'},
                {id:3,user:'小王',constent:'卢本伟牛逼'},
                {id:4,user:'小刚',constent:'好厉害'},
                {id:5,user:'小敏',constent:'我是赌神！'},
            ]
        }
    }
    render(){
        return <div>
                <h1>这是评论列表组件</h1>
        {this.state.CommentList.map(item=><div key={item.id}>
        <h1>用户： {item.user}</h1>
        <p>内容：{item.constent}</p>
                </div>)}
        </div>
    }
}

ReactDOM.render(<div>
     <CmtList />
</div>,document.getElementById('app'))

CommentList 的值是一个对象数组，我们可以使用数组的函数 map 来遍历每一个对象的键

优化一下，我们使用无状态组件（构造函数）配合展开运算符

import React from 'react' 
import ReactDOM from 'react-dom'
//使用 function 构造函数，定义普通的无状态组件
function CmtItem(props){
    return <div >
    <h1>用户： {props.user}</h1>
    <p>内容：{props.constent}</p>
    </div>
}

//使用class 关键字定义父组件
class CmtList extends React.Component{
    constructor(){
        super()
        this.state={
            CommentList:[     //评论列表数据
                {id:1,user:'小明',constent:'有意思？'},
                {id:2,user:'小红',constent:'真可爱'},
                {id:3,user:'小王',constent:'卢本伟牛逼'},
                {id:4,user:'小刚',constent:'好厉害'},
                {id:5,user:'小敏',constent:'我是赌神！'},
            ]
        }
    } 
    render(){
        return <div>
                <h1>这是评论列表组件</h1>
        {/*每一个item是一个对象，我们使用...展开运算符可以直接将item传入*/}
        {this.state.CommentList.map(item=><CmtItem {...item} key={item.id}/>)}
        </div>
    }
}

ReactDOM.render(<div>
     <CmtList />
</div>,document.getElementById('app'))

效果是一样的，我们想在将它放在多个文件中

#/src/components/CmtItem.jsx
import React from "react"

//使用 function 构造函数，定义普通的无状态组件
export default function CmtItem(props){
    return <div >
    <h1>用户： {props.user}</h1>
    <p>内容：{props.constent}</p>
    </div>
}


#/src/components/CmtList.jsx
import React from 'react'

//导入评论项 子组件
import CmtItem from '@/components/Cmtitem.jsx'

//使用class 关键字定义父组件
export default class CmtList extends React.Component{
    constructor(){
        super()
        this.state={
            CommentList:[     //评论列表数据
                {id:1,user:'小明',constent:'有意思？'},
                {id:2,user:'小红',constent:'真可爱'},
                {id:3,user:'小王',constent:'卢本伟牛逼'},
                {id:4,user:'小刚',constent:'好厉害'},
                {id:5,user:'小敏',constent:'我是赌神！'},
            ]
        }
    } 
    render(){
        return <div>
                <h1>这是评论列表组件</h1>
        {this.state.CommentList.map(item=><CmtItem {...item} key={item.id}/>)}
        </div>
    }
}


#src/index.js
import React from 'react' 
import ReactDOM from 'react-dom'

//导入评论项 子组件
import CmtList from '@/components/CmtList.jsx'

ReactDOM.render(<div>
     <CmtList />
</div>,document.getElementById('app'))

分成了三个文件，这样就好管理多了

美化页面

#Cmtitem.jsx
import React from "react"

//第一层封装
// const itemStyle={
//     border:'2px dashed #cda',
//     margin:'30px',
//     padding:'30px',
//     boxShadow:'0 0 10px red'
// }
// const userStyle={
//     fontSize:'20px',
//     textAlign:'center'
// }
// const contentStyle={
//     fontSize:'24px',
//     textAlign:'center'
// }

//第二层封装
const styles={
    item:{
        border:'2px dashed #cda',     
        margin:'30px',
        padding:'30px',
        boxShadow:'0 0 10px red'
    },
    user:{
       fontSize:'20px',
       textAlign:'center'
    },
    content:{
        fontSize:'24px',
        textAlign:'center'
    }
}

//使用 function 构造函数，定义普通的无状态组件
export default function CmtItem(props){
             {/*CSS盒模型-边框设置： 像素-样式-颜色 */}
    return <div style={styles.item}>
    <h1 style={styles.user}>用户： {props.user}</h1>
    <p style={styles.content}>内容：{props.constent}</p>
    </div>
}

也可以另外开一个新文件

#styles.js
export default{
        item:{
            border:'2px dashed #cda',     
            margin:'30px',
            padding:'30px',
            boxShadow:'0 0 10px red'
        },
        user:{
           fontSize:'20px',
           textAlign:'center'
        },
        content:{
            fontSize:'24px',
            textAlign:'center'
        }
}




#Cmtitem.jsx
import React from "react"
import styles from '@/components/styles'

//使用 function 构造函数，定义普通的无状态组件
export default function CmtItem(props){
             {/*CSS盒模型-边框设置： 像素-样式-颜色 */}
    return <div style={styles.item}>
    <h1 style={styles.user}>用户： {props.user}</h1>
    <p style={styles.content}>内容：{props.constent}</p>
    </div>
}

是不是比原来强多了

 

使用CSS样式美化组件

我们来使用css样式美化我们的组件，将上面的美化都先删掉

#CmtList.jsx
import React from 'react'

//导入评论项 子组件
import CmtItem from '@/components/Cmtitem.jsx'

//使用class 关键字定义父组件
export default class CmtList extends React.Component{
    constructor(){
        super()
        this.state={
            CommentList:[     //评论列表数据
                {id:1,user:'小明',constent:'有意思？'},
                {id:2,user:'小红',constent:'真可爱'},
                {id:3,user:'小王',constent:'卢本伟牛逼'},
                {id:4,user:'小刚',constent:'好厉害'},
                {id:5,user:'小敏',constent:'我是赌神！'},
            ]
        }
    } 
    render(){
        return <div>
            <h1 >这是评论列表组件</h1>
        {this.state.CommentList.map(item=><CmtItem {...item} key={item.id}/>)}
        </div>
    }
}

#Cmtitem.jsx
import React from "react"

//使用 function 构造函数，定义普通的无状态组件
export default function CmtItem(props){
    return <div>
    <h1 >用户： {props.user}</h1>
    <p >内容：{props.constent}</p>
    </div>
}

React默认是不会解析css文件的，我们先安装两个第三方插件：

npm i style-loader css-loader -D

安装完成后，在webpack.config.js中进行配置

const path=require('path')
//导入 “在内存中自动生成index页面” 的插件
const HtmlWebPackPlugin=require('html-webpack-plugin')

//创建一个插件的实例对象
const htmlPlugin=new HtmlWebPackPlugin({
    //源文件
    template:path.join(__dirname,"./src/index.html"),
    //生成的内存中首页的名称
    filename:'index.html'
})



//下面有node的语法，因为webpack是基于node构建的，支持node API和语法
/*webpack默认只能打包处理.js后缀名类型的文件；像 .png、.vue 无法主动处理，
所以要配置第三方的loader*/
//向外暴露一个打包的配置对象
module.exports={
    mode:'development',  
    //在webpack 4.x中，有一个很大的特性，就是 约定大于配置
    //默认打包入口路径是 src/index.js
    plugins:[
        htmlPlugin
    ],
    module:{   //所有第三方模块的配置规则
        rules:[  //第三方匹配规则
            //千万别忘记exclude排除项
            {test: /\.js|jsx$/,use:'babel-loader',exclude:/node_modules/},
            //css-loader的规则
            //打包处理css样式表的第三方（先后顺序不可变）
            {test: /\.css$/,use:['style-loader','css-loader']}
        ]
    },
    //固定写法
    resolve:{
        //表示这几个文件的文件名可以不写了
        extensions:['.js','.jsx','json'],
        //使@符号表示项目根目录中的src这一层路径
        alias:{
            '@':path.join(__dirname,'./src')
        }
    }
}

好，我们创建一个css目录，建立一个Cmtlist.css，写入内容：

.title{
    color:red;
}

好，我们先试着修改一个标题，修改CmtList.jsx文件

import React from 'react'

//导入css
import cssobj from '@/css/Cmtlist.css'

//导入评论项 子组件
import CmtItem from '@/components/Cmtitem.jsx'

//使用class 关键字定义父组件
export default class CmtList extends React.Component{
    constructor(){
        super()
        this.state={
            CommentList:[     //评论列表数据
                {id:1,user:'小明',constent:'有意思？'},
                {id:2,user:'小红',constent:'真可爱'},
                {id:3,user:'小王',constent:'卢本伟牛逼'},
                {id:4,user:'小刚',constent:'好厉害'},
                {id:5,user:'小敏',constent:'我是赌神！'},
            ]
        }
    } 
    render(){
        return <div>
            <h1 className='title'>这是评论列表组件</h1>
        {this.state.CommentList.map(item=><CmtItem {...item} key={item.id}/>)}
        </div>
    }
}

然后标题就变红了！

 

cssobj是一个空对象，因为Cmtlist.css样式表并没有暴露

另外，注意：直接导入的css样式表，默认是在全局上（整个项目）都生效，只要你在任何组件中用到了样式表，那么都将生效。

比如我在CmtList.css中加入这么一个性质

h1{
    font-style: italic;
}

那么，整个页面的h1标签内的内容都会是斜体。

 

为普通样式表通过modules参数启用模块化

上面我们说了css样式表默认是对全局有效，那么我们要怎么使其部分有效呢？我们可以修改webpack.config.js配置文件的内容：

//下面有node的语法，因为webpack是基于node构建的，支持node API和语法
/*webpack默认只能打包处理.js后缀名类型的文件；像 .png、.vue 无法主动处理，
所以要配置第三方的loader*/
//向外暴露一个打包的配置对象
module.exports={
    mode:'development',  
    //在webpack 4.x中，有一个很大的特性，就是 约定大于配置
    //默认打包入口路径是 src/index.js
    plugins:[
        htmlPlugin
    ],
    module:{   //所有第三方模块的配置规则
        rules:[  //第三方匹配规则
            //千万别忘记exclude排除项
            {test: /\.js|jsx$/,use:'babel-loader',exclude:/node_modules/},
            //css-loader的规则
            //打包处理css样式表的第三方（先后顺序不可变）
            //?modules：通过问号给css-loader加参数，表示为普通css样式表启用模块化
            {test: /\.css$/,use:['style-loader','css-loader?modules']}
             
        ]
    },
    //固定写法
    resolve:{
        //表示这几个文件的文件名可以不写了
        extensions:['.js','.jsx','json'],
        //使@符号表示项目根目录中的src这一层路径
        alias:{
            '@':path.join(__dirname,'./src')
        }
    }
}

之后，在CmtList.js中导入的cssobj可就不是一个空对象了。

我们就可以直接调用cssobj的某一属性了

#CmtList.jsx
import React from 'react'

//导入css
import cssobj from '@/css/Cmtlist.css'

//导入评论项 子组件
import CmtItem from '@/components/Cmtitem.jsx'

//使用class 关键字定义父组件
export default class CmtList extends React.Component{
    constructor(){
        super()
        this.state={
            CommentList:[     //评论列表数据
                {id:1,user:'小明',constent:'有意思？'},
                {id:2,user:'小红',constent:'真可爱'},
                {id:3,user:'小王',constent:'卢本伟牛逼'},
                {id:4,user:'小刚',constent:'好厉害'},
                {id:5,user:'小敏',constent:'我是赌神！'},
            ]
        }
    } 
    render(){
        return <div>
            <h1 className={cssobj.title}>这是评论列表组件</h1>
        {this.state.CommentList.map(item=><CmtItem {...item} key={item.id}/>)}
        </div>
    }
}

效果还是和上面一样只有标题是红的，但是封装性得到很大改善。

但是跟着我做实验的小伙伴可能要问了，为什么上面定义的

h1{
    font-style: italic;
}

还是生效（即h1标签下的内容还是斜体）

这是因为：

  • css模块化，只针对 类选择器 和 ID选择器
  • css模块化，不会将 标签选择器 模块化

下面我们通过模块化修改特殊id

#Cmtlist.css
/*class选择符前面加前缀符号‘.’*/
.title{
    color:red;
}
h1{
    font-style: italic;
}
/*id选择符前面应该加前缀符号‘#’*/
#cmtTitle{
    font-size: 14px;
}
#CmtItem.jsx
import React from "react"

import cssobj from '@/css/Cmtlist.css'

//使用 function 构造函数，定义普通的无状态组件
export default function CmtItem(props){
    return <div>
    <h1 id={cssobj.cmtTitle}>用户： {props.user}</h1>
    <p >内容：{props.constent}</p>
    </div>
}

懂了上面的道理，我们就可以来美化一下了

#Cmtlist.css
/*class选择符前面加前缀符号‘.’*/
.title{
    color:red;
    text-align: center;
    font-weight: 200;
}
/*id选择符前面应该加前缀符号‘#’*/
#cmtTitle{
    font-size: 14px;
}





#CmtItem.css
.title{
    font-size: 14px;
}
.content{
    font-size: 12px;
}
.cmtbox{
    /*border：边界*/
    border: 1px dashed #ccc;
    /*页面空白*/
    margin:20px;
    /*衬垫*/
    padding: 10px;
    box-shadow: 0 0 10px red;
}




#CmtItem.cs
import React from "react"

import cssobj from '@/css/CmtItem.css'

//使用 function 构造函数，定义普通的无状态组件
export default function CmtItem(props){
    return <div className={cssobj.cmtbox}>
    <h1 className={cssobj.title}>用户： {props.user}</h1>
    <p className={cssobj.content}>内容：{props.constent}</p>
    </div>
}

 

好看一些了哈。

使用 localIdentName 来自定义模块化的类名

自动生成的类型非常不好看

我们可以设置自定义模块化的类名

使用 localIdentName 自定义生成类名格式，可选参数：

  • [path]：表示样式表相对于根目录所在路径
  • [name]：表示样式表文件名称
  • [local]：表示样式的类名定义名称
  • [hash:length]：表示32位的hash值

修改配置文件webpack.config.js 的module:如下

    module:{   //所有第三方模块的配置规则
        rules:[  //第三方匹配规则
            //千万别忘记exclude排除项
            {test: /\.js|jsx$/,use:'babel-loader',exclude:/node_modules/},
            //css-loader的规则
            //打包处理css样式表的第三方（先后顺序不可变）
            //?modules：通过问号给css-loader加参数，表示为普通css样式表启用模块化
            { test: /\.css$/,use: ['style-loader',
                       { loader: 'css-loader',
                         options: {
                             modules: {
                                  localIdentName: '[path][name]-[local]'},
                                }
                            }
                        ]
                     }
             
        ]
    },

使用localIdentName自定义生成格式可选的参数有：

  1. path:表示样式表相对于项目根目录所在路径；
  2. name:表示样式表文件的名称；
  3. local：表示样式的类名定义名称；
  4. hash:length：表示32位的hash值。
  5. 在webpack.config.js文件中modules后面添加进去

 

 

 

 

 

 

 

 

 

轻舟在过
关注
前后端分离实战：构建一个基于React与Spring Boot的博客系统.pdf
07-19
本文通过一个具体的实战案例——构建一个基于React与Spring Boot的博客系统，深入讲解了前后端分离的设计思想和技术实践。 #### 项目概述 - **项目名称**：React-SpringBoot 博客系统 - **项目简介**：该系统旨在...
React - React 组件进阶
小多的博客
10-23 189
React组件进阶 组件通讯介绍 组件是独立且封闭的单元，默认情况下，只能使用组件自己的数据。在组件化过程中，我们将一个完整的功能拆分成多个组件，以更好的完成整个应用的功能。而在这个过程中，多个组件之间不可避免的要共享某些数据。为了实现这些功能，就需要打破组件的独立封闭性，让其与外界沟通，这个过程就是组件通讯 组件的props 基本使用 组件是封闭的，要接受外部数据应该通过props来实现 props的作用：接收传递给组件的数据 传递数据：给组件标签添加属性 接收数据：函数组件通过 参数 prop
React-class——路由（简介、基本使用、路由组件懒加载、路由传参、嵌套路由、路由认证）
qq_52301431的博客
10-12 1397
React构建的是单页面应用，使用路由实现页面跳转。通过管理 URL，实现组件的切换和状态的变化: 实现了路由的核心功能，提供了router的核心api。如Router、Route、Switch等，但没有提供有关dom操作进行路由跳转的api；: 基于react-router，加入了在浏览器运行环境下的一些功能，例如：Link组件，会渲染一个a标签。路由模式分为：BrowserRouter(history)（不带#号）和HashRouter（带#号）。
React的class组件及属性详解
Learn-anything.cn
11-17 5551
一、class组件 React 有两种组件：class组件 和 函数组件。class组件需要继承 React.Component，用法如下： class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } } 1、必须要重写的方法 每一个继承 React.Component 的组件，都必须重写 render() 方法
React学习5(React class 组件)
qq_40600414的博客
08-25 2466
react class组件的生命周期
React入门之React_渲染基础用法和class实例写法
最新发布
slom_fxt的博客
02-29 475
React_渲染基础用法和class实例写法
mini-todo-list:使用类组件在HTML中进行React的迷你待办事项列表
05-17
**迷你待办事项列表——使用React类组件在HTML中实现** React是一个流行的JavaScript库，用于构建用户界面，尤其是单页应用程序。在这个项目中，我们将会使用React的类组件来创建一个简单的迷你待办事项列表。这个...
ReactApproval:一个带有批准卡的简单React应用，用于批准或拒绝博客评论
04-13
这个组件可能是由React Class或者Function组件实现，它包含了评论的详细信息，如评论内容、作者、时间戳等，并提供两个交互按钮——“批准”和“拒绝”。这些按钮可能通过状态管理和事件处理函数来触发相应的业务...
Html——表白弹幕 特效（效果 + 代码）.rar
02-07
在这个案例中，可能是通过原生JavaScript或第三方库实现了弹幕滚动的特效。 5. **背景音乐**：为了增强体验，项目可能包含了音频元素，使用HTML5的`<audio>`标签嵌入背景音乐。JavaScript可以用来控制音乐的播放、...
wangluosheji.rar_网页设计
09-24
8. **前端框架和库**：如Bootstrap、React、Vue.js等，它们提供了快速开发网页的工具和组件。 9. **网页标准化和无障碍性**：遵循W3C的Web Content Accessibility Guidelines (WCAG)，确保所有用户都能访问网页内容...
React第二篇class类组件
weixin_55896343的博客
12-03 332
React从入门到项目class组(第二篇)
React Class组件生命周期详解
qq_43293207的博客
05-23 2550
1. 旧版生命周期（v16.3之前） 组件挂载过程 （1） constructor() constructor 构造方法常用来初始化state constructor是ES6对类的默认方法，通过 new 命令生成对象实例时自动调用该方法。并且，该方法是类中必须有的，如果没有显示定义，则会默认添加空的constructor( )方法。 当存在constructor的时候必须手动调用super方法。如果在constructor中想使用this关键字，就必须先调用super方法。在constructor中如果要
1. react 函数式组件 class组件 1
weixin_42508745的博客
09-01 819
组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思 组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。 文章目录函数式组件class式组件自定义组件接受父级传来的属性Props 只读性state局部私有属性（完全受控于当前组件）使用Props实现一个时钟在class组件中使用局部属性state将生命周期添加到class组件中正确的使用state setState()数据是向下流动的 函数式组件
【React系列】ES6学习笔记（三）Class
川峰的博客
01-05 1381
Class 可以通过。
React-class ——React 组件、 React Props（属性传值）、React State（状态）
qq_52301431的博客
10-11 2123
这是标题2这是标题2);}}方式2：通过React自定义组件（DOM元素）：**函数定义**//箭头函数const MyApp = () => 这是一个段落
React之Class类组件的生命周期
梦想成为全栈的切图仔
10-12 1546
react在render阶段会深度遍历react fiber 树，目的就是发现不同（diff），不同的地方就是接下来需要更新的地方，对于变化的组件，就会执行render函数，在一次render过程中结束后，就回到commit阶段，commit阶段会创建修改真实的DOM节点。在mount阶段，首先执行的是constructClassInstance函数，用来实例化React组件，在组件章节已经介绍了这个函数，组件中constructor就是在这里执行的。
React.js--10class的基本使用
zhuhui2000的博客
04-24 545
1.在src目录下新建一个文件（我建的是4.class–基本使用.js) 2.在index.js中导入刚刚新建的文件 import React from 'react' import ReactDOM from 'react-dom' import '@/4.class--基本使用' ReactDOM.render(<div> 123 </div>,docum...
React+ES6 class基本用法
weixin_44702125的博客
04-21 749
CMAScript 2015 中引入的 JavaScript 类实质上是 JavaScript 现有的基于原型的继承的语法糖。类语法不会为JavaScript引入新的面向对象的继承模型。 类 实际上是个“特殊的函数”，就像你能够定义的函数表达式和函数声明一样，类语法有两个组成部分：类表达式和类声明。 入门案例： 1.安装 webpack:     cnpm ...
React 介绍使用ES6和使用create-react-class的方式
小猪快跑
03-15 5064
通常情况下你可以用普通的 JavaScript 类定义一个组件: 如果你不使用 ES6 ，你可以使用 create-react-class 方法代替： 除了一些例外，ES6 classes(类) API 非常类似于函数 createReactClass() 。 声明默认 Props 在函数和 ES6 classes(类) 中，defaultProps 被定义为组件本身的属性： ...
JavaScript指南：打造移动应用——《学习React Native》
3. **项目结构与组件开发**：阐述如何构建 React Native 应用的基本结构，如 App.js、screens（页面）、以及如何创建和管理自定义组件，包括样式和事件处理。 4. **界面布局与交互**：涉及 Flexbox 布局、手势识别...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

轻舟在过

您的支持是我创作的最大动力~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值