react

<blockquote>在获取富文本后，又只要显示部分内容，需要去除富文本标签，然后再截取其中一部分内容；然后就是过滤器，在微信小程序中使用还是挺多次的，在vue及react中也遇到过</blockquote> <h1>1.富文本去除html标签</h1> <ul><li>去除html标签及 空格</li></ul> let richText = ' <p style="font-size: 25px;color: white">&nbsp; &nbsp; &nbsp; &nbsp;sdaflsjf的丰富及饿哦塞尔</p><span>dsfjlie</span>'; /* 去除富文本中的html标签 */ /* *、+限定符都是贪婪的，因为它们会尽可能多的匹配文字，只有在它们的后面加上一个?就可以实现非贪婪或最小匹配。*/ let content = richText.replace(/<.+?>/g, ''); console.log(content); /* 去除&nbsp; */ content = content.replace(/&nbsp;/ig, ''); console.log(content); /* 去除空格 */ content = content.replace(/\s/ig, ''); console.log(content); <ul><li>截取字符串

EsLint入门 介绍 官方地址：http://eslint.org/ EsLint帮助我们检查Javascript编程时的语法错误。比如：在Javascript应用中，你很难找到你漏泄的变量或者方法。EsLint能够帮助我们分析JS代码，找到bug并确保一定程度的JS语法书写的正确性。 EsLint是建立在Esprima(ECMAScript解析架构)的基础上的。Esprima支持ES5.1,本身也是用ECMAScript编写的，用于多用途分析。EsLint不但提供一些默认的规则（可扩展），也提供用户自定义规则来约束我们写的Javascript代码。 EsLint提供以下支持： ES6 AngularJS JSX Style检查 自定义错误和提示 EsLint提供以下几种校验： 语法错误校验 不重要或丢失的标点符号，如分号 没法运行到的代码块（使用过WebStorm的童鞋应该了解） 未被使用的参数提醒 漏掉的结束符，如} 确保样式的统一规则，如sass或者less 检查变量的命名 使用 一、安装 Npm install gulp-eslint –save-dev 在你的项目目录下，运行：eslint –init将会产生一个.eslintrc的文件，文件内容包含一些校验规则 { "rules": { "semi": ["error", "always"], "quotes": [

什么是Virtual DOM？ Virtual DOM是对DOM的抽象,本质上是JavaScript对象（也就是通过JavaScript语言来描述一段HTML代码）,这个对象就是更加轻量级的对DOM的描述. 虚拟DOM首次产生是React框架最先提出和使用的，其卓越的性能很快得到广大开发者的认可，继React之后vue2.0也在其核心引入了虚拟DOM的概念。在没有虚拟DOM的时候，我们在创建页面的时候一般都是使用HTML标签一个一个的去搭建我们的页面，既然有了DOM节点以后，为什么不直接使用原生DOM，那么原生DOM到底有什么弊端呢？原因是这个样子的，原生DOM中一个Node节点有N多的属性，一旦对DOM进行操作的时候会影响页面性能的核心问题主要在于DOM操作导致了页面的重绘或重排，为了减少由于重绘和重排对网页性能的影响，所以无论在什么项目中尽可能少的去操作DOM节点是性能优化的一大重点。 为什么需要DOM？ 既然我们已经有了DOM,为什么还需要额外加一层抽象? 1. 首先， 前端性能优化的一个秘诀就是尽可能少地操作DOM ，DOM相对较慢，而且频繁变动DOM会造成浏览器的回流或者重绘，这些都是性能的杀手，因此我们需要这一层抽象，在patch过程中尽可能地一次性将差异更新到DOM中，这样保证了DOM不会出现性能很差的情况。 2. 其次，

来自：https://zhuanlan.zhihu.com/p/83291118 1.给RN项目添加 TypeScript yarn add --dev typescript 或者 npm install typescript --save 2.给项目添加 react-native-typescript-transformer 库 yarn add --dev react-native-typescript-transformer 3.初始化 TypeScript 配置文件 yarn tsc --init --pretty --jsx react-native 打开tsconfig.json文件 { "compilerOptions" : { /* Basic Options */ // "incremental": true, /* Enable incremental compilation */ "target": "esnext", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */ "module": "commonjs", /* Specify module code

⒈初始化 React Native环境 　　参考 https://reactnative.cn/docs/getting-started.html ⒉安装React Native官方的脚手架工具 npm install -g @react-native-community/cli ⒊使用React Native脚手架初始化项目 #默认是JavaScript npx react - native init ts_react_native #可以直接使用TypeScript初始化 npx react -native init ts_react_native --template react-native-template-typescript ⒋安装watchman 　　watchman用于监控React Native项目中文件的变动，经常有开发者忘记安装watchman而导致项目无法启动的情况 cd ts_react_native y watchman ⒌更改项目为TypeScript环境 　　1.将TypeScript以及React Native和Jest的类型添加到您的项目中。 yarn add typescript @types/jest @types/react @types/react-native @types/react-test- renderer # or for

本文转载自 “Vivo 互联网技术”，已获授权。 本文系统性的讲述了 DNS 协议与 WebSocket 协议的重要细节。 一、DNS 1、Linux dig命令 我们首先通过 Linux 下的dig命令来了解一下 DNS 是怎么做域名解析的。我们首先输入命令： dig www .baidu .com 看下标注的红框，从左到右依次代表： 域名的名称 也就是服务器名称 网络类型， DNS 协议在设计的时候考虑到了其他网络类型，但是目前位置这个值还是写死的IN 你就理解成是互联网就可以了。这个值一般不变 标识域名对应何种类型的地址，A 就代表ip的地址。 这里可能有人会问了，这个域名的后面为啥还有个“.”？我们输入的明明是 www.baidu.com 不是 www.baidu.com. 啊 。 这里要提一下： 末尾的 . 代表的就是 根域名 ，每个域名都有根域名，所以通常我们会 省略它 。 根域名的下一级叫 顶级域名 ，比如我们熟知的.com与.net。 再下一级就是 次级域名 了，比如例子中的.baidu。这个次级域名只要你有钱是可以随便注册的。 最后这个 www ，这个代表 三级域名 。一般是用户在自己的域里面为服务器分配的名称。用户可以随便分他。 所以可以看出来这里的域名是 分级别 的。能弄明白这点就能搞清楚为什么DNS的查询过程是 分级查询 了。 我们可以利用dig

1.document.parentNode和document.parentnode document.parentNode -> null （有属性但没有值） document.parentnode -> undefined （没有属性） 如果说当前对象有这个属性，这个属性没有值是null；如果没有这个属性为undefined 2.let vs var区别 1.let没有变量提升（但在词法解析阶段也得知某一个变量是否是私有变量） 2.let不允许在相同的作用域下重复声明 3.let解决了JS中的暂时性死区问题 4.let创建的全局变量没有给window设置对应的属性 5.let会产生块级作用域 … 你理解的闭包是什么，优缺点？ 解释：函数执行会形成一个全新私有作用域，保护里面的变量不收外界的干扰，这种保护机制就是闭包 官方解释： 函数执行会形成一个私有栈内存作用域，函数不销毁，与里面的私有变量不冲突，并且也可以保存下来。 闭包就是保存和保护。保护私有变量与外界没有联系，不收干扰。保存就是保存私有变量不销毁。 标准回答技巧： 1.我封装了一个组件，大量运用了闭包。。。 2.我研究Jquery源码，发现就是闭包保护起来的 3.我在研究react源码，发现rudex就是利用了闭包 优缺点：过多的运用闭包会形成性能上的消耗，所以尽量减少闭包的使用。 3.实现弹出5个索引，说明原理

近3、4年来，随着前端技术渐渐趋于稳定，同质化现象已经越来越明显，大家同样是用React/Vue，工作内容也是高度相似，企业为了在众多求职者中发掘更优秀的人才，就只能不断提高招聘标准。 拿React举例，你可能觉得自己对React已经足够深入，做好了充分的准备。但其实面试官并不关心你会不会 setState，reducts，反而会关注你对 React 的原理有着怎样的了解。 这种基于源码阅读层面的学习，对于企业的个性化开发需求和个人的技术发展都有着至关重要的价值。 所以这里免费送出一份由 前百度/360前端架构师的大圣老师精心打磨的 视频教程 ： 《React源码扩展》 带你从 0 手写 React 16.13 最新特性 fiber 架构和 hooks！ 100 分钟实用干货 原价399元 ,限时 0元 抢到手 扫码立即领取 仅限 200名 ，送完即止！ 主讲老师 大圣老师 8年前端开发经验 前百度、360前端架构师 ·精通Vue/React、源码架构、小程序、移动端 ·和node.js整个前端技术栈 ·对前端萌新如何快速进阶有丰富经验 ·业内少有既精通技术又精通授课的大咖 视频内容 ⼿写 react 16 核心源码 jsx 简介 createElement render Concurrent fibers 提交 commit Reconciliation 函数组件 Hooks

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 为什么会有hook 在组件之间复用状态逻辑很难,需要重新组织你的组件结构,抽象层组成的组件会形成“嵌套地狱” 复杂组件变得难以理解,各生命周期交叉副作用 State Hook import React, { useState } from 'react'; // 引入 function Example() { // 声明一个叫 "count" 的 state 变量 const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> // 使用 <button onClick={() => setCount(count + 1)}> // 改变 Click me </button> </div> ); } Hook 在 class 内部是不起作用的。但你可以使用它们来取代 class 。 useState 需要哪些参数？ useState() 方法里面唯一的参数就是初始 state。不同于 class 的是，我们可以按照需要使用数字或字符串对其进行赋值，而不一定是对象。在示例中，只需使用数字来记录用户点击次数，所以我们传了 0 作为变量的初始

近3、4年来，随着前端技术渐渐趋于稳定，同质化现象已经越来越明显，大家同样是用React/Vue，工作内容也是高度相似，企业为了在众多求职者中发掘更优秀的人才，就只能不断提高招聘标准。 拿React举例，你可能觉得自己对React已经足够深入，做好了充分的准备。但其实面试官并不关心你会不会 setState，reducts，反而会关注你对 React 的原理有着怎样的了解。 这种基于源码阅读层面的学习，对于企业的个性化开发需求和个人的技术发展都有着至关重要的价值。 所以这里免费送出一份由 前百度/360前端架构师的大圣老师精心打磨的 视频教程 ： 《React源码扩展》 带你从 0 手写 React 16.13 最新特性 fiber 架构和 hooks！ 100 分钟实用干货 原价399元 ,限时 0元 抢到手 扫码立即领取 仅限 200名 ，送完即止！ 主讲老师 大圣老师 8年前端开发经验 前百度、360前端架构师 ·精通Vue/React、源码架构、小程序、移动端 ·和node.js整个前端技术栈 ·对前端萌新如何快速进阶有丰富经验 ·业内少有既精通技术又精通授课的大咖 视频内容 ⼿写 react 16 核心源码 jsx 简介 createElement render Concurrent fibers 提交 commit Reconciliation 函数组件 Hooks