jsx

与React 相似： （1）虚拟DOM（Virtual DOM） 虚拟DOM的诞生是基于：改变真实的DOM状态远比改变一个JS对象的花销要大的多。 虚拟DOM是一个映射真实DOM的JS对象，当有变化产生时，就会创建一个新的虚拟DOM对象，计算新旧Virtual DOM的差别，然后把这些差别应用在真实的DOM上。 虚拟DOM的本质是嵌套着数组的原生对象，当新一项被加进当前JavaScript对象时，一个函数会计算新旧Virtual DOM的差异且反应在真实的DOM上。高性能框架提供了计算这些差异的算法。（核心） Vue在渲染过程中会跟踪每一个组件的依赖关系，不需要重新对整个组件树渲染，Vue默认进行了优化； React每当应用的状态被改变时，全部子组件都会重新渲染，可以通过shouldComponentUpdate（一种生命周期方法）来进行控制，以避免不必要的渲染开销。 （2）可视化组件 组件化应用：把一个应用拆分成功能明确的模块，每个模块之间通过某种方式互相关联 （3）都提供了路由和状态管理模块 不同： （1）模板与JSX 最大的区别是模板不同，Vue模板近似常规的HTML，使用HTML模板进行渲染，把html、css、js组合到一起，用各自的处理方式，提供了模板引擎处理 React推荐使用JSX--一种JS语法扩展（JS混杂着XML语法），使用编程思维书写模板，思路是all in

课程大纲： https://miaov.com/index.php/news/newsDetail/nid/263 原文件 Npm 基本使用 切换镜像, 国内的网络访问 npm 服务器可能比较慢, 切换到国内的镜像会更快 安装卸载, 使用 npm 快速安装和卸载项目依赖, 同时也可以把项目依赖声明在 package.json 文件里 运行命令, 在 package.json 的 script 字段里面, 你可以声明一些和项目相关的自定义命令, 这样可以快速对项目进行一些相应的操作 webpack 模块打包器, 除了分析 js 模块依赖, 配合相应的 loader 还可以对你的资源依赖进行分析和打包 loader 相关, 在引入模块前, loader 会先预处理一下模块的内容 babel-loader 处理 js 模块, 配合不同的 babel 插件可以编译不同内容 css, style-loader 引入 css, 如果你要引入 css, 应该先让 css-loader 介入处理 file-loader 加载资源文件, css-loader 会帮你引入一些图片或者你会在 js 里面引入一些资源依赖, 这个时候需要你把这些路径和资源交给 file-loader 处理. plugin 相关, 插件会做一些 loader 做不来的事情, 它可能会在构建的不同时间点起作用 html

前置 在 react 中解决组件样式冲突的方案中，如果您喜欢将 css 与 js 分离，可能更习惯于 CSS-Modules；如果习惯了 Vue.js 那样的单文件组件，可能习惯于使用 styled-components 来解决这个问题。使用 CSS-Modules 从老项目迁移过来可能更容易。 安装 npm i styled-components 基本用法 import React from 'react' import { render } from 'react-dom' import styled from 'styled-components' const items = [ { title: 'title1', type: 'primary', desc: 'Lorem ipsum dolor sit amet consectetur ' }, { title: 'title2', type: 'other', desc: 'Lorem ipsum dolor sit amet consectetur ', }, ] function App() { return ( <div> {items.map(renderItem)} </div> ) } function renderItem(item) { return ( <Wrap> <h2>{item.title}<

原文链接: webpack4基础 webpack4基础 鉴于一些大牛的提醒，我把此文改成，基础的webpack，提供给像我一样的刚进入webpack的小白们。 首先webpack4建议使用 node版本在8.5以上 ，cmd中 node -v 查看node版本。 1.什么是webpack WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。 构建就是把源代码转换成发布到线上的可执行 JavaScrip、CSS、HTML 代码，包括如下内容。 代码转换 ：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。 文件优化 ：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等。 代码分割 ：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。 模块合并 ：在采用模块化的项目里会有很多个模块和文件，需要构建功能把模块分类合并成一个文件。 自动刷新 ：监听本地源代码的变化，自动重新构建、刷新浏览器。 代码校验 ：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。 自动发布 ：更新完代码后，自动构建出线上发布代码并传输给发布系统。 构建其实是工程化

在大前端技术领域，当我们遇到了需要解决重复性的问题时，通常会考虑设计一个DSL（Domain-Specific Language）或者抽象出一个框架层，专门来解决这些类似的问题。 使用DSL我们并不需要为特定终端编写多套代码，还可以利用宿主语言的抽象能力，确保各终端渲染效果的一致性以及对开发者友好。 目前流行DSL有： React支持的JSX语法、Vue定义的SFC结构和v-*指令集、微信小程序的WXML/WXS语法等。 这些DSL最终被编译为目标代码，直接发布于小程序平台，或者借助JS-Runtime运行于APP和Web浏览器。 其中， React是函数式编程思想的实践者 ，最大的特点是发明了JSX语法，允许开发者使用xml的方式在JS中声明UI，并通过组件化和更加语义化的代码而非模板来高效的定义界面，以提供最大的灵活性和响应能力； React只对开发者暴露基础的生命周期和过程，更多的实现和逻辑细节则交由用户灵活定制，单纯的使用JS语言即可完成整个开发过程，有客户端开发经验的开发者将更容易上手React。 而Vue则希望通过尽可能简单的API实现响应式的数据绑定和UI组件的组合及管理，因此默认屏蔽了非常多的操作细节，这对初学者而言提供了巨大的方便；其单文件组件模板语法也更贴近原生Html5，具备Web前端基础的开发者，将能够流畅的过渡到Vue开发中。

阿里妹导读： Webpack 将各个资源打包整合在一起形成 bundle，当资源越来越多时，打包的过程也将越来越慢。如果我们不需要打包呢？让浏览器 直 接 加载对应的资源，是否就可以实现质的提升 ？ 本文分享基于浏览器的 ESModule 能力实现 Bundless 本地开发的相关思路、核心技术点和 Vite 的相关实现，以及在阿里供应链 POS 场景下的落地实践。 文末福利：前端开发学习路线。 一 引言 Webpack 最初是为了解决前端模块化以及使用 Node.Js 生态的问题而出现，在过去的 8 年时间里，Webpack 的能力越来越强大。 但因为多了打包构建这一层，随着项目的增长，打包构建速度越来越慢，每次启动都要等待几十秒甚至几分钟，然后启动一轮构建优化，随着项目的进一步增大，构建速度又会降低，陷入不断优化的循环。 在项目达到一定的规模时，基于 Bundle 的构建优化的收益变得越来越有限，无法实现质的提升。我们从另一个角度思考，webpack 之所以慢，主要的原因还是在于他将各个资源打包整合在一起形成 bundle，如果我们不需要 bundle 打包的过程，直接让浏览器去加载对应的资源，我们将有可能可以跳出这个循环，实现质的提升。 在 Bundleless 的架构下，我们不再需要构建一个完整的 bundle，同时在修改文件时，浏览器也只需要重新加载单个文件即可