技术

遇到问题 今天遇到一个 useEffect 的问题，遇到一个问题：在 useEffect 里面发异步请求，然后第二个参数的依赖也是异步请求之后得到的结果，然后就导致最终结果会请求两次 useEffect 里的函数。 const [metaKey, setMetaKey] = useState<string[]>([]) // useEffect1 useEffect(() => { getServiceCoreIndexParam().then((res: IResult) => { setMetaKey(res.data.defaultValue) return res.data }) }, []) // useEffect2 useEffect(() => { getAdvisorIndexTable({ visitdate: props.visitdate, advisorSupervisor: props.advisorSupervisor, comparevisitdate: props.comparevisitdate, metaKeys: metaKey || [] }).then((res: IResult) => { res.success && setTable(res.data) }) }, [props.visitdate, props.advisorSupervisor, metaKey, props.comparevisitdate]) 分析一下这段代码，首先在组件 mount 的时候，useEffect2 会调用一次 getAdvisorIndexTable，当 useEffect1 执行完毕之后 setMetaKey 后，由于 metaKey 发生改变，导致 getAdvisorIndexTable 还会调用一次，这很明显是我们不想看到的结果，因为这只是一个默认请求，然而发了两次请求。...

网上各种言论说 React 上手比 Vue 难，可能难就难不能深刻理解 JSX，或者对 ES6 的一些特性理解得不够深刻，导致觉得有些点难以理解，然后说 React 比较难上手，还反人类啥的，所以我打算写两篇文章来讲新手学习 React 的时候容易迷惑的点写出来，如果你还以其他的对于学习 React 很迷惑的点，可以在留言区里给我留言。 为什么要引入 React 在写 React 的时候，你可能会写类似这样的代码： import React from 'react' function A() { // ...other code return <h1>前端桃园</h1> } 你肯定疑惑过，下面的代码都没有用到 React，为什么要引入 React 呢？ 如果你把 import React from ‘react’ 删掉，还会报下面这样的错误： 那么究竟是哪里用到了这个 React，导致我们引入 React 会报错呢，不懂这个原因，那么就是 JSX 没有搞得太明白。 你可以讲上面的代码(忽略导入语句)放到在线 babel 里进行转化一下，发现 babel 会把上面的代码转化成: function A() { // ...other code return React.createElement("h1", null, "前端桃园"); } 因为从本质上讲，JSX 只是为 React.createElement(component, props, ...children) 函数提供的语法糖。...

文章首发于个人博客 这是我 Deep In React 系列的第二篇文章，如果还没有读过的强烈建议你先读第一篇：详谈 React Fiber 架构(1)。 前言 我相信在看这篇文章的读者一般都已经了解过 React 16 以前的 Diff 算法了，这个算法也算是 React 跨时代或者说最有影响力的一点了，使 React 在保持了可维护性的基础上性能大大的提高，但 Diff 过程不仅不是免费的，而且对性能影响很大，有时候更新页面的时候往往 Diff 所花的时间 js 运行时间比 Rendering 和 Painting 花费更多的时间，所以我一直传达的观念是 React 或者说框架的意义是为了提高代码的可维护性，而不是为了提高性能的，现在所做的提升性能的操作，只是在可维护性的基础上对性能的优化。具体可以参考我公众号以前发的这两篇文章： 别再说虚拟 DOM 快了，要被打脸的 深入理解虚拟 DOM，它真的不快 如果你对标题不满意，请把文章看完，至少也得把文章最后的结论好好看下 在上一篇将 React Fiber 架构中，已经说到过，React 现在将整体的数据结构从树改为了链表结构。所以相应的 Diff 算法也得改变，以为以前的 Diff 算法就是基于树的。 老的 Diff 算法提出了三个策略来保证整体界面构建的性能，具体是： Web UI 中 DOM 节点跨层级的移动操作特别少，可以忽略不计。 拥有相同类的两个组件将会生成相似的树形结构，拥有不同类的两个组件将会生成不同的树形结构。 对于同一层级的一组子节点，它们可以通过唯一 id 进行区分。 基于以上三个前提策略，React 分别对 tree diff、component diff 以及 element diff 进行算法优化。 具体老的算法可以见这篇文章：React 源码剖析系列 － 不可思议的 react diff...

我发布了我的第一个 npm 组件，一个基于 react 的 3d 标签云组件。在这途中我也是遇到了很多的坑，花在完善整个发布流程的时间远多于写这个组件本身的时间，所以我记录下我觉得一个正常的 react 组件的发布流程 最后记录这篇文章花的时间比我完成整个组件的时间都多，最终希望能给新手带来帮助 在整个发布组件的过程我做了如下几件事儿： 开发组件 编写 Readme 推送到 github，并且把 demo 放到 github page 上 发布组件到 npm 上 开发组件 创建项目文件夹并初始化 npm package ，确保你创建的组件名称没有在 npm 上被使用过， 这里我们用 react-demo 作为示例 mkdir react-demo cd react-demo npm init npm init 是生成初始的 package.json 的命令，在 npm init 的时候，你可以根据你自己的需要进行填写你的组件信息。或者直接使用 npm init -y 采用默认的，后面自己再去修改。 首先安装 react 相关的包： npm i react react-dom -D 采用 babel 编译相关的依赖： npm i @babel/cli @babel/core @babel/preset-env @babel/preset-react -D 采用 webpack 做构建，webpack-dev-server 作为本地开发服务器，所以需要安装如下依赖：...

HTML 与 CSS 《Head First HTML与CSS(第2版)》–豆瓣评分 9.3。入门真的是经典书籍，手把手教学，丰富的案例让你从 0 开始学前端。 《CSS权威指南(第三版)》–豆瓣评分 8.5。这本书也是非常的经典了，2007 年的书了，但是无不影响这本书作为 CSS 的经典著作，把原理讲得非常的通透，除了 w3c 标准，算最权威的一本了，毕竟权威指南。这本书都是 css 2.1 的，与张鑫旭的《CSS 世界》可以说是一个类别的，我没看过这本书，但是据我朋友说没有权威指南好，口水话太多，也许是让读者好理解，权威指南这本我是看过的，学 CSS 必读经典。 《CSS揭秘》–豆瓣评分9.4。神书，47 和 css 技巧让你在面对各种 css 问题的时候游刃有余。豆瓣评分 9.4 ，是 css 书籍中评分最高的了，css 进阶必备。 总结：所以对于 css 来说，《Head First HTML与CSS(第2版)》是入门，权威指南是基础，css 揭秘是进阶，可以按照这个顺序来阅读。 JavaScript 《javascript语言精粹》–豆瓣评分 9.1。这本书可以在入门之前了解一下基本语法，以及在学习之前可以了解下 JS 里面的精粹以及糟粕，虽然这本书很薄很薄，但是值得反复去读的一本书，当时学习前端半年，一年再回来看这本书会跟你第一看应该有更深刻的理解。 《JavaScript DOM编程艺术(第2版)》– 豆瓣评分 8.7。本 书在简洁明快地讲述JavaScript和DOM的基本知识之后，通过几个实例演示了专业水准的网页开发技术，透彻阐述了平稳退化等一批至关重要的 JavaScript编程原则和最佳实践。 《JavaScript权威指南》：犀牛书是每个FE都绕不过的一本书，可以先大致通读几遍，也可以把其当作工具书，时时翻阅。 《JavaScript高级程序设计》：红宝书虽然号称高级，但其实是帮助入门的，Zakas大神把概念深入浅出，将JavaScript的语法要点讲清楚明白。小红书配合犀牛书，相互印证，谁读谁知道。 《你不知道的JavaScript 上中下》：这本绝对是神书，让你了解JavaScript不为人知的另一面，把闭包、异步这些讲得很通透。 《ES6 标准入门（第3版）》–豆瓣评分 8.9。阮老师的书，国内最好的一本 ES6 ES7 ES8 的入门书籍，第三版相对于第二版多了 ES8 的内容，所以也厚了很多。因为现在框架盛行，特别是 React 基本是已经完全拥抱了 ES6 了，还没学 ES6 赶紧补起来，不然要落后了。 《深入理解 ES6》–豆瓣评分9....