组件化与组件封装的技巧

前言

不管是用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 是以组件化开发的方式，组件分为类组件和函数组件，分别拥有自己的特点，对应自己的开发思想。并无好坏之分，分别由自己合适的场景