0201基础-组件-React

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>

控制台输出：

• React三大属性
  • state
  • props
  • refs

后记

❓QQ:806797785

⭐️源代码仓库地址：https://gitee.com/gaogzhen/react-study

参考：

[1]尚硅谷React教程（2022加更，B站超火react教程）[CP/OL].2020-12-15.p7-p11.