React -- 函数式和类式组件

Posted 我真的爱敲代码

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React -- 函数式和类式组件相关的知识,希望对你有一定的参考价值。

欢迎学习交流!!!
持续更新中…


模块与组件

模块

  • 向外提供特定功能的js程序, 一般就是一个js文件
  • 为什么要拆成模块:随着业务逻辑增加,代码越来越多且复杂。
  • 作用:复用js, 简化js的编写, 提高js运行效率

组件

  • 用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
  • 为什么要用组件: 一个界面的功能更复杂
  • 作用:复用编码, 简化项目编码, 提高运行效率

模块化
当应用的js都以模块来编写的, 这个应用就是一个模块化的应用

组件化
当应用是以多组件的方式实现, 这个应用就是一个组件化的应用

组件规则注意事项

  • 组件类的第一个首字母必须大写
  • 组件类必须有 render 方法
  • 组件类必须有且只有一个根节点
  • 组件属性可以在组件的 props 获取
    • 函数需要声明参数:props
    • 类直接通过 this.props

函数式组件(无状态)

  • 名字不能用小写
    • React 在解析的时候,是以标签的首字母来区分的
    • 如果首字母是小写则当作 HTML 来解析
    • 如果首字母是大小则当作组件来解析
    • 结论:组件首字母必须大写

注意:必须要有结束标签,如<MyComponent /><MyComponent><MyComponent />

<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="./js/react.development.js"></script>
    <!-- 引入react-dom  用于支持react操作DOM -->
    <script type="text/javascript" src="./js/react-dom.development.js"></script>
    <!-- 引入babel  用于将jsx转为js -->
    <script type="text/javascript" src="./js/babel.min.js"></script>

    <script type="text/babel">
        // 1. 创建函数式组件
        function MyComponent() {
            console.log(this)  //undefined babel编译之后会开启严格模式(JS5中禁止this指向window)
            return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2>
        }
        // 2. 渲染组件到页面
        ReactDOM.render(<MyComponent />,document.getElementById('test'))
        /*
            执行了ReactDOM.render(<MyComponent />....之后发生了什么?
                1. React解析组件标签,找到MyComponent组件
                2. 发现组件是使用函数定义的,随后调用该函数,将返回的虚拟DOM转为真实DOM,呈现在页面当中
        */
    </script>
</body>

类方式组件(有状态)

有关类

  • 类中的构造器不是必须写的,要对实例进行一些初始化的操作,比如添加指定属性时才写。
  • 如果A类继承了B类,且A类中写了构造器,那么A类构造器中的super是必须要调用的
  • 类中所定义的方法,都是放在了类的原型对象上,供实例去使用

在React中,定义/创建一个类必须要继承一个内置类Component

    <script type="text/babel">
        // 1. 创建类式组件    -->类名就是组件名
        class MyComponent extends React.Component{
            // 构造器中必须调用super,但构造器可以省略,render必须写且必须有返回值
            render () {
                // render放在哪里?   ---类的原型对象上,供实例使用 
                // render中的this是谁?    ---MyComponent的实例对象即MyComponent组件实例对象
                return <h2>我是用类定义的组件(适用于【复杂组件】的定义)</h2>
            }
        }
        // 2. 渲染组件到页面     (render在此处仅仅是重名了)
        React.render(<MyComponent />,document.getElementById('test'))
    </script>

以上是关于React -- 函数式和类式组件的主要内容,如果未能解决你的问题,请参考以下文章

极智开发 | React 函数式组件 和 类式组件

React系统学习2(组件三大核心属性之state)

React系统学习2(组件三大核心属性之state)

React系统学习2(组件三大核心属性之state)

react函数式组件及类式组件

React函数类组件及其Hooks学习