有状态组件 & 无状态组件

有状态组件 & 无状态组件

有状态组件可以叫做容器组件/聪明组件，无状态组件可以叫做展示组件/木偶组件。

无状态组件

  • 主要用来定义模板，接收来自父组件props传递的数据。

  • 使用{props.xxx}的表达式把props放入模板中

  • 无状态模板应该保持模板的纯粹性，以便于组件复用。

  • let Header = (props) => (
	<div>{props.xxx}</div>
)

特性：

  • 无状态组件无法访问生命周期的方法，因为它不需要组件生命周期和状态管理。
  • 无状态组件不会被实例化。
    • 无实例化过程不需要分配多余的内存，所以性能更优。
    • 同样，由于无实例化也导致了无法访问this。
    •  

有状态组件

  • 主要用来定义交互逻辑和业务数据

  • 使用{this.state.xxx}的表达式把业务数据挂载到容器组件的实例上，然后传递props到展示组件上，展示组件接收到props，把props放入到模板中。

  • class Home extends React.Component {
    construntor(props) {
        // 只有给super方法中传递props参数，在构造函数里才能用this,props.xxx,否则会报错
        super(props)
    }
    render() {
        return (
        	<Header />
        )
    }
}

性能角度分析两者的区别

类和函数最大的区别就是：能否维护自己数据(状态)。

函数

基本上关注动作(action)，而不关心数据的维护，不用维持一个状态，不用把自己的数据保存在内存中。

函数使用的数据是从外部获取或不获取数据。

函数运行时，会进行一系列的动作并返回结果或不返回。

函数速度比较快，适合做表现层。

类

相对而言，类有能力维护状态(保存数据)，也可以定义自己的一系列动作。

类能够处理复杂逻辑和状态，适合做逻辑层和数据层。

类相对来说比函数速度慢，影响渲染的性能，同时由于数据过于分散会给后期的维护造成一定的困难。

// 看到类和函数的分析，觉得组件原来是需要可以这么分析和看待的，学习到了。虽然也读过红宝书，以为自己会了js，但是在不断学习的过程中发现根本不够看。之前学vue的时候好像也只是专注于API的使用，也没有看过源码，现在学习看来，前路漫漫，加油！

文章整理自
by --->
 @何鼕鼕