前言
不管是用vue还是react，都不可避免的接触组件化这个思想。当然在react中，一切都是组件，写的react项目全部可以看成是用组件堆砌而成的。所以有必要好好理解组件化，接下来就学习下react中的组件化
组件是什么
既然在react中一切都是组件，那么组件到底是什么呢？其实可以简单看看两个定义的组件
class Header extends React.Component {
state:{
count:0
}
handleClickCount=()=>this.setState({count:12})
render(){
return <div onClick={this.handleClickCount}>{this.state.count}</div>
}
}
function FunComponent() {
const [count,setCount] = useState(0)
return <div onClick={()=>setCount(12)}>{count}</div>
}
然后再看下什么是类和函数
class Dog {
eat=()=>console.log('eat')
}
function run {
return 'run'
}
通过react的组件和类与函数的对比可以看出，其实react的组件实质就是一个类或者函数，只是它们与常规的类和函数有所不同。
- 比如组件定义中都定义了部分
jsx来描述页面的结构 - 而且组件还拥有自己的状态管理
组件的类型
对于使用react的同学来说，其实react组件分为类组件和函数式组件。其实在react hooks没有出来之前，这两个的差别还是挺大的，因为函数式组件没有自己的状态管理，所以函数式组件的使用场景还是非常局限的，一般都是充当展示型组件，数据通过父级进行传递来进行渲染。但是随着hooks的普及之后，类组件和函数式组件基本都能互换了，但是由于hooks的写法比较简洁，而且逻辑的复用更加方便，所以大家更加推荐hooks组件
类组件
其实就是基于es6 class的写法，通过继承react.component来定义新组件。而且类组件的写法是面向对象编程思想的体现。通过class的继承和封装达到复用。
例子：
class TestCom extends React.Component {
state = {
msg:''
}
componentDidMount() {}
render(){
return <div>{msg}</div>
}
}
函数组件
就是用函数的方式定义组件，以前叫无状态组件，现在有了react hooks，可以维护自己的状态。让函数组件能做更多的事情，基本可以替代类组件（以前不行）
例子：
function Header() {
return <div>header</div>
}
那么在定义组件渲染过程中，不同的组件底层分别对应调用的是什么方法呢？
- 类组件
function constructClassInstance(
workInProgress, // 正在生成的fiber树
ctor, // 类组件
props // props参数
){
const instance = new ctor(props,context)
}
- 函数式组件
function renderWithHooks(
current,
workInProgress,
Component,
props,
secondArg,
nextRenderExpirationTime,
){
let children = Component(props,secondArg)
}
所以总的来说两种组件的区别就是
- 类组件是面向对象思想的体现，而函数组件是函数式编程思想
- 类组件内部封装好了自己的方法钩子，使用 者只需要调用就。而函数组件在hooks的加持下，更加灵活
- 函数组件没有了this烦恼，没有生命周期
- 函数组件对逻辑的复用更加简洁，而类组件需要用hoc和render props等来实现
小结
总体来说react是以组件化开发的方式，组件分为类组件和函数组件，分别拥有自己的特点，对应自己的开发思想。并无好坏之分，分别由自己合适的场景
