class创建组件
# class创建组件
## class关键字创建组件
```
import React from 'react'
import ReactDOM from 'react-dom'
import Hello from '@/components/Hello'
import '@/components/jic'
const kakaxi={
name:"旗木卡卡西",
age: '18',
country:'日本'
}
class Movie extends React.Component{
//由于Movie组件，继承了React.Component这个父类，所以，自定义的构造器中，必须调用super()
constructor(){
super()
//只有在super()以后，才能使用this关键字
//这个this.state={}相当于vue中的data(){return{}}
this.state={
msg:'这是state中的私有数据',
you:''
}
}
render(){
//在class 关键字创建的组件中，如果想使用外界传递过来的props参数不需要接收，
//直接this.props.xxx访问
this.state.you='切克闹' //此时私有值可以更改
/* 注意：在class组件内 this表示当前组件的实例对象*/
return <div>这是Movie中的组件
<div>调用私有数据---{this.state.msg}</div>
<p>{this.state.msg} ----{this.state.you}</p>
</div>
}
}
const mydiv=<div >
<div>123</div>
<Hello {...kakaxi}></Hello>
<Movie {...kakaxi}></Movie>
<hr/>
<Movie name={kakaxi.name} age={kakaxi.age}></Movie>
</div>
ReactDOM.render(mydiv,document.getElementById('app'))
```
2.两种创建组件方式的对比
注意：使用class关键字创建的组件，有自己的私有数据（this.state）和生命周期函数；
注意：使用function创建的组件，只有props,没有自己的私有数据和生命周期函数；
1.用构造函数创建出来的组件：叫做无状态组件【无状态组件用的不多】
2.用class关键字创建出来的组件叫做有状态组件【用的最多】
3.什么情况下使用有状态组件？什么情况下用无状态组件？
- 如果一个组件需要有自己的私有数据，则推荐使用 ：class创建的有状态组件；
- 如果一个组件不需要私有的数据，则推荐使用，无状态组件；
- React 官方说：无状态组件，由于没有自己的state和生命周期函数，所以运行效率会比又状态组件稍微高一些；
有状态组件和无状态组件的本质区别就是：有无state属性和有无生命周期函数
4。组件中的props和state/data之间的区别
- props中的数据都是外界传递过来的；
- state/data中的数据，都是组件私有的；（通过ajax获取回来的数据一般都为私有数据）
- props中的数据都是只读的，不能重新赋值；
- state/data中的数据，都是可读可写的；
css启用模块化
1.为了处理第三方样式应该把自己的样式以.scss或.less结尾，这样就可以只针对自己的.scss样式启用模块化
```javascript
{test:/\.css$/,use:['style-loader','css-loader??modules&localIdentName=[path][name]-[local]-[hash:5]']'] }
```
例如引入bootstrap
cnpm i bootstrap@3.3.7 -s
在页面中引入,如果引入某个包的时候，这个包已经被下载到node_modules中，可以直接跳过node_modules这一级直接从要引入的文件开始。
import bootcss from 'bootstrap/dist/css/bootstrap.css'
```javascript
{test:/\.ttf|woff|woff2|eot|svg$/,use:'url-loader'/}
```
cnpm i url-loader -D
cnpm i file-loader -D
```html
<button className={[bootcss.btn,bootcss[btn-primary]].join()}></button>
```
2.为了解决第三方样式表也被模块化，书写不方便，将自己书写的css样式都以.scss和.less结尾，只对less或sass文件进行模块化处理。
cnpm i sass-loader node-sass -D //安装能够解析scss的loader
```javascript
{test:/\.css$/,use:['style-loader','css-loader'} //css改为
{test:/\.scss$/,use:['style-loader','css-loader?modules&localIdentName=[path][name]-[local]-[hash:5]','sass-loader']} //新增加
```
```javascript
import 'bootstrap/dist/css/bootstrap.css' //改为这个
//因为第三方去掉了模块化所以向外暴露成员没有了意义
```
事件
注意：
1.在React中，推荐使用this.setState({ })来修改状态值,只需要写想要修改的状态值，不需要修改的不用写
this.setState({
msg:'123'
})
2.this.setState方法的执行是异步的；如果大家想要在调用完this.setState之后，又想立即拿到最新的state值，需要使用this.setState({ },callback)
3.//#region 区间折叠 //#endregin
获取元素值 可以用 onChang={(e)=>{this.changtxt(e)}}
<text onChang={(e)=>{this.changtxt(e)}} ref="txt"></text>
changtxt=(e)=>{
(1) e.target.value
(2)利用ref this.refs.txt.value
}
