0201基础-组件-React

news2024/10/7 8:20:03

1 组件和模块

1.1 模块

对外提供特定功能的js程序，一般就是一个js文件

为什么拆分模块呢？随着业务逻辑增加，代码越来越多，越来越复杂。
作用：复用js，简化js，提高js运行效率

1.2 模块化

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

模块化的演变：参考JS模块化

1.3 组件

理解：用来实现局部功能效果的代码和资源的集合(html/css/js/images等等)
作用：复用编码，简化项目编码，提高运行效率

1.4 组件化

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

组件化的发展：

Redux 演变过程01：组件化过程
前端构建演进

2 开发者工具

chrome浏览器插件React Developer Tools，通过Chrome应用商店或者下载离线插件安装，图标如下所示：在这里插入图片描述

3 React组件

3.1 函数式组件

定义一个简单的函数式组件，代码如下：

  <script type="text/babel">
    // 1.创建函数式组件
    function MyComponent() {
      // 此处this undefined babel编译之后开启严格模式
      console.log(this);
      return <h2>函数定义的组件(适用于简单组件的定义)</h2>
   }
    // 2.渲染虚拟DOM到页面
    ReactDOM.render(<MyComponent/>, document.getElementById('test'))
    /*
      注意事项
      1.组件函数名首字母大写
      2.渲染组件标签，名称相同，标签闭合
      执行ReactDom.render(标签, 容器)之后流程  
      1.React解析组件标签，找到了MyComponent组件。
      2.发现组件是用函数定义的，随后调用函数，把虚拟DOM转为真实DOM，随后呈现在页面上。
    */
  </script>

在浏览器中通过开发者工具查看，如下图3.1-1所示：在这里插入图片描述

把Demo函数复制到babel.cn在线工具，编译后代码3.2-1-2所示：

"use strict";

function MyComponent() {
  // 此处this undefined babel编译之后开启严格模式
  console.log(this);
  return /*#__PURE__*/React.createElement("h2", null, "\u51FD\u6570\u5B9A\u4E49\u7684\u7EC4\u4EF6(\u9002\u7528\u4E8E\u7B80\u5355\u7EC4\u4EF6\u7684\u5B9A\u4E49)");
}

开启严格模式后，this不在指向windows
jsx语法最终被编译为js

3.2 类式组件

定义组件代码如下：

  <script type="text/babel">
    // 1.类式组件
  class MyComponent extends React.Component {
    // 此处this undefined babel编译之后开启严格模式
    render() {
      // render 放在了MyComponent的原型对象上，供实例使用
      // 此处this指向MyComponent的实例对象
      console.log(this);
      return <h2>我是用类定义的组件(适用于复杂组件的定义)</h2>
    }
   }
    // 2.渲染虚拟DOM到页面
    ReactDOM.render(<MyComponent/>, document.getElementById('test'))
    /*
      1.React解析组件标签，找到了MyComponent组件。
      2.发现组件是用类定义的，随后new该类的实例，通过该实例调用原型上的render方法
      3.将render返回的虚拟DOM转为真实DOM，随后呈现在页面上
    */
  </script>