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

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")) 

传递参数

在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")) 

注：...是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")) 

有状态组件和无状态组件

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

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

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

组件中props和state的区别

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

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