Binnwu

系列博客: 用通俗的语言和涂鸦来解释 React 术语 图解 React (本文) 图解 React Native 组件、Props 和 State 深入理解 Props 和 State React Native vs. Cordova、PhoneGap、Ionic，等等 在 React、ReactJS、React.js、React Native… 这些有些相似的名词你最近听过多少遍了？对于它们究竟是什么你是否感到困惑？ 如果你是一名设计师，你所在的团队使用(或正在考虑使用)的技术是 React ，或者你只是单纯对 “React” 比较好奇的话，那么本文就是为你而准备的。 在文本中，我只使用朴实的语言和插图来解释 React 家族中的各种术语，并深入探索究竟是什么使得 React 如此特别。本文中并不需要任何代码知识便可阅读。我希望你先熟悉一些概念，从而不至于在后面的学习过程中感到绝望。如果后面需要温故而知新的话，欢迎随时回来阅读。 准备好了吗？我们开始了！ 学习目标读完本文后，希望你能够重新回到这里，并能够轻松回答下列问题: 什么是 DOM ？ 什么是 React ？它的哪些 ...

系列博客: 用通俗的语言和涂鸦来解释 React 术语 图解 React 图解 React Native 组件、Props 和 State（本文） 深入理解 Props 和 State React Native vs. Cordova、PhoneGap、Ionic，等等 今天我们来学习 React 里最重要的三个概念: 组件、prop 和 state ，以及 prop 和 state 之间的区别。如同之前的文章，我还是会尝试用通俗的语言来解释这些概念。因此，阅读本文同样不需要任何 JavaScript 基础。 在本章中你根本找不到任何 JavaScript 代码，我将用一种简单的标识语言来帮助你理解主要的概念，在以后的文章里我再用 JavaScript 代码详细讲解。一步一个脚印嘛，我相信这种方法对于学习 React 或其他技术都是有效的，尤其是当你没有太多编程经验时。要是将 React 的概念和 JavaScript 的细节混在一起的话，很可能会令你不知所措！ 学习目标当你读完本文后希望你能重新回到这里，并能够轻松回答以下问题: 什么是 prop ？ 什么是 state ？ ...

系列博客: 用通俗的语言和涂鸦来解释 React 术语 图解 React 图解 React Native 组件、Props 和 State 深入理解 Props 和 State（本文） React Native vs. Cordova、PhoneGap、Ionic，等等 在上篇文章中，我们介绍了组件、props 和 state 。 props 和 state 的区别相当明显，确定何时使用 props 和 state 似乎也很简单。举个例子，屋顶的颜色自然就是 prop ，因为颜色是屋顶的固有属性。另一方面，门的开关状态很显然是 state ，因为门在创建后还可以打开或关上。然而在本文中，我们将来挑战这一思维方式！ 没开玩笑？！？没错，你所看到的东西既可以是 prop，又可以是 state 。并没有绝对的界限。我将介绍一种更有用、偏实战的方式来思考 prop 和 state 。 学习目标当你读完本文后希望你能重新回到这里，并能够轻松回答以下问题: props 和 state 的主要用途是什么？ “state 提升”的含义是什么？在什么场景下需要提升 state ？ 新成员你注 ...

在 上一篇文章 ,我解释了像 JavaScript 这样的自动内存管理语言如何与内存一起工作，我还解释了像 C 语言这种手动内存管理如何工作。 当我们谈论 ArrayBuffers 和 SharedArrayBuffers 的时候，为什么花了大篇幅介绍内存管理呢？这是因为 Arraybuffer 为您提供了一种手动处理某些数据的方法，即使您使用的是具有自动内存管理功能的 JavaScript。 为什么你要这么做呢？正如我们在上一篇文章中谈到的，自动内存管理是一把双刃剑，这对开发人员来说更容易了，但它增加了一些开销。在某些情况下，这种开销会导致性能问题。例如，当你在 JS 中创建一个变量时，引擎必须猜测这是什么类型的变量，以及它应该如何在内存中表示，正因为引擎的这种猜测机制，JS 引擎通常会预留比它真正需要的变量多的多的空间。根据变量的不同，内存槽可能是所需的 2-8 倍，这可能会导致大量内存浪费。 此外，创建和使用 JS 对象的某些模式会使收集垃圾变得更加困难。如果您正在进行手动内存管理，你可以灵活的选择当前程序所需的内存分配和垃圾回收策略。 在大多数对性能不太敏感的场景无需担心自动内 ...

系列博客: 用通俗的语言和涂鸦来解释 React 术语 图解 React 图解 React Native (本文) 组件、Props 和 State 深入理解 Props 和 State React Native vs. Cordova、PhoneGap、Ionic，等等 在上一篇文章中，我们介绍了什么是 React 以及是什么使得它如此特别。今天我们将介绍 React Native: 它是做什么的，它出自何处，它和 React 有哪些不同之处，以及它为何如此令人振奋。 学习目标当你读完本文后，希望你能重新回到这里，并能够轻松回答以下问题: 什么是 React Native ？为什么它的名字中有 “Native” 字样？ 为什么 React Native 如此之酷？ 我们可以分别使用 React Native 和 React 来开发什么？ 为什么会出现 ReactDOM ？它是做什么的？ React 渲染器 ( renderer )是用来做什么的？ React Sketch.app 工作原理是什么？ ReactVR 的工作原理是什么？ 什么是 ReactJS ？React.js ...

在 上一篇文章 ,我谈到了使用 SharedArrayBuffers 如何导致竞态条件(race conditions)。这使得使用 SharedArrayBuffers 变得困难。我不建议应用程序开发人员直接使用 SharedArrayBuffers。 但是有多线程编程经验的 library 开发人员可以使用这些新的底层 api 来创建封装的工具。然后，应用程序开发人员可以使用这些工具，而无需直接接触 SharedArrayBuffers 或 Atomics 。 即使不直接使用 SharedArrayBuffers 和 Atomics ，我认为理解它们是如何工作的仍然很重要。因此，在本文中，我将解释并发会带来什么类型的竞态条件(race conditions)，以及 Atomics 如何避免它们。 但是首先，什么是竞态条件？ 竞态条件: 你以前可能见过的一个例子当您有一个变量需要在两个线程之间共享时，可能会发生一个非常简单的竞态条件(race conditions)示例。假设一个线程想要加载一个文件，另一个线程检查它是否存在。他们共享一个变量 fileExists 进行交流。最初， ...

背景目前前后端的数据传递普遍用 JSON，但仍有些后端同学返回的数据格式不标准（此处暂不考虑和后端扯皮强势让其修复的因素），那拿到了这种非标准化的数据格式，前端就手足无措了么，这是不应该的。 如后端返回的一段 JSON 数据结构如下 1234567891011121314151617{newValue: "{ "auctionMode":"XCP", "countdownDuration":0, "createTime":1576810059073, "customPriceButton":"['200','500','1000','1500','-1']", "defaultTag":1, "editedBy":"测试标使用账号", "editedById ...

1. 阶段一 上传图片 base64之前使用读取图片 base64 位码的形式做图片上传。前端将图片转为 base64，后端再做解析上传。 12345<input type="file" accept="{this.state.inputAccept}" onChange="{this.uploadImg}"/> 12345678910uploadImg = (event) => { const file = event.target.files[0]; const reader = new FileReader(); //将本地图片转为base 64 reader.readAsDataURL(file); reader.onload = (e) => { // 图片的base64 console.log(e.target.result); };}; 2. 阶段二 通过 formData 上 ...