React组件

一，前言

1.在react中组件创建的方式有三种，其中主要使用的是函数组件和 class组件

二，函数组件

1.函数组件声明时，组件名首字母要大写

2.接收一个props对象作为参数

3.最终要return一个react元素

function Component(props){
	return <div>{props.name}<div>
}

三，class组件

1.class组件需要继承React.component

2.在render函数中return一个react元素，且render函数必须实现

import React from "react"
class C extends React.component{
	constructor(props){
		super(props)
	}
	render(){
		return (<div>{this.props.name}<div>)
	}
}

四，React.creatClass()

1.当不使用ES6时可以使用React.creatClass()创建一个组件

五，组件的合法返回值

1.class组件和函数组件都需要return一个合法的元素进行页面的渲染，除了上面所说的react元素，还有很多返回值都是可以的

（1）react元素

（2）fragments

（3）字符串或数值类型，会被作为文本返回

（4）布尔类型或 null, 什么都不渲染

（5）Portals，渲染子节点到不同的 DOM 子树中

（6）数组，可以不用顶层元素

六，函数组件和class组件的区别

1.函数组件没有state，函数组件的状态来自props

2.函数组件没有生命周期构子函数。

3.函数组件的使用方式有两种：

（1）使用标签：<C a={1}/> ，这种方式所有传入的属性会作为函数组件props对象参数的一个key
（2）直接调用函数：{C({a:1})} ，将函数组件要接受的属性写在一个对象里直接传入调用函数效果和使用标签的方式是一模一样的。