开发者学堂课程【React 入门与实战：介绍 class 创建的组件中 this.state 】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/585/detail/8103
介绍 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 来进行访问，不论这种语法上有什么细微差别，不论最终外界传过来的参数，是左边儿的组件还是右边的组件都可以访问。
