React学习之旅Part5：React组件的class创建方式及传值、state私有数据、有状态组件和无状态组件

Class创建组件

React创建组件有两种方式 一种是function创建方式
具体可以看我这篇博客： React学习之旅Part4：React组件的function创建方式及传值、抽离为单独jsx文件

还有一种更常用且推荐的 就是 class创建方式 了

class方式创建组件 有三个需要注意的地方：

• 1、若要使用class关键字来定义组件 则必须让组件继承 React.Component 类
• 2、在组件里必须用render函数渲染 否则会报错
• 3、必须返回合法的JSX虚拟DOM结构 若没有要返回的内容 则return null

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

// 若要使用class关键字来定义组件 则必须让组件继承React.Component
class Hello extends React.Component
{
    // 必须用render函数渲染
    render()
    {
        // 必须返回合法的JSX虚拟DOM结构
        return <h1>Hello</h1>
    }
}

ReactDOM.render(<div>
    Test
    <Hello></Hello>
</div>,document.getElementById("app"))

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18

传递参数

在class关键字创建的组件中 若想使用外界传来的props参数 无需接收
直接通过 this.props.xxx 即可访问
在class组件内部 this 表示当前组件的实例对象

class Hello extends React.Component
{
    render()
    {
        return <h1>Hello{this.props.name}{this.props.age}</h1>
    }
}

const user={
    name:"陈涛",
    age:18
}

ReactDOM.render(<div>
    Test
    <Hello></Hello>
    <hr/>
    {/* 传递参数 */}
    <Hello {...user}></Hello>
</div>,document.getElementById("app"))

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20

注 ： ... 是ES6的 展开运算符 对象里面有多少属性 就传递多少属性
和 name={user.name} age={user.age} 意义相同

私有数据(this.state)

使用 class 关键字方式创建的组件拥有其自己的私有数据
但使用 function 方式ic换件的组件 只有props 并没有自己的私有数据和生命周期函数
因此 可以理解为 用class方式创建的组件会 更加全

用 this.state 设置私有数据 相当于Vue的data(){ return {} }
这是 可读可写 的

class Hello extends React.Component
{
    constructor()
    {
        super();
        // 为组件绑定私有数据
        this.state={
            msg:"Hello World"
        }// 相当于Vue的data(){ return {} } 可读可写
    }

    // 必须用render函数渲染
    render()
    {
    	// 设置数据
        this.state.msg="Hello!"
        return <h1>
            Hello
            <span>{this.state.msg}</span>
        </h1>
    }
}

ReactDOM.render(<div>
    Test
    <Hello></Hello>
</div>,document.getElementById("app"))

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27

有状态组件和无状态组件

使用 class 关键字方式创建的组件拥有其自己的私有数据(this.state)和生命周期函数
而 使用 function 方式创建的组件 并没有其自己的私有数据和生命周期函数

因此 用function构造函数创建的组件 被称为 无状态组件 (使用频率不高)
而用class关键字创建的组件被称为 有状态组件

有状态组件和无状态组件的 本质区别 是 有无state属性 和 生命周期函数 (state英文翻译过来就是状态)

组件中props和state的区别

• props 中的数据都是 外界传入 到组件内的
  而 state 中的数据是 组件私有 的(通常是Ajax获取的数据)

• props 中的数据都是 只读 的 并不能重新为其赋值
  而 state 中的数据是 可读可写 的

---