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

短命女 2022-08-29 00:18 130阅读 0赞

#  回顾 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 来进行访问

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

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>
          }

![20210809114925322.png][]

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

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

希望对你有所帮助！

[20210809114925322.png]: /images/20220829/590913fab214433daf5f3643cf46371f.png