React 第三天
第三天
01:在组件中使用style行内对象并封装样式对象:
CmtItem.jsx:
import React from 'react'
//第一层封装 将样式对象和UI结构分离
// const itemStyle = { border: '1px dashed #ccc', margin: '10px', padding: '10px', boxShadow: '0 0 10px #ccc' }
// const userStyle = { fontSize: '14px' }
// const contentStyle = { fontSize: '12px' }
//第二层封装 合并成一个大的样式对象
//const styles = {
// item: { border: '1px dashed #ccc', margin: '10px', padding: '10px', boxShadow: '0 0 10px #ccc' }
// user: { fontSize: '14px' },
// content: { fontSize: '12px' }
// }
//第三层封装 抽离为单独的样式表模块
import style from '@/components/styles';
//使用 function 构造函数，定义普通的无状态组件
export default function CmtItem(props) {
return (
<div style={style.item}>
{
<div key={props.id}>
<h1 style={style.user}>评论人:{props.user}</h1>
<p style={style.content}>评论内容:{props.content}</p>
</div>
}
</div>
)
}
02:使用css样式表美化组件
第一步:
npm install style-loader style-loader css-loader –save-dev
第二步:
webpack.config.js:
webpack发现.css文件后会从右往左的顺序先交给css-loader来处理，然后交给style-loader来处理，然后交给webpack进行打包
第三步:
第四步:
03.演示React中使用普通css样式表的作用域冲突问题
直接引入的组件是全局作用域生效的，
在Vue.js中可以通过<style scoped></style> 来解决这个问题，在React中，没有scoped，因为React.js根本没有指令的概念
04.为普通样式表通过modules参数启用模块化
第一步:启用模块化
第二步:对象.类名
05.使用localldentName来自定义模块化的类名
webpack.config.js:
npm run dev:
06.通过local和gobal设置类名是否被模块化
默认情况下,不用写:local() 所有类名和id都被模块化了。
07.在项目中为scss和less文件启用模块化
npm install bootstrap@3.3.7 –save
import bootcss from 'bootstrap/dist/css/bootstrap.css'
发现报错
npm install url-loader -D//打包处理字体文件的loader
url-loader依赖于file-loader:
npm install file-loader –D//安装下file-loader
//自己规定 第三方的样式表 都是以.css结尾
//自己的样式表，都要以.scss或.less结尾 这样，我们不要为普通的.css启用模块化
//自己的样式表，都要以.scss或.less结尾，只为.scss或.less文件启用模块化
npm install sass-loader node-sass –D
##在项目中启用模块化并同时使用bootstrap
- 把 自己的样式表，定义为.scss文件
- 把第三方的样式表，还是以.css结尾
- 我们只需要为自己的.scss文件，启用模块化即可
- 运行npm install sass-loader node-sass –D安装能够解析scss文件的loader
(这个没有写错，就是写sass 虽然是解析scss)
然后就可以这么用了
也不用再暴露什么了:
08.在React中为按钮绑定点击事件
React中事件使用camelCase
原生的JavaScript中使用onlick在React中使用onClick
问题:为什么这里调用的时候要用this呢？
答:
在一个实例方法中调用另外的方法，要写this。render函数就是一个实例方法。
在React中使用最多的事件绑定方式是
<button onClick={()=>this.show(‘传参’)}>按钮</button>
//事件的处理函数，需要定义为 一个箭头函数然后赋值给 函数名称
show = (arg1)=>{
console.log(‘show方法’ + arg1 )
}
09.使用this.setState来修改state上的数据
在React中，如果要修改数据，不要使用this.state.msg = … 这样直接修改。
而是应该使用 this.setState({msg:…})
示例代码:
import React, { Component } from 'react'
import { ENGINE_METHOD_DIGESTS } from 'constants';
export default class BindEvent extends Component {
constructor() {
super()
this.state = {
msg:'哈哈',
}
}
render() {
return (
<div>
{/* 需求 点击按钮，修改msg的值 */}
<button onClick={() => this.show('????','????')}>按钮</button>
<h3>{this.state.msg}</h3>
</div>
)
}
show = (arg1,arg2) => {
// console.log('show方法被调用了' + arg1 + arg2)
console.log(this);
// 注意,在React中，如果想为state中的数据重新赋值，不要使用this.state.*** = 值
// 应该 调用React 提供的 this.setState({msg:'123'})
// this.state.msg = 'pppppp';
// 在 React 中，推荐使用 this.setState({})修改状态值
this.setState({
msg:'123' + arg1 + arg2
})
}
}
10.this.setState的两个注意点
1）setState对于你想修改的东西只要直接修改需要修改的东西就行了，React会自动和其它的属性合并，不需要把所有state中需要修改的东西都写一遍。
2) setState执行是异步的，如果你在setState之后又想拿到最新的状态值，需要通过setState的回调函数。
11.React中绑定文本框到State中的值
介绍一下VSCode中 对注释的折叠
双向绑定::
12.拓展-React中的生命周期
生命周期的概念:组件从创建、到运行、到销毁的过程，会发出一些事件，这些事件叫做组件的生命周期函数。
Vue-lifecycle
14.快速梳理React的组件生命周期函数图
React组件生命周期氛围三部分:
·组建创建阶段:特征:一辈子只执行一次
componentWillMount:
render
componentDidMount:
·组件运行阶段:按需，根据props属性或state状态的改变,有选择性的自行0到多次
componentWillReceiveProps:
shouldComponentUpdate:
componentWillUpdate:
render:
componentDidUpdate:
·组件销毁阶段:一辈子只执行一次
componentWillUnmount
以上是 React 第三天 的全部内容， 来源链接： utcz.com/z/382780.html
