react

3 月，跳不动了？>>> 云栖号： https://yqh.aliyun.com 第一手的上云资讯，不同行业精选的上云企业案例库，基于众多成功案例萃取而成的最佳实践，助力您上云决策！ 在各个领域，Rust 都已经成为一流的语言。在 Discord，我们看到了 Rust 在客户端和服务端的成功。举例来说，我们在客户端使用它实现了 Go Live 的视频编码管道，在服务端，它则被用于 Elixir NIFs。最近，我们通过将服务的实现从 Go 切换到 Rust，极大地提升了该服务的性能。本文阐述了重新实现服务为何是有价值的、该过程是如何实现的以及由此带来的性能提升。 Read States 服务 Discord 是一家以产品为中心的公司，所以我们先介绍一下产品的背景信息。我们从 Go 切换到 Rust 的服务叫做“Read States”服务。它的唯一目的是跟踪用户阅读了哪些频道和信息。每当用户连接 Discord 的时候，每当消息发送的时候，每当消息被读取的时候，都会访问 Read States。简而言之，Read States 处于最关键的位置。我们希望能够保证 Discord 始终让人感觉快捷无比，所以必须要确保 Read States 是非常快速的。 在 Go 的实现中，Read States 无法支持产品的需求。在大多数情况下，它都是很快速的

3 月，跳不动了？>>> react和vue都是做组件化的，整体的功能都类似，但是他们的设计思路是有很多不同的。使用react和vue，主要是理解他们的设计思路的不同。 1.数据是不是可变的 react整体是函数式的思想，把组件设计成纯组件，状态和逻辑通过参数传入，所以在react中，是单向数据流，推崇结合immutable来实现数据不可变。react在setState之后会重新走渲染的流程，如果shouldComponentUpdate返回的是true，就继续渲染，如果返回了false，就不会重新渲染，PureComponent就是重写了shouldComponentUpdate，然后在里面作了props和state的浅层对比。 而vue的思想是响应式的，也就是基于是数据可变的，通过对每一个属性建立Watcher来监听，当属性变化的时候，响应式的更新对应的虚拟dom。 总之，react的性能优化需要手动去做，而vue的性能优化是自动的，但是vue的响应式机制也有问题，就是当state特别多的时候，Watcher也会很多，会导致卡顿，所以大型应用（状态特别多的）一般用react，更加可控。 2.通过js来操作一切，还是用各自的处理方式 react的思路是all in js，通过js来生成html，所以设计了jsx，还有通过js来操作css，社区的styled-component

3 月，跳不动了？>>> 在平平淡淡的工作中，突然要准备一个直播分享，犹如平地一声雷。预知雷声大不大，请看下文&视频完整版： B站回播地址 、 牛客网录播地址 。 本次分享由 腾讯犀牛鸟「云开发」校园技术布道师养成计划 邀请，为年轻程序员解答，如何进入学习提升自己、如何找到最适合自己的技术路线以及如何才能在毕业后进入大厂等问题。 本文从两个模块展开，首先分享从小白时期成长为高级工程师的成长历程，然后探讨程序员应该从哪些方面着手，提升自身的技术实力。 一、成长历程分享 我的成长历程大致分为 3 个阶段，重构开发阶段、前端开发阶段，然后到全栈开发。 重构开发 2015 年处于重构开发阶段。 当时作为一个硬件转软件的大三实习生，实习工作前只学习了一个月前端相关的知识，基础薄弱，一开始每天的工作就是 HTML + CSS 写静态页面，或者就是直接扒网站，改改样式和文案。在项目前后端分离后，才开始做动画和交互的开发工作。 前端开发 2016 - 2018 处于前端开发阶段。 2016 年是特别好找工作的一年，投简历有大把的面试，会 HTML + CSS + jQuery + 有项目经验就可以当一个初级的前端开发。在日常工作之余，每周会定一些任务看哪本书，看哪个技术的文档，也开始写技术博客。在工作中，参与开发公司的官网系统，在这个项目的参与过程中，前端构建工具 fis3、css 预编译工具

3 月，跳不动了？>>> 提到《俄罗斯方块》（Tetris），那真是几乎无人不知无人不晓，除此之外，相信许多程序员第一个编程实践项目就是编写一个俄罗斯方块或者是坦克大战 这类的游戏各种编程语言的实现版本都有，今天和大家分享一个用React 编写的俄罗斯方块，在移动端和 PC 都能运行。 先上效果让你们预览一下： Redux 状态预览 这个游戏的框架使用的是 React + Redux，其中再加入了 Immutable，用它的实例来做来Redux的state。 Immutable 是一旦创建，就不能再被更改的数据。对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象。 让我们看下面一段代码： functionkeyLog(touchFn){ letdata = {key:'value'}; f(data); console.log(data.key);// 猜猜会打印什么？ } 不查看f，不知道它对 data 做了什么，无法确认会打印什么。但如果 data 是 Immutable，你可以确定打印的是 value： functionkeyLog(touchFn){ letdata = Immutable.Map({key:'value'}); f(data); console.log(data.get('key'));// value }

Tailwind CSS Tailwind是用于构建自定义用户界面的实用CSS框架。 每个Tailwind小应用都有多种尺寸，这使得创建响应式界面变得非常简单。 您可以自定义颜色，边框尺寸，字体，阴影等等，没有任何限制。 Pretty Checkbox 这是一个纯CSS库，用于创建漂亮的复选框和单选按钮。 它提供了不同的形状（正方形，曲线，圆形），选择方式（默认，填充，thick），颜色（主要，成功，信息），颜色类型（实心，轮廓）和动画。 它支持自定义字体图标，SVG图标和SCSS自定义。 Bulma 这是一个基于Flexbox的免费开源CSS框架。 Bulma有39个.sass文件，可以单独导入。 您可以轻松地自定义它，并使用您喜欢的颜色和变量创建自己的主题。 Bulma中的每个元素都是移动端优先的，并针对小屏幕进行了优化。 React Static 由Nozzle.io创建的React静态网站框架。 它具有令人难以置信的快速运行时间和性能，并提供惊人的用户体验。 它完全使用React构建，支持所有React生态系统，包括CSS-in-JS库，GraphQl和Redux。 Bottender Bottender是一个开发跨平台机器人的JavaScript框架。 它是用ES6 / ES7语法编写的，完全支持异步等待功能。 您可以使用会话存储，HTTP服务器框架或将其连接到任何平台。

前几天有小伙伴和我聊天，谈到现在前端面试越来越难，动不动就是xxx原理，有没有看过xx源码之类的问题, 之后就问我应该怎么来学习现在主流框架的源码，于是有了这一篇文章. 说到使用react那很简单 react 和reactdom 两个文件引入一下就ok，但是这两个文件是经过编译打包，我们无法在里面进行断点调试或者console调试， 所以想学习框架源码，第一步就要在本地运行源码这样才能在内部进行各种输出调试。 好了闲话不说，直接开始正题 React源码获取 在这里我选择用的的版本是16.10.0 ， 获取方式当然是react的git仓库 创建测试项目 在本地通过create-react-app创建测试项目 创建完项目之后要修改源码以及webopack配置,需要 将‘旺旺大礼包’给解出来 npm run eject 项目目录下会多出一个config文件 将创建的项目替换为下载的源码文件 将下载16.10.0的项目源码丢到src目录下 更改配置文件 ==/config/webpack.config.js== 在运行项目的时候编译我们导入的源码为 resolve:{ ..., alias: { // Support React Native Web // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future

随着 React 16.3.0 的发布，context api 也有了很大的更新。我已经从旧版的 api 更新到了新版。这里就分享一下我（作者）的心得体会。 回顾 下面是一个展示如何使用旧版 api 的例子： function Usage(props) { return ( <Toggle onToggle={props.onToggle}> <Toggle.On>The button is on</Toggle.On> <Toggle.Off>The button is off</Toggle.Off> <div> <Toggle.Button /> </div> </Toggle> ) } 上面的代码会返回一个复合组件 Toggle 。这个组件可以让子组件共享隐式的状态。在某些简单的情况下可以用 React.Children.map 来处理。但是，这个例子需要使用 context api 来达到在 React 的某个组件树的任意节点分享 state 的目的。 旧的 Context Api 这是一个旧版 context api 的应用例子： const TOGGLE_CONTEXT = "__toggle__"; // Toggle on function ToggleOn({ children }, context) { const { on } = context

redux 全局状态管理 react-redux 优化模块 优化redux的使用过程 npm install redux react-redux 通过react-redux 提供的provider提供器 将全局状态对象挂载到根元素的上下文上 import Provider from 'react-redux'import store from './store/store.js'...<Provider store = {store}> <App></App></Provider>... 在组件中使用全局状态值 通过react-redux 提供的connect 从跟组件的上下文上获取store对象， 通过高阶组件将获得到的store传给目标组件的props import {connect} from 'react-redux' class Son1 ... {} connect(state=>state)(Son1) 组件中修改全局状态值 不需要写组件监听 组件 -> actionCreator -> redcuer ->组件（监听更新） 组件的里的监听不用写了 actionCreator 默认做两个事情1.创建action 2.通过dispath 发送action actionCreator 使用插件之后只要 创建action 在组件里发送 react-redux

react 脚手架工具 npm install create-react-app -g create-react-app -V create-react-app 项目名字 通过脚手架工具创建项目 注意：部分插件的版本依赖问题 需要打开旺旺大礼包 npm run eject 打开旺旺大礼包之前执行一次本地git仓库的提交 npm start 跳转到实例界面项目就算创建ok 基本指令 npm start 本地开发环境运行 npm run eject 解开插件包 npm run build 编译打包 基本目录结构 build 打包后的文件目录 config 项目的配置目录 script js启动脚本 src 项目的源码目录 .gitignore git 上传的忽略文件 package.josn 组件的创建 15 createClass 方法 16 通过class关键字或者函数来创建组件 类组件函数组件 类组件 （功能组件，智能组件,有状态组件） 用class 关键字创建的组件 有state值 能修改state值 能写jsx 有生命周期 函数组件 (ui组件，木偶组件，傻瓜组件，无状态组件) 用函数创建的组件 没有state 就不能修改数据 没有生命周期 只能写jsx 只能接受props 渲染界面 受控组件 非受控组件 不是一种新的组件而是获取表单数据的2中方式 非受控组件 通过ref

前言 　 　学习总结使用，博客如中有错误的地方，请指正。改系列文章主要记录了搭建一个管后台的步骤，主要实现的功能有：使用路由模拟登录、退出、以及切换不同的页面；使用redux实现面包屑；引入使用其他常用的组件，比如highchart、富文本等，后续会继续完善。 　　 github地址： https://github.com/huangtao5921/react-antDesgin-admin （欢迎Star） 　　项目展示地址： https://huangtao5921.github.io/react-admin/ 一、认识目录文件 　 　上一篇博客 react + react-router + redux + ant-Desgin 搭建react管理后台 -- 初始化项目（一） 已经初始化了一个基本的项目，接下来认识一下整个项目目录结构： ├── config // webpack配置，里面还包含其他的文件 ├── node_modules // 项目依赖包文件夹 ├── piblic │ ├── favicon.ico // 浏览器icon │ ├── index.html // 单页面入口文件 │ ├── manifest.json ├── src │ ├── App.css // 可删除 │ ├── App.js │ ├── App.test.js // 可删除 │ ├──