React技术栈 --》组件对比和评论列表案例 ## Day4

            {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)