zoukankan      html  css  js  c++  java
  • 有状态组件 & 无状态组件 <React>

    有状态组件 & 无状态组件

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

    无状态组件

    • 主要用来定义模板,接收来自父组件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 --->
    简书 https://www.jianshu.com/p/29ae19471dba @_hider
    segmentfault https://segmentfault.com/a/1190000016774551 @何鼕鼕

  • 相关阅读:
    169. Majority Element
    283. Move Zeroes
    1331. Rank Transform of an Array
    566. Reshape the Matrix
    985. Sum of Even Numbers After Queries
    1185. Day of the Week
    867. Transpose Matrix
    1217. Play with Chips
    766. Toeplitz Matrix
    1413. Minimum Value to Get Positive Step by Step Sum
  • 原文地址:https://www.cnblogs.com/liyf-98/p/15001726.html
Copyright © 2011-2022 走看看