介绍class创建的组件中this.state
目录：
一、class创建的组件中this.state示例
二、this.state的定义及注意事项
一、class创建的组件中this.state示例
Props
age: 22
gender：“男”
name:“zs”
//代表所有的Props
代码及讲解：
import React from 'react' //将来，在每个独立的组件文件中，第一行，必须要先倒入react包
//在webpack 中，每一个单独的JS文件或JSX文件，都有自己独立的作用域;默认，外界无法访问模块中的成员;
export default function Hello(props) { //使用function创建“Hello”组件 //使用class创建的组件是可读可写的
console.log(props)
return <div>
这是用function构造函数创建的组件--{props.name} -- {props.age} -- {props.gender}
</div>
}
//使用ES6 export default向外暴露成员
//export default Hello
//function创建组件可以被显示
//function创建的组件可以传参
//参数可以进行访问
//导入class继承
//import ‘@/03.class-继承-公共方法’
//class关键字创建组件
class Movie extends React.Component{
//构造器
constructor(){
//由于Movie组件，继承了React.Component这个父类，所以，自定义的构造器中，必须调用super()
super()
//只有调用了super()以后才能使用this关键字
msg:‘大家好，我是class创建的Movie组件’
}//
}
//可以把msg放到页面上进行展示
class Movie extends React.Component{
//构造器
constructor(){
//由于Movie组件，继承了React.Component这个父类，所以，自定义的构造器中，必须调用super()
super()
//只有调用了super()以后，才能使用this关键字
this.state = { //这个this.state相当于Vue 中的data(){return { } }
}
}
//render函数的作用，是渲染当前组件所对应的虚拟DOM元素
render(){
//return null
//在class关键字创建的组件中，如果想使用外接传递过来的props参数，不需要接收，直接通过this.props.***访问即可
//注意：不论是class还是普通function创建的组件，它们的props都是只读的，不能被统一赋值
//this.props.name = ‘李四’
//在class创建的组件中，this.state上的数据，都是可读可写的
//this.state.msg = ‘msg的值被我修改了’
return<div>
{/*注意：在class组件内部，this表示当前的实例对象 */}
这是Movie组件 – {this.props.name} – {this.props.age} – {this.props.gender}
</div>
}
}
const user = {
name:’zs’
age:’22’
gender:’男’
}
reactDOM.render(<div>
123
{/*<Hello name=(user,name) age=(user,age)></Hello> */}
{/* <Hello {…user}></Hello> */}
{/*这里的Movie标签，就是Movie类的一个实例对象 */}
<Movie>{…user}</Movie>
</div>,document.getElementById(‘app’))
export default function Hello(props){
console.log(props)
return<div>
*这是用function构造函数创建的组件-- （props.name）--
(props.age) – (props.gender)
<h3>{this.state.msg}</h3>
</div>
}
//class创建的组件也可以进行传参
class，function创建组件可以丢到页面上去显示。
这个class也是以标签来使用，这一点没有任何差别，再来看标点，普通function创建的组件能给他传参，直接在标签上给他传参就行。
class创建组件也能够直接给他传参，传参这一层也是完全一样的。还有传过来参数，是可以访问的，只不过里面是用props来接收的，这里面直接用this来进行访问，不论这种语法上有什么细微差别，不论最终外界传过来的参数，是左边儿的组件还是右边的组件都可以访问。
二、this.state的定义及注意事项
注意事项和组件对比：
使用function 和 class 两种创建组件方式的对比
注意：使用class关键字创建的组件，有自己私有的数据和生命周期函数；
注意：使用function创建的组件，只有props，没有自己的私有数据和生命周期函数；
如果一个组件需要有自己的私有数据，则推荐使用：class创建的有状态组件
如果一个组件不需要私有的数据，则推荐使用：无状态组件
组件中的props和 state/data 之间的区别：
1.props中的数据都是外界传递过来的
2.state/data中的数据，都是组件私有的。（通过Ajax获取回来的数据，一般都是私有数据）
3.props中的数据都是只读的，不能重新赋值
4.state/data 中的数据，都是可读可写的。
定义：
1.用构造函数创建出来的组件：叫做“无状态组件“
2.用class关键字创建出来的组件：叫做“有状态组件”
3.什么情况下使用有状态组件？什么情况下使用无状态组件？
有状态组件和无状态组件之间的本质区别就是：有无state属性、和有无生命周期函数
4.React官方反应：无状态组件，由于没有自己的state和生命周期函数，所以运行效率会比有状态组件稍微高一些。
