class创建的组件中的this.state

使用function 和 class 两种创建组件方式的对比

注意：使用class关键字创建的组件，有自己的私有数据和生命周期函数
注意：使用function创建的组件，只有props。没有私有数据和生命周期函数
1.用构造函数创建出来的组件：叫做"无状态组件" 【无状态组件今后用的不多】
2.用class关键字创建出来的组件：叫做“有状态组件”【今后用的最多】
3.什么情况下使用有状态组件，什么情况下使用无状态组件？

• 如果一个组件需要有自己的私有数据，则推荐使用：class创建的有状态组件
• 如果一个组件不需要私有的数据，则推荐使用：无状态组件
• React官方说：无状态组件，由于没有自己的state和生命周期函数，所以运行效率会比有状态组件稍微高一些。
  有状态组件和无状态组件之间的本质区别就是：有无state属性、和有无生命周期函数
  4 . 组件中的props 和 state/data 之间的区别
  • props中的数据都是外界传递过来的
  • state/data中的数据，都是组件私有的。（通过Ajax获取回来的数据，一般都是私有数据）
  • props中的数据都是只读的，不能重新赋值
  • state/data 中的数据，都是可读可写的。

// 1. 导入包
import React from 'react'
import ReactDOM from 'react-dom'

//2. class 关键字创建组件
class Movie extends React.Component{

  //构造器
  constructor(){
    //由于 Movie 组件，继承了 React.Component 这个父类，所以，自定义的构造器中，必须调用 super()
    super()
    //只有调用了 super() 以后，才能使用 this 关键字
    this.state = { //这个 this.state = {} 就相当于 vue 中的 data(){ return {}}
      msg:'大家好，我是class 创建的 Movie组件'
    }
  }

  //render 函数的作用，是 渲染 当前组件对应的 虚拟DOM元素
  render(){
      //return null 必须有返回值，没有返回值时，返回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}
          <h3>{this.state.msg}</h3>
      </div>
  }
}

const user = {
  name : 'zs',
  age : 22,
  gender:'男'
}

// 3. 调用 render 函数渲染
ReactDOM.render(<div>
  123
  {/* <Movie name={user.name} age={user.age} gender={user.gender}></Movie> */}
  <Movie {...user}></Movie>
</div>, document.getElementById('app'))