Skip to content
本页目录

组件化与组件封装的技巧

前言

不管是用vue还是react,都不可避免的接触组件化这个思想。当然在react中,一切都是组件,写的react项目全部可以看成是用组件堆砌而成的。所以有必要好好理解组件化,接下来就学习下react中的组件化

组件是什么

既然在react中一切都是组件,那么组件到底是什么呢?其实可以简单看看两个定义的组件

jsx
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>
}

然后再看下什么是类和函数

js
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 的继承和封装达到复用。

例子:

jsx
class TestCom extends React.Component {
  state = {
    msg: ''
  }
  componentDidMount() {}
  render() {
    return <div>{msg}</div>
  }
}

函数组件

就是用函数的方式定义组件,以前叫无状态组件,现在有了 react hooks,可以维护自己的状态。让函数组件能做更多的事情,基本可以替代类组件(以前不行)

例子:

jsx
function Header() {
  return <div>header</div>
}

那么在定义组件渲染过程中,不同的组件底层分别对应调用的是什么方法呢?

  • 类组件
js
function constructClassInstance(
  workInProgress, // 正在生成的fiber树
  ctor, // 类组件
  props // props参数
) {
  const instance = new ctor(props, context)
}
  • 函数式组件
js
function renderWithHooks(
  current,
  workInProgress,
  Component,
  props,
  secondArg,
  nextRenderExpirationTime
) {
  let children = Component(props, secondArg)
}

所以总的来说两种组件的区别就是

  • 类组件是面向对象思想的体现,而函数组件是函数式编程思想
  • 类组件内部封装好了自己的方法钩子,使用 者只需要调用就。而函数组件在 hooks 的加持下,更加灵活
  • 函数组件没有了 this 烦恼,没有生命周期
  • 函数组件对逻辑的复用更加简洁,而类组件需要用 hoc 和 render props 等来实现

小结

总体来说 react 是以组件化开发的方式,组件分为类组件和函数组件,分别拥有自己的特点,对应自己的开发思想。并无好坏之分,分别由自己合适的场景

如有转载或 CV 的请标注本站原文地址