codesandbox

原文地址: medium.com/@TimKolb/cr… 译文地址： github.com/xiao-T/note… 本文版权归原作者所有，翻译仅用于学习。 每次实现一个新的 UI 组件时，我都是先实现布局，然后，mock 数据用于 defaultProps ，并提供一个空的点击监听模拟用户交互。然后，用真实的数据替换掉 mock 的函数和 props。 为了实现那些需要从服务端获取数据数据的组件，我一次次的重复着相同的操作。使用和配置 HTTP headers，反序列化逻辑、处理成功或者失败的回调、loading 状态等等，这就导致了代码的重复。 通信逻辑让可 复用的组件 来处理，是不是更好呢？ 💪 开始 React 应用中那些需要使用 API 的组件需要处理大量的问题。针对每个请求，你都需要处理 loading、错误和成功的状态。 把所有的功能整合到现有的组件中势必增加组件的复杂度，这并不符合 React 组件化思想。 计算机科学不再是新鲜事物，我们也发现了一些旧时代的规则和工具。其中之一就是：分离。 编写程序只做一件事情并做好 — Doug McIlroy 我们把 Unix 管道发明者的这个理念引入到 React 组件中，React 的组件代表着 Unix 系统中的程序。通过 props 控制组件的行为，实现万能的组件。JavaScript 中通用的类型就是函数 —

本次做后台管理系统，采用的是 AntD 框架。涉及到图片的上传，用的是AntD的 upload 组件。 我在上一篇文章《 AntD框架的upload组件上传图片时使用customRequest方法自定义上传行为 》中讲到：AntD 的 upload 组件有很多坑，引起了很多人的关注。折腾过的人，自然明白其中的苦楚。 今天这篇文章，我们继续来研究 AntD 的 upload 组件的另一个坑。 备注：本文写于2020-06-11，使用的 antd 版本是 3.13.6。 使用 AntD 的 upload 组件做图片的上传，效果演示 因为需要上传多张图片，所以采用的是照片墙的形式。上传成功后的界面如下： （1）上传中： （2）上传成功： （3）图片预览： 代码实现 首先，你需要让后台同学提供好图片上传的接口。上一篇文章中，我们是把接口调用直接写在了 <Upload> 标签的 action 属性当中。但如果你在调接口的时候，动作很复杂（比如根据业务要求，需要连续调两个接口才能上传图片，或者在调接口时还要做其他的事情），这个 action 方法就无法满足需求了。那该怎么做呢？ 好在 AntD 的 upload 组件给我们提供了 customRequest 这个方法： 关于customRequest 这个方法， AntD 官方并没有给出示例，他们只是在 GitHub 上给出了这样一个简短的介绍

实现 React Hooks UI 开发有两个问题： 展示复用 逻辑复用 展示复用目前基本使用组件化来解决，逻辑复用一直以来都没有特别好的解决方案。React 从一开始的 mixin ，到 高阶组件 以及 Render Props ，都是在试图解决这个问题，但是都引入了一些别的问题。 Mixins 命名空间冲突 数据来源不清晰 Higher-order Components props 属性来源不清晰 props 上命名冲突 额外的组件渲染带来性能问题 Render Props(Vue 中的 Renderless Components) 解决了 命名空间冲突、数据来源不清晰的问题，仍然会带来额外组件实例的性能消耗 Hooks 在前段时间 Hooks 发布后，我认为 React 找到了【有状态】组件【函数式】【复用逻辑】的解决方案。 先说有状态：一般来说，无状态组件直接使用函数组件就行，省去了实例化的样板代码和性能消耗。不涉及到 state 的存取，可以直接写个 helper 函数处理一下，方便又快捷。 再说函数式：class 组件是面向对象的，每一次声明、声明周期都逃不开 this，而 hooks 更加函数式，调用一个函数，传入的是初始值，返回修改值，没有副作用。 最后说复用逻辑：DRY，一般来说，相同的代码不写第二次，在 class 组件中，通过生命周期方法对 state 修改

实现 React Hooks UI 开发有两个问题： 展示复用 逻辑复用 展示复用目前基本使用组件化来解决，逻辑复用一直以来都没有特别好的解决方案。React 从一开始的 mixin ，到 高阶组件 以及 Render Props ，都是在试图解决这个问题，但是都引入了一些别的问题。 Mixins 命名空间冲突 数据来源不清晰 Higher-order Components props 属性来源不清晰 props 上命名冲突 额外的组件渲染带来性能问题 Render Props(Vue 中的 Renderless Components) 解决了 命名空间冲突、数据来源不清晰的问题，仍然会带来额外组件实例的性能消耗 Hooks 在前段时间 Hooks 发布后，我认为 React 找到了【有状态】组件【函数式】【复用逻辑】的解决方案。 先说有状态：一般来说，无状态组件直接使用函数组件就行，省去了实例化的样板代码和性能消耗。不涉及到 state 的存取，可以直接写个 helper 函数处理一下，方便又快捷。 再说函数式：class 组件是面向对象的，每一次声明、声明周期都逃不开 this，而 hooks 更加函数式，调用一个函数，传入的是初始值，返回修改值，没有副作用。 最后说复用逻辑：DRY，一般来说，相同的代码不写第二次，在 class 组件中，通过生命周期方法对 state 修改

摘要： React示例教程。 原文： 快速了解 React Hooks 原理 译者：前端小智 到 React 16.8 目前为止，如果编写函数组件，然后遇到需要添加状态的情况，咱们就必须将组件转换为类组件。 编写 class Thing extends React.Component ，将函数体复制到 render() 方法中，修复缩进，最后添加需要的状态。 今天，可以使用 Hook 获得相同的功能，并为自己节省了工作时间。在本文中，主要介绍 useState hook。 useState 做啥子的 useState hook 允许咱们向函数组件添加状态，我们通常称这些为“ hooks”，但它们实际上是函数，与 React 16.8 捆绑在一起。 通过在函数组件中调用 useState ，就会创建一个单独的状态。 在类组件中， state 总是一个对象，可以在该对象上添加保存属性。 对于 hooks，state 不必是对象，它可以是你想要的任何类型-数组、数字、布尔值、字符串等等。每次调用 useState 都会创建一个 state 块，其中包含一个值。 示例1：使用 useState 显示/隐藏组件 这个示例是一个组件，它显示一些文本，并在末尾显示一个 read more 链接，当单击链接时，它展开剩下的文本。 import React, { useState } from

原文地址： JSON Parser with JavaScript 原文作者： Tan Li Hau 译文出自： 掘金翻译计划 本文永久链接： github.com/xitu/gold-m… 译者： Gavin-Gong 校对者： vitoxli ， Chorer 这周的 Cassidoo 的每周简讯有这么一个面试题： 写一个函数，这个函数接收一个正确的 JSON 字符串并将其转化为一个对象（或字典，映射等，这取决于你选择的语言）。示例输入： fakeParseJSON('{ "data": { "fish": "cake", "array": [1,2,3], "children": [ { "something": "else" }, { "candy": "cane" }, { "sponge": "bob" } ] } } ') 复制代码 一度我忍不住想这样写： const fakeParseJSON = JSON .parse; 复制代码 但是，我记起我写过一些关于 AST 的文章： 使用 Babel 创建自定义 JavaScript 语法 一步一步教你写一个自定义 babel 转化器 使用 JavaScript 操作 AST 其中包括编译器管道的概述，以及如何操作 AST，但是我还没有详细介绍如何实现解析器。 这是因为在一篇文章中实现 JavaScript

歪式絮叨：原本打算只用一篇文章总结下防抖和节流的，但是写着写着发现挺有意思的。所以准备会分成 3-4 篇来写了，单独的防抖和节流的实现，然后在去分享一下知名库的源码。今天先跟歪马一起看看防抖的实现吧。其他内容敬请期待~！ 歪老师 ：“马同学，防抖和节流你知道吗？起来说一下。” 马同学 ：“老师，我不知道呀，都没听说过。” 歪老师 ：“好吧，那今天我们就先来讲讲 防抖 吧。先从基本的概念以及使用场景说起”。 一、概念 防抖 debounce 和节流 throttle 的概念并不是 JS 所特有的。它们是在对函数持续调用时进行不同控制的两个概念。今天我们先介绍防抖。 防抖 是为了避免用户无意间执行函数多次。比如有些用户喜欢在点击的时候使用 double click 双击，或者就是手抖连续点了两下，这就可能会导致一些意想不到的问题。 通过防抖可以 在事件触发一定时间后没有再次触发同一事件时 ，再去执行相关的处理函数。 就好比你去菜市场买菜，到某个小摊上开始挑菜，接连挑好一袋又一袋放在摊主面前，摊主并不会每一袋都给你结账，而是会等着问你：“还要别的吗？”，等你确认完不要了，才会结账。 你可以通过歪马写的这个 demo 查看常规无限制函数调用和防抖(节流)之后的 可视化对比 ，完整 demo 地址如下： codesandbox.io/s/yibubupia… 。 二、作用&应用场景

3 月，跳不动了？>>> 团队： skFeTeam  本文作者：高扬 介绍 TypeScript 是一种由微软开发的开源、跨平台的编程语言。它是JavaScript的超集，最终会被编译为JavaScript代码。 TypeScript可以解决JavaScript弱类型和没有命名空间，难以模块化的问题，同时也增强了代码的可读性，在团队协作和大型项目中体现出更大的优势。 本文将从“基础用法、高阶用法、模块、react项目实践中的应用”四个方向展开文章，方便大家理解，都会备注列子、codesandbox上的远程代码。 基础用法 1.变量类型 代码示例 src/components/baseVar.tsx TypeScript提供与JavaScript几乎相同的数据类型（ 布尔值boolean，字符串string，数字number，数组[]，元组 ），此外还提供了 枚举enum 类型。 当不确定变量的数据类型或者数据类型会在代码运行过程中变化时，使用 any 来标记这些变量，使它们通过编译阶段的检查。 object 表示原始类型以外的类型，即number,string,boolean,symbol,null,undefined以外的类型。 void 用于表示没有任何类型，通常用于方法没有返回值时。void类型的变量只能赋值undefined或者null。 null 和 undefined

3 月，跳不动了？>>> 团队： skFeTeam  本文作者：高扬 介绍 TypeScript 是一种由微软开发的开源、跨平台的编程语言。它是JavaScript的超集，最终会被编译为JavaScript代码。 TypeScript可以解决JavaScript弱类型和没有命名空间，难以模块化的问题，同时也增强了代码的可读性，在团队协作和大型项目中体现出更大的优势。 本文将从“基础用法、高阶用法、模块、react项目实践中的应用”四个方向展开文章，方便大家理解，都会备注列子、codesandbox上的远程代码。 基础用法 1.变量类型 代码示例 src/components/baseVar.tsx TypeScript提供与JavaScript几乎相同的数据类型（ 布尔值boolean，字符串string，数字number，数组[]，元组 ），此外还提供了 枚举enum 类型。 当不确定变量的数据类型或者数据类型会在代码运行过程中变化时，使用 any 来标记这些变量，使它们通过编译阶段的检查。 object 表示原始类型以外的类型，即number,string,boolean,symbol,null,undefined以外的类型。 void 用于表示没有任何类型，通常用于方法没有返回值时。void类型的变量只能赋值undefined或者null。 null 和 undefined