腾讯网站建设的基本情况,佛山顺德做网站,工信部icp备案,百度网络营销1 组件和模块
1.1 模块 对外提供特定功能的js程序#xff0c;一般就是一个js文件 为什么拆分模块呢#xff1f;随着业务逻辑增加#xff0c;代码越来越多#xff0c;越来越复杂。作用#xff1a;复用js#xff0c;简化js#xff0c;提高js运行效率
1.2 模块化
当应用…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 typetext/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不在指向windowsjsx语法最终被编译为js
3.2 类式组件
定义组件代码如下 script typetext/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三大属性 statepropsrefs
后记 ❓QQ:806797785 ⭐️源代码仓库地址https://gitee.com/gaogzhen/react-study 参考
[1]尚硅谷React教程2022加更B站超火react教程[CP/OL].2020-12-15.p7-p11.
