react

最近做了一个将通话记录，语音转文字并可以在聊天记录里标注动机和摘要的需求， 上图只是一个小小的模块， 第一次接到使用到语音相关的需求，记录一下 上图是一个客服聊天记录的模块，语音转文字，将录音展示出来，可以音频播放，可以滑动进度条，倍速播放等等，以前自己心血来潮，使用原生js写过一个类似于网易音乐，播放音乐的播放器，包括进度条，音量调节啥的。 当然做项目吗，还是使用HTML自带的更好，省时省力高高效 我们的service后台前端工程使用的是react + ant-design + node作为中间层 后端使用的是Java 后端只需要给前端提供录音音频，再讲智能组语音转文字转成的文字传给我就好了， 在前端工程里，语音播放、倍速，进度条代码如下： 1、在state里定义了语音倍速的选择数组： 2、在render函数里渲染的时候使用audio标签，并遍历渲染倍速播放按钮，进度条啥的都有audio自带的属性实现了，就是这么简单 3、自定义切换倍速函数changeMultiple，嗯，不可避免的使用了原生JS获取了dom节点，然后给dom元素添加倍速属性playbackRate就可以了 一个小小的如上图所示的语音播放功能就实现了， 在实现需求的时候，不忘给自己充充电，顺便把video和audio自带的所有的属性、方法、事件都学习了一遍，感觉，嗯，真好用~~~

不可变的原始值和可变的对象引用 当JavaScript中指定的值是原始值（基本类型）即 Boolean，null，undefined，String 和 Number 时，将分配实际值。 原始值是不可更改的， 任何方法都无法更改或突变一个原始值。 let str1 = 'My string' ; let str2 = str1; str2 = 'My new string' ; console.log(str1); // 'My string' console.log(str2); // 'My new string' 但是，当指定的值是Array，Function 或 Object 时，将分配内存中对象的引用。 对象和原始值不同，首先它们是可变的，它们的值是可修改的： let obj1 = { name: 'Jim' } let obj2 = obj1; obj2.name = 'John' ; console.log(obj1); // { name: 'John' } console.log(obj2); // { name: 'John' } 原始值 的比较是值的比较，只有在它们的值相等时它们才相等。而 对象 的比较均是引用的比较，对象值都是引用，当且仅当它们引用同一个基对象时，它们才相等。 //原始值的比较 let str1 = "hello" ; let str2 =

有兴趣的朋友， 公众号发送【 虾皮 内推 】或者 扫描文章 末尾 二维码 添加微信， 联系KK大佬即可。 我也可以为你提供必要的帮助， 包括： 公司介绍 简历修改 必要的面试辅导等 有需要的朋友可以联系微信， Shopee 期待你的加入。 前端工程师 是Shopee团队的 重要组成部分 ，我们与后端工程师、设计师们紧密合作，实现高质量的Web应用。 我们使用各种现代化的前端工具，例如React，Vue.js等，并沉淀了大量的最佳实践经验。 我们中的部分人专注于架构设计，部分人专注于效率和工程化体系，但是我们中的所有人都是专业的JavaScript开发者。 初级前端开发工程师 外企氛围，蓝海市场，大牛多多，15天年假 15k-30k / 深圳 / 经验1-3年 / 本科及以上 工作职责: 负责网站前端开发，编写高质量、可维护性的代码，并撰写相关技术文档； 负责线上系统的维护和管理，保障系统稳定运行； 不断优化现有产品，提高系统速度、稳定性和可扩展性，不断提升用户体验； 研究和探索最新的前端技术，并应用到实际业务中； 参与团队基础技术、应用框架体系和工程化体系建设。 Preferred Skills 熟悉JavaScript、HTML、CSS等技术； 至少熟悉一种前端开发框架，并有实际的开发经验； 了解不同浏览器之间的特性差异，能够解决常见的浏览器兼容性问题；

翻译 | 《JavaScript Everywhere》第2章 项目简介（^_^） 写在最前面 大家好呀，我是毛小悠，是一位前端开发工程师。正在翻译一本英文技术书籍。 为了提高大家的阅读体验，对语句的结构和内容略有调整。如果发现本文中有存在瑕疵的地方，或者您有任何意见或者建议，可以在评论区留言，或者加我的微信：code_maomao，欢迎相互沟通交流学习。 (σﾟ∀ﾟ)σ..:*☆哎哟不错哦 第2章 项目简介 想象一下，你站在当地的一家小餐馆的店铺前，决定在那里点一个三明治。服务员把你点的菜都写在一张纸上，然后把纸递给厨师。厨师阅读订单，使用单独的配料来制作三明治，并将三明治交给服务员。服务员会把三明治拿给你吃。如果你想要一些甜点，这个过程会再次重复。 应用程序编程接口（API）是一组规范，它允许一个计算机程序与另一个计算机程序进行交互。 Web API的工作方式与订购三明治的方式几乎相同。客户端请求一些数据，该数据通过超文本传输协议（HTTP）传输到Web服务器应用程序，Web服务器应用程序接受请求并处理数据，然后将数据通过HTTP发送给客户端。在本章中，我们将探讨Web API的广泛内容，并通过将starter API项目克隆到本地计算机上来开始我们的开发。但是，在进行此操作之前，让我们先探讨将要构建的应用程序的需求。 在本书中

作者：Maxim Koretskyi 译文：Leiy https://indepth.dev/inside-fiber-in-depth-overview-of-the-new-reconciliation-algorithm-in-react/ React 是一个用于构建用户交互界面的 JavaScript 库，其核心 机制 就是跟踪组件的状态变化，并将更新的状态映射到到新的界面。在 React 中，我们将此过程称之为 协调 。我们调用 setState 方法来改变状态，而框架本身会去检查 state 或 props 是否已经更改来决定是否重新渲染组件。 React 的官方文档对 协调机制 进行了良好的抽象描述：React 元素、生命周期、 render 方法，以及应用于组件子元素的 diffing 算法综合起到的作用，就是协调。 从 render 方法返回的不可变的 React 元素通常称为 虚拟 DOM 。这个术语有助于早期向人们解释 React，但它也引起了混乱，并且不再用于 React 文档。在本文中，我将坚持称它为 React 元素的树。 除了 React 元素的树之外，框架总是在内部维护一个实例来持有状态（如组件、 DOM 节点等）。从版本 16 开始， React 推出了内部实例树的新的实现方法，以及被称之为 Fiber 的算法。 下文中，我们将结合

阿里@张克军翻译 当我们考虑如何构建一个新的网络应用—一个为现代浏览器设计的、具有用户对Facebook（我们已知的）所有期望的功能，我们现有的技术栈无法支持我们所需要的类似于桌面应用的感觉和性能。完全重写是非常罕见的，但在这种情况下，由于过去十年来Web技术发生了很多变化，我们知道这是我们实现性能和未来可持续发展目标的唯一途径。今天，我们就分享一下我们在重构Facebook.com时的经验教训，使用React（一种用于构建用户界面的声明式JavaScript库）和Relay（React的GraphQL客户端）来重构Facebook.com。 1. 开始 我们希望Facebook.com能够快速启动，快速响应，并提供高度互动的体验。虽然服务端驱动（server-driven）的应用程序可以提供快速启动时间，但我们不相信它能像客户端驱动（client-driven）的应用程序那样具有互动性和愉悦性。然而，我们相信我们可以构建一个客户端驱动的应用程序，并能提供具有竞争力的快速启动时间。 但是从头开始做一个客户端优先的APP，这带来了一系列新的问题。我们需要快速重建网站，同时解决速度和其他用户体验问题，而且在未来几年内能可持续的发展。在整个过程中，我们围绕着两个技术口号开展工作： 尽可能少，尽可能早。只提供所需要的资源，而且能在需要的时候及时送达。 服务于用户体验的工程体验

vue.js和vue-router和vuex快速上手知识 一直以来，认为vue相比react而言，学习成本会更低，会更简单，但最近真正接触后，发现vue的各方面都有做一些客户化的优化，有一些亮点，但也有一些很不顺手的地方，没有react的灵活度，但却有ng的方便性。要说vue和react哪个更适合做移动端，其实没有绝对的答案，喜欢就好。我希望能通过这篇文章能让大家迅速上手vue的全家桶。 本文的例子源码托管在github上，地址是 https://github.com/tianxiangbing/vue-demo 首先，我们用vue-cli搭一个vue的开发环境，目前vue-cli3.0也出来了，但使用者不多，中文文档也较少，更多配置都是vue.config.js里，这里配置是返回一个module,也是修改webpack的配置项，但其实还是很麻烦，这个不在本文主题内，省过... 1. 服务的搭建 安装vue-cli，建议安装2.x的版本，本文使用的是vue-cli3.0 npm install -g vue-cli 创建一个vue的项目，项目名称叫vue-demo vue create vue-demo 然后进入项目目录下执行安装依赖包 npm i 然后启动服务，执行命令 npm run serve ,你应该可以看到如下的结果： 看到这里，就算成功了，在浏览器中打开 http:/

全局引入： 第一步 ：全局安装 create-react-app npm install create-react-app -g 第二步 ：安装 yarn npm install -g yarn 第三步 ：安装 antd yarn add antd 第四步 ：安装 babel-plugin-import npm install babel-plugin-import --save-dev 第五步 ：暴露配置项 npm run eject 发现执行此操作报错了，不管他什么错，接着执行 yarn install 然后执行 npm run eject 此时可以成功 .会自动生成一个config的文件夹,时候我们先配置dev模式 第五点一步 ：打开config文件夹下面的webpack.config.dev.js文件 添加一下代码 (可要可不要) plugins: [ ' transform-runtime ' , [ ' import ' , { libraryName: ' antd ' , style: ' css ' }]] 但是当你执行npm start 的时候会发现不行 报错了. 那么此时只要是再执行一次npm install 就可以 然后执行 npm start 项目就可以运行啦 第六步 ：引入css文件 import ' antd/dist/antd.css '

Taro 是什么？ Taro 是由 京东 - 凹凸实验室 打造的一套遵循 React 语法规范的多端统一开发框架。 现如今市面上端的形态多种多样，H5、App (React Native)、微信小程序等各种端大行其道，当业务要求同时在不同的端都要求有所表现的时候，针对不同的端去编写多套代码的成本显然非常高，这时候只编写一套代码就能够适配到多端的能力就显得极为需要。 使用 Taro，我们可以 只书写一套代码 ，通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信小程序、H5、App、快应用等）运行的代码。同时 Taro 还提供开箱即用的 语法检测 和 自动补全 等功能，有效地提升了开发体验和开发效率。 Taro 能提供什么？ 一次编写，多端运行 既然是一个多端解决方案，Taro 最重要的能力当然是写一套代码输出多端皆可运行的代码。目前 Taro 已经支持一套代码同时生成 H5 和微信小程序，App（React Native）端也即将支持，同时诸如快应用等端也将于近期得到支持。 同时 Taro 也已经投入到了生产环境使用，目前已经支撑了一个 3 万行代码小程序 TOPLIFE 的开发，以及部分 京东购物 小程序和 一起有局 小程序，未来也将会支撑更多的京东核心业务小程序。 现代前端开发流程 和微信自带的小程序框架不一样，Taro 积极拥抱社区现有的现代开发流程，包括但不限于

关注「 前端向后 」微信公众号，你将收获一系列「用 心 原创」的高质量技术文章，主题包括但不限于前端、Node.js以及服务端技术 一.什么是前端工程？ 一个类似的术语是软件工程（Software Engineering）： Software engineering is the systematic application of engineering approaches to the development of software. 将工程方法系统化地应用到软件开发中，就叫软件工程 。那么，紧接着又有两个问题： 工程方法是什么？ 系统化怎么理解？ 工程是指使用科学原理设计和制造机器、结构等，比如修桥、铺路、建隧道、造车、盖房子： Engineering is the use of scientific principles to design and build machines, structures, and other items, including bridges, tunnels, roads, vehicles, and buildings. 具体到软件领域，指的是 以系统、严谨、可量化的方法开发、运营、维护软件 ，软件工程包括对这些方法的应用和研究： Software engineering the application of a systematic,