{id:3,user:'王五',content:'我姓王'},
{id:4,user:'赵六',content:'我姓赵'},
{id:5,user:'田七',content:'我姓田'},
]
}
}
// 渲染当前组件所对应的虚拟DOM
render(){
return <div>
<h1>这是评论列表组件</h1>
{this.state.ComponmentList.map(item=> <CmtItem {...item} key={item.id}></CmtItem> )}
</div>
}
}
//CmtItem.jsx文件
import React from “react”
//使用 function 构造函数,定义普通的无状态组件
export default function CmtItem(props){
return <div>
<h1>评论人:{props.user}</h1>
<p>评论内容:{props.content}</p>
}
现在我们导入评论内容的子组件,将创建好的虚拟DOM渲染到页面上,大功告成!
//1.导入包
import React from ‘react’
import ReactDOM from ‘react-dom’
import ComponmentList from ‘@/components/ComponmentList’
ReactDOM.render(
<ComponmentList></ComponmentList>
,document.getElementById('app'))
![](https://img-blog.csdnimg.cn/a286fbab7bb84576a944848135ea9e1c.png)
实现评论列表的CSS样式
------------
在正常项目中我们书写CSS样式的方式很简单,能不能在React中使用呢?试一试
![](https://img-blog.csdnimg.cn/de9888ee5c1b4adb8415c8265e8d767c.png)
我们正常书写内联样式的方式就是这样,看看浏览器结果 。。。。报错?
![](https://img-blog.csdnimg.cn/1e194c92101c4cb1b2a55089eaa2ae6c.png)
报错并不可怕,关键你有理解报错的原因和处理报错的能力。报错提醒我们在JSX中书写行内样式的不能上string,并且给我提供了书写的例子,看for example,两个大括号的含义分别是:外层的大括号表示的是要书写JSX,里面的那层表示要书写的是样式对象。
![](https://img-blog.csdnimg.cn/75553d1e3def471faf8041239056b5be.png)
![](https://img-blog.csdnimg.cn/49971f853c2e4ad6b2755d654e9c2569.png)
注意点:在行内样式中,如果是数值类型的样式,则可以不用引号包裹,如果是字符串类型的样式,必须使用引号包裹。
这是评论列表组件
**解决样式格式书写之后,可以正式对评论列表进行编辑了,如下所示:**
// 渲染当前组件所对应的虚拟DOM
render(){
return <div>
{/* 在JSX中书写行内样式的格式为 style={{color:'red'}} */}
{/* 在行内样式中,如果是数值类型的样式,则可以不用引号包裹,如果是字符串类型的样式值,必须使用引号包裹 */}
<h1 style={{color:'red',fontSize:'35px',zIndex:4,fontWeight:200,textAlign:'center'}}>这是评论列表组件</h1>
{this.state.ComponmentList.map(item=> <CmtItem {...item} key={item.id}></CmtItem> )}
</div>
}
//使用 function 构造函数,定义普通的无状态组件
export default function CmtItem(props){
return <div style={{border:'1px dashed #ccc',margin:'10px',padding:'10px',boxShadow:'0 0 10px #ccc'}}>
<h1 style={{fontSize:'14px'}}>评论人:{props.user}</h1>
<p style={{fontSize:'12px '}}>评论内容:{props.content}</p>
}
相信大家都理解,在内联样式中编写css,代码太长影响代码的整体的美观。在JSX中如何处理?
### 配置CSS样式表
//第一层封装:将样式对象和UI结构分离
const CmtItemdiv = {border:‘1px dashed #ccc’,margin:‘10px’,padding:‘10px’,boxShadow:‘0 0 10px #ccc’}
const CmtItemh1 = {fontSize:‘14px’}
const CmtItemp = {fontSize:'12px '}
//使用 function 构造函数,定义普通的无状态组件
export default function CmtItem(props){
return <div style={CmtItemdiv}>
<h1 style={CmtItemh1}>评论人:{props.user}</h1>
<p style={CmtItemp}>评论内容:{props.content}</p>
}
//第二层封装:合并成一个大的样式表对象
const style = {
item:{border:'1px dashed #ccc',margin:'10px',padding:'10px',boxShadow:'0 0 10px #ccc'},
user:{fontSize:'14px'},
content:{fontSize:'12px '}
}
//使用 function 构造函数,定义普通的无状态组件
export default function CmtItem(props){
return <div style={style.item}>
<h1 style={style.user}>评论人:{props.user}</h1>
<p style={style.content}>评论内容:{props.content}</p>
}
//第三层封装:抽离为单独的样式表模块
//举例:将style封装在src下components文件夹下创建的style.js文件里
export default {
item:{border:'1px dashed #ccc',margin:'10px',padding:'10px',boxShadow:'0 0 10px #ccc'},
user:{fontSize:'14px'},
content:{fontSize:'12px '}
}
//需要style的文件下导入以下命令即可
//import style from ‘@/components/style.js’
虽然将css抽离到 .js 文件,但还是有点毛病,正常我们书写css的时候,不是将css写入 .css文件中的吗?这样书写css样式才简单明洁,我们可以创建一个css文件夹,如果文件需要样式,我们可以将样式进行导入吗?可以的
在src新建css文件夹,写入格式导入需要样式的组件文件夹中,出现报错,为什么?
import cssobj from ‘@/css/ComponmentList.css’
![](https://img-blog.csdnimg.cn/62950f2c77bb4c2bbc60e5db39d196fa.png)
提示:因为webpack默认处理不了后缀名为css的文件,想处理的话必须加loader,所以我们安装
新建终端或者拆分终端执行:安装完成后配置webpack.config.js的第三方模块
cnpm i style-loader css-loader -D
![](https://img-blog.csdnimg.cn/30896ccddd0c418eab18bcbf09629ec8.png)
配置完成后,新建终端再次执行一次打包 npm run dev 没有报错说明引入css文件成功。
![](https://img-blog.csdnimg.cn/7552ce652c0649a9a031bf441cddf202.png)
举个例子吧, 在css文件中书写代码如下
.title{
color: red;
}
![](https://img-blog.csdnimg.cn/f8fe343e8d094238b6ef6679a769f8a3.png)
直接调用css样式即可,如下图,成功
![](https://img-blog.csdnimg.cn/57e3da1c665f479b8f8295e6ea12e1b8.png)
### CSS样式表的作用域冲突问题
看到这,大家有点疑惑了,正常我们导入文件的时候 import 文件路径 之前要把文件暴露出来,export default 但是 css是不支持这个语法的所以我们要导入一个空对象来接收。
![](https://img-blog.csdnimg.cn/3f90ed37c5f5493e978ea9f1b05f12e1.png)
import一个对象来接收,然后给出一个路径,我们可以看一下这个对象的内容是什么
//导入组件需要的样式表
import cssobj from ‘@/css/ComponmentList.css’
console.log(cssobj);
![](https://img-blog.csdnimg.cn/5de21a04e4bd4388abdb47225cc96b6e.png)
注意:直接导入的样式表,默认是在全局上,整个项目都生效的!因为样式表是没有模块作用域的
现在配置webpack.config.js
module:{//所有第三方 模块的配置规则
rules:[//第三方匹配规则
{test: /\.js|jsx$/,use: 'babel-loader',exclude: /node_modules/},
{
test: /\.css$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: {
localIdentName: '[name]__[local]___[hash:base64:5]'
}
}
}
]
}
]
},
一开始正常配置出现了ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the [API]( ) schema.这种问题,采用上图的方法解决,css-loader 选项的语法在 3.0.0 版中已更改。
![](https://img-blog.csdnimg.cn/d564aef850814fedb4f1a6d921c0dcbd.png)
现在在来看我们导入的cssobj已经不在是undefined已经是一个有具体属性的一个对象了。
.title{
color: blue;
}
/* 如上文,控制台没有h1的原因,css模块化只针对类选择器和Id选择器,不会对标签选择器模块化 */
h1{
font-style: italic;
}
**ES6**
* 列举常用的ES6特性:
* 箭头函数需要注意哪些地方?
* let、const、var
* 拓展:var方式定义的变量有什么样的bug?
* Set数据结构
* 拓展:数组去重的方法
* 箭头函数this的指向。
* 手写ES6 class继承。
![](https://img-blog.csdnimg.cn/img_convert/aac1740e50faadb9a6a7a5b97f9ccba8.png)
**微信小程序**
* 简单描述一下微信小程序的相关文件类型?
* 你是怎么封装微信小程序的数据请求?
* 有哪些参数传值的方法?
* 你使用过哪些方法,来提高微信小程序的应用速度?
* 小程序和原生App哪个好?
* 简述微信小程序原理?
* 分析微信小程序的优劣势
* 怎么解决小程序的异步请求问题?
![](https://img-blog.csdnimg.cn/img_convert/60b1dbe5c76e264468aa993416a9a031.png)