React+ES6 class基本用法

最新推荐文章于 2022-08-25 22:50:46 发布

黄尚炎

最新推荐文章于 2022-08-25 22:50:46 发布

阅读量740

点赞数

分类专栏： react 文章标签： react+ES6

本文链接：https://blog.csdn.net/weixin_44702125/article/details/89437433

版权

react 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CMAScript 2015 中引入的 JavaScript 类实质上是 JavaScript 现有的基于原型的继承的语法糖。类语法不会为JavaScript引入新的面向对象的继承模型。
类
实际上是个“特殊的函数”，就像你能够定义的函数表达式和函数声明一样，类语法有两个组成部分：类表达式和类声明。
入门案例：
1.安装
webpack:
    cnpm install webpack webpack-cli -D
webpack-dev-server:
    cnpm i webpack-dev-server -D
html:
    cnpm install html-webpack-plugin -D
React:
   cnpm i react react-dom -S
babel:
   cnpm i babel-loader -D
   cnpm i @babel/core @babel/plugin-transform-runtime @babel/preset-env -D
   cnpm i @babel/preset-react -D
运行解析ES6,class代码发现缺少 @babel/runtime ，class-properties
   cnpm install @babel/runtime @babel/runtime-corejs2 -S
   cnpm i babel-plugin-transform-class-properties -D
2.配置文件
package.json
{
“name”: “day02”,
“version”: “1.0.0”,
“description”: “”,
“main”: “webpack.config.js”,
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”,
+“dev”: "webpack-dev-server --open --port 3000 --hot --host 127.0.0.1"
},
“keywords”: [],
“author”: “”,
“license”: “ISC”,
“devDependencies”: {
“@babel/core”: “^7.4.3”,
“@babel/plugin-syntax-class-properties”: “^7.2.0”,
“@babel/plugin-transform-runtime”: “^7.4.3”,
“@babel/preset-env”: “^7.4.3”,
“@babel/preset-react”: “^7.0.0”,
“babel-loader”: “^8.0.5”,
“babel-plugin-transform-class-properties”: “^6.24.1”,
“html-webpack-plugin”: “^3.2.0”,
“webpack”: “^4.30.0”,
“webpack-cli”: “^3.3.0”,
“webpack-dev-server”: “^3.3.1”
},
“dependencies”: {
“@babel/runtime”: “^7.4.3”,
“@babel/runtime-corejs2”: “^7.4.3”,
“react”: “^16.8.6”,
“react-dom”: “^16.8.6”
}
}
.babelrc
{
“presets”: [
“@babel/preset-env”,"@babel/preset-react"
],“plugins”: [
“@babel/plugin-transform-runtime”,
“@babel/plugin-syntax-class-properties”,
“transform-class-properties”
]
}
webpack.config.js
const path=require(‘path’)
//把html映射的项目跟目录
const HtmlWebPackPlugin=require(‘html-webpack-plugin’)
//

//创建插件实例
const htmlPlugin=new HtmlWebPackPlugin({
template:path.join(__dirname,’./src/index.html’),//源文件
plugins:‘index.html’//映射的目录，默认项目跟目录

})
//向外暴露一个配置对象
module.exports={
mode:‘development’,//development ,production
plugins:[//第三方插件
htmlPlugin
],module:{//第三方模块匹配规则
rules:[
{
test:/.js|jsx$/,//匹配规则
use:‘babel-loader’,//指定解析器
exclude:/node_modules/
}
]
},resolve:{
extensions: [’.js’, ‘.jsx’, ‘.json’],//省略后缀名，不配置，默认只能省略.js 和.json
alias:{//取别名
‘@’:path.join(__dirname,’./src’) //表示把src目录,可以使用@替代
}
}
}
3.代码
index.html
<html>
<head>
</head>
<body>
<div id=“app”></div>
</body>
</html>
index.js
//导入组件：生成虚拟DOM对象，生命周期
import React from ‘react’
//导入组件：把创建好的组件和虚拟DOM对象，渲染到页面
import ReactDOM from ‘react-dom’
//创建组件
//方式一：全局创建组件注意：组件名称：首字母必须大写
function HelloWorld(props){
//必须return 合法的jsx 元素
//return null;
//注意：props 只读
return <div>组件方式一：全局创建 HelloWorld{ props.name}</div>;
}
//参数
const person={name:“admin”,age:18}
const person2={name:“zhangsan”,age:18}
//方式一：导入外部组件注意默认情况下，后缀名称，不能省略
//import Hello from ‘./components/Hello’
//使用 @ 符号替代 src 目录，需要配置 webpack.config.js文件,取别名
import Hello from ‘@/components/Hello’
//方式二：ES6语法 class 创建组件
import ‘@/classComp’//clsss基本用法
ReactDOM.render(

{/ 使用组件,方式一：把组件名称当作标签使用/}
<HelloWorld name={ person.name}></HelloWorld>
{/*如果参数比较多直接传递对象格式：…对象名 es6语法,展开运算符 */}
<HelloWorld {…person2}></HelloWorld>
<Hello {…person}></Hello>
</div>,document.getElementById(‘app’))
classComp.js
console.log(‘OK’)
//ES6中，class关键字，面向对象
class Person{//注意：在class{ }区间代码，只能写构造器，实例方法，静态方法，实例属性，静态属性
//构造器
constructor(name,age){
//实例属性赋值 this
this.name=name
this.age=age
}
//静态属性, static 修饰
static eat=“米饭”
//实例方法
sleep(){
console.log(“实例方法 sleep”);
}
//静态方法
static show2(){
console.log(“静态方法 show2”)
}

}
//静态属性
Person.notional=‘中国’
//实例方法
Person.prototype.say=function(){
console.log(“实例方法 say”)
}
//静态方法
Person.show=function(){
console.log(“静态方法 show”)
}
//创建对象
const per=new Person(‘面向对象’,18)
console.log(per)
//调用方法
per.say()
per.sleep()
Person.show()
Hello.jsx
//导入组件：生成虚拟DOM对象，生命周期
import React from ‘react’
//暴露出去
export default function Hello(props){
//必须return 合法的jsx 元素
//return null;
//注意：props 只读
return

组件方式一：导入外部 jsx文件 Hello{ props.name}

;
}
项目结构：
demo
package.json
.babelrc
webpack.config.js
|-dist
|-src
    |-components
        |-Hello.jsx
    |-classComp.js
    |-index.html
    |-index.js
案例下载

黄尚炎

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React+ES6 class基本用法

CMAScript 2015 中引入的 JavaScript 类实质上是 JavaScript 现有的基于原型的继承的语法糖。类语法不会为JavaScript引入新的面向对象的继承模型。类实际上是个“特殊的函数”，就像你能够定义的函数表达式和函数声明一样，类语法有两个组成部分：类表达式和类声明。入门案例：1.安装webpack:    cnpm ...
复制链接

扫一扫