Qianduan

随着前端技术的快速发展，React作为一款领先的JavaScript库，不断推动着前端开发的变革。近期，React官网的一个显著变化引起了广大开发者的关注：它不再推荐使用Create-React-App作为构建React应用的默认工具，而是转向了Next.js。 那么，Next.js究竟有何魔力，让React官网做出如此决策？本文将为你详细解析。 一、Next.js：React应用的“升级版” Next.js并不是一个全新的框架，而是基于React的服务器端渲染框架。它提供了许多开箱即用的功能，使得开发者能够更高效地构建复杂、高性能的React应用。与Create-React-App相比，Next.js更像是一个“升级版”，它为React应用带来了以下显著的优势： 性能优化：Next.js支持自动静态优化(Automatic Static Optimization)和服务器端渲染(Server-Side Rendering)，使得页面加载速度更快，用户体验更流畅。此外，Next.js还支持预渲染(Pre-rendering)和动态导入(Dynamic Imports)，进一步提升了应用的性能。 数据获取简化：Next.js内置了数据获取功能，使得开发者能够更方便地从API或其他数据源获取数据，并将其注入到组件中。这种无缝的数据获取流程大大简化了开发过程，提高了开发效率。 强大的路由功能：Next.js提供了基于文件系统的路由功能，使得页面之间的导航变得简单直观。开发者只需创建相应的页面文件，Next.js就能自动为其生成路由。这种方式不仅易于理解，还能减少错误和提高可维护性。 更好的SEO支持：由于Next.js支持服务器端渲染和预渲染，因此它能够更好地处理页面渲染和加载问题，从而提高网站的搜索引擎优化(SEO)效果。 二、Create-React-App的局限性 虽然Create-React-App为React开发者提供了一个快速搭建项目的脚手架，但随着项目规模的扩大和复杂度的增加，其局限性也逐渐显现： 配置不灵活：Create-React-App为开发者提供了一套固定的配置，虽然这降低了入门门槛，但对于有特定需求的开发者来说，这种固定配置可能会成为束缚。 性能优化有限：Create-React-App主要关注于项目的快速搭建和开发体验，对于性能优化方面的支持相对有限。对于需要高性能的应用来说，开发者可能需要花费更多的时间和精力进行手动优化。 扩展性不足：随着项目的发展，开发者可能需要集成更多的功能和工具。然而，Create-React-App的扩展性相对有限，可能无法满足一些高级需求。 三、React官网推荐的背后 React官网之所以推荐Next.js而非Create-React-App，背后有多重原因。 首先，Next.js作为React的“升级版”，在性能、数据获取、路由等方面提供了更强大的支持，能够更好地满足现代Web应用的需求。 其次，随着前端技术的不断发展，开发者对于高性能、易扩展的应用框架的需求也在不断增加。Next.js正好符合这一趋势，能够为开发者提供更高效、更灵活的开发体验。 最后，React官网的推荐也反映了社区对于Next.js的广泛认可和支持。越来越多的企业和项目采用Next.js构建应用，证明了其在实际应用中的价值和优势。 四、结语 React官网推荐使用Next.js而非Create-React-App，是基于对现代Web应用需求的深入理解和对前端技术发展趋势的敏锐洞察。对于广大React开发者来说，了解和掌握Next.js将是一个值得投入时间和精力的选择。它将帮助你更高效地构建高性能、易扩展的React应用，提升你的开发能力和竞争力。 https://segmentfault.com/a/1190000044806695

Create React App 的演变 在 2016 年发布 Create React App 时，工具的环境是分散的。如果想要将 React 添加到现有应用，需要添加一个 script 标签或从 npm 中导入，然后调整现有的构建工具配置。但是，如果要从头开始创建一个仅使用 React 构建的新应用，则没有明确的方法可以做到这一点。 在 Create React App 之前，必须安装一堆工具并将它们连接在一起，提供正确的预设以使用 JSX，为开发和生产环境进行不同的配置，为资源缓存提供正确的设置，配置 linter 等，想要正确完成这一系列工作非常困难。人们通过创建和共享可以克隆的“样板”存储库来解决了这个问题。然而，这产生了另外一个问题：一旦在项目中调整了克隆的样板文件，就很难再拉取样板的更新。这样，项目的设置会变得旧，要么放弃更新，要么花费大量精力让所有工具再次协同工作。在快速发展的生态系统中，这非常困难。 Create React App 通过将多个工具组合在一个包中解决了这个问题。现在，如果想用 React 开始一个新项目，有一个明确的推荐方法（Create React App）可以做到这一点！ 然后，每隔一段时间，可以更新这个包，以获得所有底层工具的更新。这种模型变得很流行，以至于今天有很多工具都以这种方式工作。Vite 确实是拥有相似愿景的最佳工具之一，并且在在某些方面更进一步。 Create React App 的目标是为大多数 React 用户提供启动新 React Web 应用的最佳方式，它支持一组协同工作的精选功能。随着时间的推移，它提供的开箱即用的“baseline”会随着我们找到正确的权衡而扩大。 例如，为运行时错误添加了一个遮罩层，添加了对不同样式选项的支持，默认添加了快速刷新，它允许保存组件的代码并查看更改而不会丢失状态。对于默认的 React 开发体验来说，这是一个巨大的里程碑。总的来说，由于 Create React App 完全控制了编译管道，因此添加编译相关的功能是很容易的。 有这样一个精心策划的设置对生态系统仍然很有价值。当 React Hooks 出现时，React 团队将 React Hooks lint 规则添加到默认设置中。除此之外，Create React App 还允许 React 团队向尽可能广泛的受众部署重要的工具更改（快速刷新支持、React Hooks lint 规则）。 如果没有 React 团队策划的流行模板，将很难如此广泛地推出这些工具更改。 ...

Create React App（以下简称 CRA）是一个官方支持的创建 React 单页应用的脚手架，它提供了一个零配置的现代构建设置，将一些复杂工具（比如 webpack， Babel）的配置封装了起来，让使用者不用关心这些工具的具体配置，从而降低了工具的使用难度。 创建方法 npx: npx 来自 npm 5.2+ 或更高版本 npx create-react-app my-app npm: npm init 在 npm 6+ 中可用 npm init react-app my-app Yarn: yarn create 在 Yarn 0.25+ 中可用 yarn create react-app my-app Scripts 在新创建的项目中，你可以运行一些内置命令： npm start 或 yarn start 在开发模式下运行应用程序, 默认在浏览器打开http://localhost:3000。如果更改代码，页面将自动重新加载。 npm test 或 yarn test 以交互模式运行测试程序。 默认情况下，运行与上次提交后更改的文件相关的测试。 npm run build 或 yarn build 将生产环境的应用程序构建到 build 目录。 它能将 React 正确地打包为生产模式中并优化构建以获得最佳性能。构建将被压缩，文件名中将包含哈希。 npm run eject 注意：这是单向操作。一旦 eject ，就回不去了！ 执行完这个命令后会将封装在 CRA 中的配置全部反编译到当前项目，这样开发者完全取得 webpack 文件的控制权，可以自定义修改webpack打包配置。 ...

解决ng : 无法将“ng”项识别为 cmdlet、函数、脚本文件或可运行程序的名称 及 ng : 无法加载文件 C:\Users\15762\AppData\Roaming\npm\ng.ps1问题 ng : 无法将“ng”项识别为 cmdlet、函数、脚本文件或可运行程序的名称 解决 在命令行执行npm install -g @angular/cli ng : 无法加载文件 C:\Users\15762\AppData\Roaming\npm\ng.ps1 解决 以管理员身份运行Windows PowerShell，输入set-ExecutionPolicy RemoteSigned 选择是选择 A ng : 无法将“ng”项识别为 cmdlet、函数、脚本文件或可运行程序的名称 解决 在命令行执行npm install -g @angular/cli ng : 无法加载文件 C:\Users\15762\AppData\Roaming\npm\ng.ps1 解决 以管理员身份运行Windows PowerShell，输入set-ExecutionPolicy RemoteSigned 选择是选择 A

我的wordpress域名都换成了https，今天发现用的一个插件加载css和js的时候报错了，原来是因为https页面去发送http请求报错，因为浏览器阻止https发送http请求。我一开始打算改插件的源码，折腾好一两个小时都不成功，最后用了最简单、最粗暴的办法，一行代码解决了。 浏览器不允许在https页面里嵌入http的请求，现在高版本的浏览器为了用户体验，都不会弹窗报错，只会在控制台上打印一条错误信息。 解决办法： 在主页面的head中加入下面代码（将调用的http请求升级成https请求并调用）： <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> wordpress的话，就改admin-head.php

之前用的codesmith一直都是链接sql server，最近写新的模板需要用到mysql，居然发现无法使用，于是找了下原因，发现是没有添加mysql.data.dll的支持。 网上提供这个办法（我没有成功，我甚至专门在nuget上下载了对应版本的MySql.Data.dll，依然不成功）： １、下载MySql.Data.dll：https://dev.mysql.com/downloads/windows/visualstudio/ 下载zip格式的即可，解压后将MySql.Data.dll复制到codesmith的bin文件夹下。 ２、修改DbProviderFactories：找到C:\Windows\Microsoft.NET\Framework64\v4.0.30319\Config\machine.config 注意64位的，因为权限问题可能无法修改，将其复制到桌面做如下修改后替换回来。 在DbProviderFactories节点下添加 <add name="MySQL Data Provider" invariant="MySql.Data.MySqlClient" description=".Net Framework Data Provider for MySQL" type="MySql.Data.MySqlClient.MySqlClientFactory, MySql.Data, Version=6.10.7.0, Culture=neutral, PublicKeyToken=c5687fc88969c44d" /> 此处的版本号要与下载的dll版本一致， 可以右键查看dll的详细信息获取。 3、重新打开codesmith配置数据源即可。 我最终是新装了更高版本的codesmith，然后装了mysqlconnect之后，顺利链接上了，这里有各种版本的下载：https://downloads.mysql.com/archives/c-net/

采用Angular开发，部署的时候有两种方式：第一种是把打包后的文件直接发布到站点根目录下面，这种情况Angular的项目将作为一个独立的网站，那么必然会面对跨域的问题；第二种是把Angular打包后的文件放到站点根目录下的某个文件夹，这种情况不需要跨域，但是需要对路径做相关的配置。这里先讨论第一种情况。 一、开发环境 可以通过代理跨域，在angular项目中 1）在项目根目录新建proxy.config.json； 2）跟上面的proxyTable 一样配置好； 3）执行命令ng serve –proxy-config proxy.config.json即可 4）可以在package.json里配置下 “scripts”: { “start”: “ng serve –proxy-config proxy.config.json” }, 然后执行npm run start 二、生产环境 上面的方式可以解决我们在Angualr项目中开发环境的跨域问题，但是无法解决生产环境上的跨域问题，有的时候生产环境上也需要处理跨域问题，这个时候proxyTable是不行的，需要通过Nginx或者IIS反向代理（你没有看错，IIS反向代理，而且效率也很高，下一篇我会讨论）。 反向代理作用 1） http服务器，可以独立提供http服务； 2） 虚拟主机：多个域名指向同一个服务器，服务器根据不同的域名把请求转发到不同的应用服务器； 3） 反向代理：负载均衡，将请求转发至不同的服务器 nginx的相关配置 location / { root D:\cross-demo\dist #直接指向打包后的文件 index index.html index.htm; } location /api/ { proxy_pass http://localhost:8888/; # 将地址代理到api上 }

Facebook决定不再使用这两三年所规划的HTML5，回到原生应用的道路上。本文讲述了FB转变背后的技术细节，以及Xamarin和Mozilla对这一转变的反应。 Facebook的CEO 马克·扎克伯格最近在TechCrunch的一次采访中宣称：“作为一个公司，我们最大的错误是在HTML5上下注太多了，我们没有选原生应用，因为HTML5没有达到我们的预期”，而且，“自从发布了iOS应用后，我们发现人们订阅feed的数量增加了一倍。” 扎克伯格没有谈及他们在使用HTML5时遇到的问题，但他认为这些产品的质量不够好：“外界已经有非常好的移动体验了……我们追求最高品质，唯一的办法就是使用原生应用。” Tobie Langel是Facebook软件工程师和W3C咨询委员会代表，他在一篇帖子中详细描述了Facebook基于HTML5做移动网页时遇到的性能问题。Langel提到的第一个问题是缺少调试工具： 移动浏览器缺少工具，从而很难深入进去，发现真正的问题是什么……我们遇到的最大的问题是内存相关的。对于给定内容大小，我们的应用很容易耗尽设备硬件能力，引起系统崩溃。不幸的是，我们很难理解到底是什么引起了这些问题。GPU缓存耗尽？达到资源限制？或是其他原因？很难说。 Langel希望知道堆栈、对象、GPU缓存的内存使用情况，以及GC（垃圾回收）周期、FPS和其他资源限制信息。 Langel谈到的HTML5的另一问题是其页面滚动性能，大部分页面滚动通过JavaScript实现，因为“其他选择不够快”。他提道： 不连贯的帧率，UI线程滞后（断断续续）。由于内容大小和图片数量导致的GPU缓存耗尽。 在不同操作系统中，原生的滚动有着不同的体验。针对一种操作系统优化过的JS实现，在其他系统上的体验却很差（机器人学中的“神秘波谷”）。 安卓设备上触摸事件相关的性能问题（延时，事件不足）使JS实现的页面滚动更加脆弱。 Langel提到的其他问题有：以“黑盒”出现的GPU、安卓系统中更好的触摸跟踪支持的需求、平滑动画以及更好的缓存。其中一些问题已经提交给W3C Web性能工作组。 Nat Friedman是Xamarin的CEO，Xamarin是构建跨平台本机应用的工具提供商。在一次InfoQ评论中，他表示欢迎Facebook的改变：“对包括设备提供商，应用发布商以及最重要的消费者在内的整个移动生态系统而言，这一支持原生体验的转变是非常重要的事件”。他还指出，移动标准现在还为时尚早： 移动创新仍在飞速发展，远超“标准”方式能达到的速度。历史上，当新的操作系统出现时，它的能力非常新，使用它们的唯一方式就是在操作系统层次使用。这一阶段，最好的应用和最具突破性的创新都在靠近操作系统层面出现。对于当前移动设备平台，这种状态非常准确。市场份额的竞赛驱动了设备操作系统层面上巨大的变革和创新。在接下来的几年里，这些操作系统将会稳定下来，这一层次的创新将会变缓，使得标准化方式更加可行。但这种转变需要几年时间。 Mozilla（Mozilla是致力于Web技术的组织）的CTO Brendan Eich在ZDNet对Brendan Eich的采访中，他对Facebook在HTML5上的失败表达了不同的看法： 如果你品一品言外之意，他（马克·扎克伯格）说的应该是将原生应用和HTML糅合起来。当这样糅合时，两个系统间总会有差距。Joe Hewitt是我的一个朋友，他曾在Facebook工作，做了第一个糅合应用，将两者很好地集成起来。但他离开了Facebook，后续版本中，将两者无缝集成的技能（可能还有苹果公司的一些支持）不见了。 Eich坚信Web将最终胜出： 我从不相信Web会失败。这只是个语用学的问题，而你却被这些给绕进去了。像Facebook这样的公司搞得起开发原生应用，尤其是iOS上的原生应用。但根据长尾理论，开发者将主要集中于开发Web应用，并且以此为乐。 如果Web发展到提供缺失的API，并具有更好的性能，开发者就没必要开发其他应用了。 我有一种感觉，Web将变得非常好（十年之后），那时将不会有现今这样地在原生应用对Web应用之间无休止的论战了。 Matt Asay是The Register的编辑，他在“本机应用vs.HTML5应用的争论”中，引用了一位匿名Facebook工程经理的话说： 现在，Fackbook通过写原生代码是行动最快的。这并不是说HTML5将一直无法达到宣称的效果，而是在当前情况下，摩尔定律和Web引擎仍然有效。因此我们做了一个务实的决定。最终，如果HTML5使得我们发展更快，你将看到我们会回归到HTML5。我们将使用任何让我们高效高质量工作的技术栈。 马克·扎克伯格也看好HTML5的长远前景： 并不是说HTML5不好。长期来看，事实上HTML5真的让我非常兴奋。有趣的是，实际上每天使用移动Web Facebook的人比使用iOS应用或Android应用加起来的更多。因此移动Web对我们来说非常重要。 Facebook八月份发布了iOS本机应用，他们正在开发Android上的类似应用，应该很快会在Google Play应用商店上架。 查看英文原文：Facebook: “Betting on HTML5 Was a Mistake” – Technical Reasons and Reactions via:http://www.infoq.com/cn/news/2012/10/Facebook-HTML5-Native

在我们的研发过程中，有时会遇到这样的情况：程序很简单，数据是固定的，不想使用服务端语言(php、java、.net)，但是要实现一些分页和检索功能。这种情况下我们应该选择javascript+xml+div就ok，不过javascript解析xml的数据比较慢。json是现在非常流行的一种数据格式，所以有另外一种解决方案：javascript+json+div。 json是目前web的通用数据格式，在轻量级的web服务中占据主导地位，这里推荐一个非常轻巧的类库：jsonpath(下载地址：http://code.google.com/p/jsonpath/)。作为一个轻量级类库，你可以使用它来对json数据进行精确查找、条件查找和模糊查找，这样就能满足简单网站的功能了。下面是一个简单例子： JSONPath - Example (js) var json = { “store”: { “book”: [ { “category”: “reference”, “author”: “Nigel Rees”, “title”: “Sayings of the Century”, “price”: 8.95 }, { “category”: “fiction”, “author”: “Evelyn Waugh”, “title”: “Sword of Honour”, “price”: 12.99 }, { “category”: “fiction”, “author”: “Herman Melville”, “title”: “Moby Dick”, “isbn”: “0-553-21311-3”, “price”: 8.99 }, { “category”: “fiction”, “author”: “J. R. R. Tolkien”, “title”: “The Lord of the Rings”, “isbn”: “0-395-19395-8”, “price”: 22.99 } ], “bicycle”: { “color”: “red”, “price”: 19.95 } } }, var test1 = jsonPath(json, “$.store.book[*].author”).toJSONString() + “\n>”;//精确检索 var test2 = jsonPath(json, “$..author”).toJSONString() + “\n”; var test3 = jsonPath(json, “$.store.*”).toJSONString() + “\n”; var test4 = jsonPath(json, “$.store..price”).toJSONString() + “\n”; var test5 = jsonPath(json, “$..book[(@.length-1)]”).toJSONString() + “\n”; var test6 = jsonPath(json, “$..book[-1:]”).toJSONString() + “\n”; var test7 = jsonPath(json, “$..book[0,1]”).toJSONString() + “\n”; var test8 = jsonPath(json, “$..book[:2]”).toJSONString() + “\n”; var test9 = jsonPath(json, “$..book[?(@.isbn)]”).toJSONString() + “\n”; var test10 = jsonPath(json, “$..book[?(@.price<10)]”).toJSONString() + “\n”;//条件建设 var test11 = jsonPath(json, “$..*”).toJSONString() + “\n”;//所有 var test12 = jsonPath(json, “$..book[?(@.title.indexOf(’the’) > -1)]”).toJSONString() + “\n”; //模糊检索

Js实现Cookie操作,JavaScript的Cookie操作,源代码 在JavaScript中如何实现Cookie操作呢，下面给出源代码实现： function SetCookie(name,value,days) { if(days == null) days = 30; var exp = new Date; exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + "="+ escape(value) +";expires="+ exp.toGMTString() + "; path=/"; } function GetCookie(name) { var arr = document.cookie.match(new RegExp("(^ )"+name+"=([^;]*)(;$)")); if(arr != null) return unescape(arr[2]); return null; }