zoukankan      html  css  js  c++  java
  • React函数组件和class组件以及Hook

     

    我们都知道定义组件有两个要求:

    1. 组件名称必须以大写字母开头

    2. 组件的返回值只能有一个根元素

    什么是函数组件▼

      

        函数组件接收一个单一的 props 对象并返回了一个React元素,如下图:

    什么是class组件▼

         使用ES6 的 class 来定义的组件。如下图:

    函数组件和class组件的区别▼

        有一段时间,规范的答案是: class组件可以访问更多功能(如状态)。有了Hook,就不再是这样了。

        函数组件的性能比类组件的性能要高,因为类组件使用的时候要实例化,而函数组件直接执行函数取返回结果即可。为了提高性能,尽量使用函数组件。

    什么是Hook▼

        Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。也就是说在React 16.8之后函数组件就可以使用state以及其他的react特性。具体学习hook请前往https://react.docschina.org/docs/hooks-intro.html

    有了hook之后函数组件式编程使react项目性能更优,代码更加简洁。

    React函数组件和class组件以及Hooks

    作者 烦恼会解决烦恼

    我们都知道定义组件有两个要求:

    1. 组件名称必须以大写字母开头

    2. 组件的返回值只能有一个根元素

    什么是函数组件▼

      

        函数组件接收一个单一的 props 对象并返回了一个React元素,如下图:

    什么是class组件▼

         使用ES6 的 class 来定义的组件。如下图:

    函数组件和class组件的区别▼

        有一段时间,规范的答案是: class组件可以访问更多功能(如状态)。有了Hook,就不再是这样了。

        函数组件的性能比类组件的性能要高,因为类组件使用的时候要实例化,而函数组件直接执行函数取返回结果即可。为了提高性能,尽量使用函数组件。

    什么是Hook▼

        Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。也就是说在React 16.8之后函数组件就可以使用state以及其他的react特性。具体学习hook请前往https://react.docschina.org/docs/hooks-intro.html

    有了hook之后函数组件式编程使react项目性能更优,代码更加简洁。如下demo:

  • 相关阅读:
    什么是page fault?
    [转载] 使用 Docker 部署 openstf 平台
    dockerfile中设置python虚拟环境+gunicorn启动
    python虚拟环境
    appium 多设备
    jenkins初始化和安装插件
    安装docker-ce
    Seleium Grid配置中的MaxInstances和MaxSession详解
    【GIS】GeoServer-Cache
    【GIS】GeoServer-服务权限
  • 原文地址:https://www.cnblogs.com/onesea/p/13563275.html
Copyright © 2011-2022 走看看