qq_41914181的博客

深入JSX实际上，jsx仅仅只是React.createElement(component,props,...children)函数的语法糖。如下JSX代码：<MyButton color="blue" shadowSize={2}>Click Me</MyButton>会编译为：React.createElement( MyButton, {color:'blue',shadowSize:2}, 'Click Me)如果没有子节点，

与第三方库协同React可以用于任何web应用中。它可以被嵌入刀其他应用，且需要足以，其他的应用也可以敲入刀React中。集成带有DOM操作的插件React不理会React自身之外的DOM操作。它根据内部虚拟DOM来决定是否需要更新，而且如果同一个DOM节点被另一个库操作了。React会觉得困惑而且没有办法恢复。这并不意味着React与其他操作DOM的方式不能结合，也不一定结合困难，只不过需要你去关注每个库所做的事情。避免冲突的最简单方式就是防止React组件更新。你可以渲染无需更新的Reac

高阶组件高阶组件（HOC）是React中用于复用组件逻辑的一种高级技巧。HOC自身不是React API的一部分，它是一种基于React的组合特性而形成的设计模式。具体而言，高阶组件是参数为组件，返回值为新组建的函数。const EnhanceComponent = higherOrderComponent(WrappedComponent)组件是将props转化为ui，而高级组件是将组件转化为另一个组件。HOC在React的第三方库中非常常见，例如Redux的connect和Relay的C

FragmentsReact中的一个常见模式是一个组件返回多个元素。Fragments允许你将字列表分组，而无需向DOM添加额外的子节点。class App extends React.Component{ render(){ return <React.Fragment> <div></div> <div></div> <div>

ref分析为什么有ref,虽然官方总是不推荐使用这种破坏整体框架的api,但是实际开发,总有一些场景需要直接操作DOM元素,所以有了这个api.但是如果能不使用尽量不使用.破坏了"属性和状态去映射视图",正常流程中的组件属性均有数据映射而来,绑定了ref相当于提供直接修改属性的额外途径,导致属性不可控.破坏了"属性不可变性，单向数据流",增加额外了操作数据的途径,可能改变属性不可变性,让数据的流动不可控.降低了可读性,破坏了整体代码风格和组织结构.虽然,有种种不利,但是在一些场景确实有效并

Refs转发Ref转发是一项将ref自动地通过组件传递到其一子组件的技巧。对于大多数应用中的组件来说，这通常不是必需的。但是其对某些组件，尤其是可重用的组件库是很有用的。转发refs到DOM组件考虑这个渲染原生DOM元素button的FancyButton组件：function FancyButton(props){ return ( <button className="FancyButton"> {props.children}

错误边界过去，组件内的JavaScript错误会导致React的内部状态被破坏，并且在下一次渲染时产生可能无法追踪的错误。这些错误基本上是因为较早的其他代码（非React组件代码）错误引起的，但是React并没有提供一种在组件中优雅处理这些错误的方式，也无法从错误中恢复。错误边界（Error Boundaries）部分UI的javascript错误不应该导致整个应用崩溃，为了解决这个问题，React16引入了一个新的概念——————错误边界。错误边界是一种React组件，这些组件可以捕获并打印发

使用context之前的考虑Context主要应用场景在于很多不同层级的组件需要访问同样一些的数据。如果你只是想避免层层传递一些属性，组件组合（component composition）有时候是一个比context更好的方案。 function Parent(){ return <TestChilren name={'子组件name'}> <TestGrandson name={'孙组件name'}></TestGrands

React 哲学React 最棒的部分之一是引导我们思考如何构建一个应用。在这篇文档中，我们将会通过React构建一个可搜索产品数据的表格来更深刻的领会React哲学。从设计稿开始假设我们已经有了一个返回JSON的API，以及设计师提供的组件设计稿。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uPjsKVC8-1607868746795)(https://react.docschina.org/static/1071fbcc9eed01fddc115b41e193e

组合 vs 继承React 有十分强大的组合模式。我们推荐使用组合而非继承来实现组件间的代码重用。包含关系有写组件无法提前知晓它们的子组件的具体内容。在Sidebar（侧边栏）和Dialog（对话框）等展示通用容器（box）的组件中特别容易遇到这种情况。我们们建议这些组件使用一个特殊的childrenprop来将他们的子组件传递到渲染结果中：function FancyBorder(props){ return ( <div className={'FancyBord

状态提升通常，多个组件需要反映相同的变化数据，这时我们建议将共享状态提升到最近的共同父组件中区，让我们看看它是如何运作的。在本节中，我们将穿件一个用于计算水在给定温度下是否会沸腾的温度计算器。我们将从一个名为boilingVerdict的组件开始，他接受celsius温度座位一个prop，并据此打印出该温度是否足以将水煮沸的结果。function BoilingVerdict (props) { if (props.celsius >= 100) { return &

表单在React里，HTML表单元素的工作方式和其他的DOM的元素有些不用，这是因为表单元素通常会保持一些内部的state，例如这个纯html表单直接收一个名称： <form> <label> 名称： <input type="text" name="name"/> </label> <input type="submit" value="提交"

koa使用静态目录如何支持视屏调节时间进度背景搭建基于koa的VueSSR的时候，有个功能需要上传下载预览视屏。实现思路，首先设置静态目录（koa-static），上传时直接保存文件到静态目录，预览和下载都通过返回对应静态目录文件的路径进行操作。问题当前端通过video的播放的时候，画面能正常播放，但是令人惊讶的事情发生了，居然不能手动调节进度，无论是拖拽进度条还是点击都无效。过程第一反应是前端设置有问题，但是前端控制只有一个设置control,并没有其余的单独设置。于是猜想是不是视屏有问

列表 & Key在JavaScript中如何转化列表。如下代码，我们使用map()函数让数组中的每一项变成双倍，然后我们得到了一个新的列表doubled并打印出来：const numbers=[1,2,3,4,5];const doubled = numbers.map(function(number){ return number * 2})console.log(doubled)代码打印出 [2,4,6,8,10]。在React中，把数组转化为元素列表的过程是相似的。

条件渲染在React中，你可以创建不同的组件来封装各种你需要的行为。然后依据应用的不同状态，你可以只渲染对应状态下的部分内容。React中的条件渲染和javaScript中的一样，使用JavaScript运算符if或者条件运算符去创建元素来表现当前的状态，然后让React根据他们来更新UI。function UserGreeting(props) { return <h1>Welcome back!</h1>;}function GuestGreeting(pro

事件处理React元素的事件处理和DOM元素的很相似，但是有一点语法的不同：React事件的命名采用小驼峰式(camelCase)，而不是纯小谢。使用jsx语法时你需要传入一个函数座位事件处理函数，而不是一个字符串。例如，传统的HTML：<button onclick="activateLasers()"> Activate Lasers</button>在React中略微不同：<button onClick={activateLasers}&gt

实现一个时钟的例子首先我们需要function Tick () { const clock = <div> <h1>Hello, world!</h1> <h2>It is {new Date().toLocaleTimeString()}.</h2> </div> ReactDOM.render( element, document.getE

JSX和React DOM和浏览器DOMJSXJSX 是 JavaScript的语法扩展，用来描述UI应该呈现出它应有交互的本质形式。在UI中需要绑定事件、数据变化时候需要通知到UI，以前渲染数据到UI的，通过JSX能很直观的表示出来。并且JSX的写法打破传统的将标记与逻辑进行分离到这种分离形式，而是将二者同时存放在一个单元组件中，来实现关注点分离，也就是模块化。在JSX中嵌入表达式 const name = 'Josh Perez'; const element = <h

开始React 是一个用于构建用户界面的 JavaScript 库。诞生之初就是可被逐步采用的，因而你可以按需引入或多或少的 React 特性。不管你是想体验下 React，用它给简单的 HTML 页面增加一点交互，还是要开始一个完全由 React 驱动的复杂应用。直接在网站中使用React.js我们可以像普通库一样，直接在html中用过script标签引入js文件的方式使用。 <script src="https://unpkg.com/react@16/umd/react.dev

drone什么是droneDrone 是一个基于 Docker 的云原生的持续集成/部署工具,能支持四种 git 托管服务（github, gitlab, gogs, gitea) 而 drone-server 预先知晓了对应托管服务的 API，drone 的很多功能比如拉取 git repo list/add webhook to repo 都是通过这些 API 完成的。前期准备首先准备好服务器（也可以本地搭建），其次了解一些基础的docker操作和linux命令。因为此次是基于阿里云服务器进

搭建gogs什么是gogsGogs（go git serve）是一款极易搭建的轻量级自助的Git服务，基本能使用到git功能全部都，还有工单系统也挺适合于小团队的，并且市面上最低配置的服务器都能满足系统最低硬件要求。前期准备首先准备好服务器（也可以本地搭建），其次了解一些基础的docker操作和linux命令。因为此次是基于阿里云服务器进行，所以本地搭建不做介绍。服务器： 阿里云（1核2G） centOS 7.7.1908mysql：5.7 （5.7及以上，低版本会产生gogs报错主索引长

声明合并如果定义了两个相同名字的函数、接口或类，那么他们会合并成一个类型：函数的合并我们可以使用重载定义多个函数类型： function reverse(x: number): number; function reverse(x: string): string; function reverse(x: number | string): number | string { if (typeof x === 'number') { re

泛型泛型（Generics）是指在定义函数，接口或类的时候，不预先指定具体的类型，而在使用的时候，再指定类型的一种特性。简单的例子首先，我们来实现一个createArray，它可以创建一个指定长度的数据，同时将每一项都填充一个默认值： function createArray(length: number, value: any): Array<any> { let result = []; for (let i = 0; i < length

类与接口接口（Interfaces）可以用于对于[对象的形状]进行描述。这一章介绍接口的另一个用途，对类的一部分行为进行抽象。类实现接口实现（implements）是面向对象中的一个重要概念。一般来讲，一个类智能继承自另一个类，有时间不同类之间可以有一些共有的特性，这时候就可以吧特性提取成接口（interface），用implements关键字来实现。这个特性大大的提高了面向对象的灵活性。举例来说，门是一个类，防盗门是门的子类。如果防盗门有一个报警器的功能，我们可以简单的给防盗门添加一个报警党发，

类传统方法中，JavaScript通过构造函数实现类的概念，通过原型链实现集成。而在ES6中，我们终于迎来了class。TypeScript 除了实现了所有ES6的类的功能以外，还添加了一些新的用法。类的概念虽然 JavaScript中有类的概念，但是可能大多数 JavaScript程序员并不是非常熟悉类，这里对类相关的概念做一个简单的介绍。类（Class）:定义了一件事物的抽象特点，包含它的属性和方法对象（Object）:类的实例，通过new生成面向对象（OPP）的三大特性：封装、继承、多

枚举枚举（Enum）类型用来取值被限定在一定范围内的场景，比如一周只能偶七天，颜色限定为红绿蓝等。简单的例子枚举使用enum关键字来定义： enum Days { Sun, Mon, Tue, Wed, Thu, Fri, Sat }; console.log(Days["Sun"] === 0); // true console.log(Days["Mon"] === 1); // true console.log(Days["Tue"] === 2); // tru

元组数组合并了相同类型的对象，而元组(Tuple)合并了不同类型的对象。元组起源于函数编程语言（如F#），这些语言中会频繁使用元组。简单的例子定义一对值分别为string和number的元组： let tom:[string,number] = ['tom',25]当赋值或者访问一个一直索引的元素时，会得到正确的类型： let tom:[string,number]; tom[0]='1'; tom[1]=24; // tom[3]=1;// 长度为 "2

类型别名类型别名用来给一个类型起个新名称。简单的例子 type Name = string ; type NameResolver = () => string; type NameOrNameResolver = Name | NameResolver ; function getName(n:NameOrNameResolver):Name{ if(typeof n == 'string'){ return n

内置对象JavaScript中有很多内置对象，他们可以直接在 TypeScript中当做定义好了的类型。内置对象是指根据标准在全局作用域(Global)上存在的对象。这里的标准是指ECMAScript和其他环节(比如DOM)的标准。ECMAScript的内置对象ECMAScript标准提供的内置对象有：Boolean、Error、Date、RegExp等。我们可以是 TypeScript中将变量定义为这些类型： let b:Boolean = new Boolean(1); le

当使用第三方库时，我们需要引用它的声明文件，才能获得对应的代码补全、接口提示等功能。新语法索引declare var 声明全局变量declare function 申明全局函数declare class 声明全局类declare enum 声明全局枚举类型declare namespace 声明（含有子属性的）全局对象interface和type 声明全局类型export 导出变量export namespace 导出（含有子属性的）对象export default ES5默认导出e

类型断言类型断言（TyPe Assertion）可以用来手动只顶一个值的类型。语法 值 as 类型或 <类型>值在 tsx语法（react的jsx语法的ts版）中必须使用前者，即值 as 类型。形如<Foo>的语法在tsx中表示一个ReactNode，在ts中除了表示类型断言外，也可能表示一个泛型。故建议使用类型断言的时候，统一使用值 as 类型这样的语法。类型断言的用途将一个联合类型断言为其中一个类型之前有提到过，当 TypeScript不确定

函数的类型函數申明在 JavaScript中，有两种常见的什么方式————函数声明（Function Declarartion）和函数表达式（Function Expression）。 // 函数声明 function sum(x,y){ return x+y } // 函数表达式 let sum = function (x,y){ return x+y }一个函数有输入和输出，要在 TypeScript中对其进行约束

数组的类型在 TypeScript中，数组类型有多种定义方式，比较灵活。类型+[方括号]表示 let fibonacci:number[]=[1,2,3];数组的类型中不允许出现其他类型： let fibonacci:number[]=[1,2,"3"];//不能将类型“string”分配给类型“number”。数组的一些方法的参数也会根据数组在定义时约定的类型进行限制: let fibonacci:number[]=[1,2,3]; fibonacci.push

对象的类型——接口在TypeScript中，我们使用接口（Interaces）来定义对象的类型。什么是接口在面向对象语言中，接口（Interaces）是一个很重要的概念，它是对行为的抽象，而具体如何行动需要由类（classes）去实现（implement）。TypeScript中的接口是一个非常灵活的概念，除了可用于对类的一部分行为进行抽象以外，也经常用于对[对象的形状（shape）]进行描述。 interface Person { name: string,

类型推论如果没有明确的指定类型，那么TypeScript会依照类型推论（Type Inference）的规则推断出一个类型。什么是类型推论以下代码虽然没有指定类型，但是会在编译的时候报错： let myFavoriteNumber = 'seven'; myFavoriteNumber = 7; // 不能将类型“7”分配给类型“string”。事实上，他等价于 let myFavoriteNumber:string = 'seven'; myFavoriteNum

任意值任意值（Any）用来表示允许复制为任意类型。什么是任意值类型如果是一个普通类型，在赋值过程中改变类型是不被允许的：let myFavoriteNumber:string = 'seven';myFavoriteNumber = 7; // 不能将类型“7”分配给类型“string”。但如果是any类型，则允许被赋值为任意类型。let myFavoriteNumber: any = 'seven';myFavoriteNumber = 7;任意值的属性和方法在任意值上访问任何属

当我们错误的提交了一个push到线上仓库了之后，需要将其取消该怎么操作？git log查看我们的提交记录，然后复制我们提交之前上个版本的commit_id，通过命令：git reset --soft commit_id //表示只是改变了HEAD的指向，本地代码不会变化，我们使用git status依然可以看到，同时也可以git commit提交。git reset --hard commit_id //后者直接回改变本地源码，不仅仅指向变化了，代码也回到了那个版本时的代码，所以使用是一定

原始数据类型JavaScript中的类型分为两种：原始数据类型（primitive data types）和对象类型（Object types）。栈：原始数据类型（Undefined，Null，Boolean，Number、String）堆：引用数据类型（对象、数组、函数）原始数据类型包括：布尔值，数值，字符串，null，undefined以及es6中的新类型Symbol和BigInt。本节主要介绍前五种原始数据类型在 TypeScript 中的应用。布尔值在ts中使用boolean定义布尔值

什么是TypeScript官网的定义：TypeScript 是 JavaScript 的类型的超集，它可以编译成纯 JavaScript。编译出来的 JavaScript 可以运行在任何浏览器上。TypeScript 编译工具可以运行在任何服务器和任何系统上。TypeScript 是开源的。首先，TypeScript（Ts）是JavaScript（Js）的超集，主要提供了类型系统和对es6的支持。Ts无法直接跑在浏览器上，需要编辑成Js之后才能运行在浏览器上。Ts的编译工具可以运行在任何服务

部署 userName.github.io 命名的仓库首先建一个仓库，名称为 你的用户名 + .github.io ，github会自动给构建这个仓库下面的内容到https://userName.github.io/域名下，”/“ 后面就是你仓库内文件的根路径，具体页面根据仓库内文件结构添加即可访问。例如：仓库里根路径下有一个test.html就可以访问：https://userName.github.io/test.html部署普通仓库部署非上面命名的仓库。首先，建造的一个仓库，随便命