react中创建组件的方式

方式一

使用function创建组件

1. 定义一个function

//fuction的名称一定要大写开头
function 组件名称(){
	//返回的值必须是一个虚拟DOM对象，或null
	return <h1>holle</h1>
}

2. 将组件渲染到页面

//定义的组件可以直接当作一个标签来使用
ReactDOM.render(<组件名称></组件名称>,document.getElementById('app'))

3. 给组件传值的方法

function 组件名称(props){
	//props是用来接收传递过来的数据的参数，read-only
	//在vue和react中接收的数据只能读，不能写
	console.log(props.一个属性名)
	//属性名任意写
	return <h1>holle{props.一个属性名}</h1>
}
var 一个值=1
ReactDOM.render(<组件名称 一个属性名={一个值}></组件名称>,document.getElementById('app'))


ReactDOM.render(<Holle {...一个对象}></Holle>,document.getElementById('app'))

使用展开运算符来传值

var 一个对象={id:1,name:'张三',age:18}
function 组件名称(props){
	console.log(props.id)
	console.log(props.name)
	console.log(props.age)
	//属性名任意写
	return <h1>holle{props.name}</h1>
}
ReactDOM.render(<Holle {...一个对象}></Holle>,document.getElementById('app'))

方式二

使用function和**.jsx文件**创建组件

1. 创建.jsx文件

import React from 'react'

export default function 组件名称(props) {
    return <h1>这是holle2</h1>
}

2. 导入.jsx文件

import 标签名称 from '.jsx文件路径'
//渲染到页面上
ReactDOM.render(<标签名称></标签名称>,document.getElementById('app'))

3. 传值方法跟方式一的一样

方式三

使用class创建组件

1. 定义一个class

//需要继承React.Component
class 组件名称 extends React.Component{
	//渲染当前组件对应的虚拟DOM元素
	render(){
	//返回值必须符合jsx语法
		return <div>这是使用class创建的组件</div>
	}
}

2. 将组件渲染到页面

//定义的组件可以直接当作一个标签来使用
ReactDOM.render(<组件名称></组件名称>,document.getElementById('app'))

3. 给组件传值的方式

var b={id:1,name:'张三',age:18}
//使用class创建的组件，不需要用props作为参数接收传值，直接使用this.props就可以获取传值
//！！这里this.props获取的值也是只能读的
class 组件名称 extends React.Component{
    render(){
    return  <h1>Holle {this.props.name}----{this.props.age}</h1>
    }
}
//给组件传值，还是用展开运算符来传递
ReactDOM.render(<组件名称 {...b}></组件名称>,document.getElementById('app'))

在class组件内部，this表示当前组件的实例对象
在实例对象的props属性中存储了渲染时，传递过来的值

function和class创建组件的区别

1. function
   定义：使用构造函数（function）创建出来的组件，叫做无状态组件
   特点：只有propos，没有自己的私有数据和生命周期函数
   传递数据只能通过propos
2. class
   定义：使用class创建出来的组件，叫做有状态组件
   特点：有自己的私有数据（this.state）和生命周期函数
   class中的私有数据：

class 组件名称 extends React.Component{
	//构造函数
	constructor(){
	//因为继承了React.Component，所以需要先写super()
		super()
		//相当于vue中的data
		//这里的数据**可读可写**
		this.state={
		 msg:'这个class创建的组件的私有数据'
		}
	}
	render(){
    return  <h1>{this.state.msg}</h1>
    }
}

当一个组件需要有自己的私有数据，推荐使用class来创建
当一个组件不需要有自己的私有数据，推荐使用function来创建
function创建的组件比class创建的运行效率高，一般情况下使用class来创建就可以

props和state（/data）的区别：
props中的数据都是外界传递过来的，都是只能读的
state（/data）都是通过ajax获取的，都是组件私有的，都是可读可写的