React 项目---class 创建组件 (11)

 回顾 function 创建组件

在前面的学习中，我们已经介绍了一种方法来创建组件 利用function，这里我们一起来回顾一下

function Hello(props){
  
    return <div>你好，我的名字是:{props.name},我今年：{props.age} ,我的地址是：{props.address}</div>
}

可以看到的是Hello 首先是利用function 关键字，首字母大写，并且可以包含参数 props

如果调用的可以用两种方式

const people={
    name:"wdg",
    age:18,
    job:"chengxuyuan"
}
const myh1=<div>
        <Hello name={people.name} age={people.age} job={people.job}></Hello>
        <Hello {...people}></Hello>
 </div>

ReactDOM.render(myh1,document.getElementById("app"));

上面是我们利用function创建组件并且调用的一种方式，接下来我们介绍第二种方式来创建组件

利用class 关键字来创建组件

import React from 'react'
import ReactDOM from 'react-dom'

export default class Animals extends React.Component{
      render(){
        return <div>我是class 创建的组件</div>
      }
}

我们现在来分析一下语法， 首先export default 不用说，如果我们在外界要使用的话，那么需要导出该组件，从class 说起：

class  Cname extends React.Component{

       render(){

                 return <div>我是一个class 组件</div>

        }

}

Cname 表示组件的名称，必须继承React.Component  而且在组件的内部，比如实现render 这样的一个实例方法，而且实例方法必须有返回值，返回值是需要使用 jsx 语法

class 组件使用外部参数，传递和使用

上面我们介绍通过class 关键字来创建组件，上面的例子中没有涉及到参数，我们不仅想问，如果涉及到参数应该如何

其实在class 创建的组件中，如果想用外界参数，怎不需要接收，直接可以通过this.props 来进行访问

 <Animals  name='熊猫'></Animals>

那么我们可以在组件中直接去使用：

export default class Animals extends React.Component{
      render(){
        return <div>我是class 创建的组件 传入参数 ---{this.props.name}</div>
      }
}

我们直接使用 {this.props.name} ，这里获取到的值就是我们上面传入的name，这个地方的props 和function创建的组件传入的方式是一样的都是只读的。那么我们不仅又要去想，到这个地方通过class 和通过function创建的组件好像没有什么区别，既然我function，为什么还要多此一举使用class 呢。这两种组件具有不同的名称

状态组件

function创建的组件，我们称为是无状态组件

class 创建的组件，我们称为是有状态组件

什么是有无状态呢

我们知道class 是一个类，那么类创建组件，自然有其构造函数

export default class Animals extends React.Component{
    
      constructor(){
         super();   //super 是调用父类的构造器 并且放在子类构造器的第一行
   
      }
      render(){
        return <div>我是class 创建的组件 传入参数 ---{this.props.name}</div>
      }
}

我们知道构造器的作用，其实是可以做些初始化的工作，通过class 创建的组件，给其一个属性state，通常是卸载 super的下面：

export default class Animals extends React.Component{
    
      constructor(){
           super(); 
           this.state={
            
           }  
      }
      render(){
        return <div>我是class 创建的组件 传入参数 ---{this.props.name}</div>
      }
}

state 是一个对象，类似于vue 中的data，我们可以给这个对象一些属性，比如msg：

export default class Animals extends React.Component{
    
      constructor(){
           super(); 
           this.state={
              msg:"你好啊，我是state的msg 属性"
           }  
      }
      render(){
        return <div>我是class 创建的组件 传入参数 ---{this.props.name}</div>
      }
}

我们在render中是可以使用这个state 对象的

    render(){
        return <div>我是class 创建的组件 传入参数 ---{this.props.name}-----{this.state.msg}</div>
      }

并且这个state 和props （外部传入的参数）是不同的，state是可读可写，props 只是可读

比如我们在渲染列表的时候，我们就可以在一开始初始化的时候，通过ajax调用后台接口获取到数据给state 进行初始化，也使得我们的列表可以被渲染，既然是可写的，我们一样可以在render 中对其进行修改

   render(){
        this.state.msg="Hello 我被修改了";
        return <div>我是class 创建的组件 传入参数 ---{this.props.name}-----{this.state.msg}</div>
      }

 上面通过回顾function创建的组件，对比学习class 创建的组件，了解了class 外部参数，和state 这个私有的参数，当然也只是一些概念性东西，边做边学才是最好的老师

如果有所不足，希望大家可以评论补充！

希望对你有所帮助！