2019年07月_飞翔的熊blabla

12月 11月 10月 09月 08月 07月 06月 05月 04月 03月 02月 01月

转载 react长列表优化方案: react-virtualized

典型开发问题如果所示, 有教室1/2/3, 每间教室下有1000+个学生学生组件为:function Student({student}) { return <div>{student.name}</div>}复制代码如果我们直接把整个列表渲染出来, 仅仅学生列表就会生成1000+个div标签.往往, 我们的学生组件都...

2019-07-31 19:05:53 5551 2

转载 Chrome渲染分析之Rendering工具使用

页面的绘制时间（paint time）是每一个前端开发都需要关注的的重要指标，它决定了你的页面流畅程度。而如何去观察页面的绘制时间，找到性能瓶颈，可以借助Chrome的开发者工具。本文主要介绍Chrome渲染分析工具 Rendering。如上图，按F12调出开发者工具，然后按“ESC”调出Rendering界面。以上5个选项的意思如下： 1、Show paint rectan...

2019-07-31 10:42:14 3966 1

转载 react性能优化：redux的store中的数据量太大是否会影响性能

　最近在处理大list（infinite scroll view）时，发现元素多了之后react渲染开始变得卡顿，想找一找问题出在哪里了，在参考了一些博客和做了一番研究之后，给大家来个总结。redux的store中的数据量太大，肯定是会影响性能的，但是跟其本身占的内存并没有太大关系，影响的是一些别的东西，请往下看。　　1.action触发大量reducer的开销　　store过分庞大，就是...

2019-07-31 10:30:54 1690

转载原 React如何渲染大数据量的列表？

本文参考自: 原文地址我们经常会遇到这种需求，根据数据展示列表。这种代码估计你已经撸过成百上千次了。但如果你需要同时展示成千上万条数据呢，必然会造成浏览器卡顿，丢帧，甚至卡死的问题。本文将介绍利用react-virtualized来高效渲染大数据量列表。开始吧！首先创建一个React 应用create-react-app virtualization复制代码应用将展示10...

2019-07-31 10:29:54 649

转载 Nextjs中文文档 + scss nextjs配置

Next.js 是一个轻量级的 React 服务端渲染应用框架。Next.js中文站点 http://nextjs.frontendx.cnNext.js中文站Github https://github.com/raoenhui/next-site-cn当前翻译版本为 7.0.0-canary.8。怎么使用安装代码自动分割 CSS 支持嵌入样式内嵌样...

2019-07-29 15:02:08 4087

原创 webstorm给react的nodejs加断点

client side加断点的方法最后加一个chrome webstorm插件1.webstorm增加Javascript Debug2.npm run dev启动3.webstorm点击虫子即可如果想在webstorm加断点，记得点击重置生成的chrome链接执行，不能在别的链接执行Server side加断点的方法这样我们服务端就成功加了断点...

2019-07-28 21:44:06 900

转载 React.createPortal 及 Modal 的新实现方式

一、描述二、之前的 Modal 组件三、 createProtal 改造 Modal 组件： 1、html 预留容器 2、改造 Modal 容器 3、Modal 组件的内容 4、使用 Modal 容器组件和内容组件 5、效果一、描述一般使用 React 的组件都是挂到父组件的this.props.children上面，总是被最近的父组件所捕获，最终到 ...

2019-07-28 10:45:18 9299

转载 react-css-modules详解

2019-07-28 10:23:49 6516

转载 React新生命周期--getDerivedStateFromProps

转自于:https://www.jianshu.com/p/50fe3fb9f7c3React 16是最近一年多React更新最大的版本。除了让大家喜闻乐见的向下兼容的Fiber，防止了客户端react在进行渲染的时候阻塞页面的其他交互行为。Fiber源码速览参考https://juejin.im/post/5bea68a6e51d450cb20fdd70新的生命周期过程先来看看...

2019-07-28 01:18:45 934

转载 Charles抓包(iOS的http/https请求) -可用

转自:https://www.jianshu.com/p/b72971d273291. Charles安装官网下载安装Charles:https://www.charlesproxy.com/download/2. HTTP抓包（1）查看电脑IP地址（2）设置手机HTTP代理手机连上电脑，点击“设置->无线局域网->连接的WiFi”，设置HTTP代...

2019-07-27 23:09:55 603

转载 react上下文context怎样使用看这篇这够了

react上下文context是一个很有趣的api，一方面react官网不推荐使用，另一方面许多官方依赖在使用目前使用context的依赖包：react-redux、mobx-react、react-router、拖拽组件react-dndcontext分为新版后旧版，这里都介绍下———————————————————————————————————————————————————...

2019-07-27 10:14:51 1097

转载 JS：Object.assign()方法

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。JavaScript Demo: Object.assgin()const object1 = { a: 1, b: 2, c: 3};const object2 = Object.assign({c: 4, d: 5}, object1);console.l...

2019-07-26 23:36:05 146

转载 object对象keys(), values() entries()

1、 Object.keys()ES5 引入了Object.keys方法，返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（ enumerable ）属性的键名。var obj = { foo: "bar", baz: 42 };Object.keys(obj)// ["foo", "baz"]2 、Object.values()Object.values方法返回...

2019-07-26 15:26:15 5046

转载 Less、Sass和SCSS

（一）区别：Less（可在客户端和服务端运行）是一种动态样式语言，对css赋予了动态语言的特性，如：变量、继承、运算、函数。 SCSS为Sass的升级版本，兼容Sass功能，又新增功能。SCSS 需要使用分号和花括号而Sass用换行和缩进。 Sass/SCSS与Less的区别：编译环境不一样变量符不一样，Less是@，SCSS是$，且变量作用域也不一样输出设置，Less没...

2019-07-26 13:55:38 139

转载 Sass 快速入门

0. Sass 文件后缀名sass 有两种后缀名文件：一种后缀名为sass，不使用大括号和分号；另一种就是我们这里使用的scss文件，这种和我们平时写的 css 文件格式差不多，使用大括号和分号。本教程中所说的所有 sass 文件都指后缀名为scss的文件。在此也建议使用后缀名为scss的文件，以避免sass后缀名的严格格式要求报错。1. 使用变量sass让人们...

2019-07-26 13:54:10 122

转载 PM2 部署 nodejs 项目

在网上找到pm2.目前似乎最常见的线上部署nodejs项目的有forever,pm2这两种。使用场合:forever管理多个站点，每个站点访问量不大，不需要监控。 pm2 网站访问量比较大,需要完整的监控界面。PM2的主要特性:内建负载均衡（使用Node cluster 集群模块）后台运行 0秒停机重载，我理解大概意思是维护升级的时候不需要停机. 具有Ubuntu和CentO...

2019-07-26 10:24:49 165

转载 Next.js v4.1.4 文档中文翻译

转自:https://blog.csdn.net/DeepLies/article/details/78423288最近想稍稍看下React的SSR框架Next.js，因为不想看二手资料，所以自己跑到Github上看，Next.js的文档是英文的，看倒是大概也能看得懂，但有些地方不太确定，而且英文看着毕竟不太爽你懂得，所以在网上搜了几圈发现好像好像还没有中文翻译，想着长痛不如短...

2019-07-25 18:20:59 272

转载箭头函数小心的地方

const PostItem = ({ post }) => ( xxx)==const PostItem = ({ post }) => { return xxx}!==const PostItem = ({ post }) => {}花括号没有自带return 属性

2019-07-25 17:25:48 132

转载 Nothing was returned from render

其中一个文件我没有做return ,这里也需要return

2019-07-25 15:23:50 1281

转载 10 分钟构建一个 next.js 博客

转自:https://www.twle.cn/t/151会编程语言最伟大的地方，就在于可以随心所欲的使用各种技术重新构建我们想要尝试的东西。比如今天发现了一个非常有趣的框架next.jsnext.js融合了好多技术栈，比如Node.js、React，而且关注的人极多，在Github上将近又 3w 粉丝next.js随着React揭开它的神秘面纱，前端组件化已经是当前...

2019-07-25 14:25:40 569

转载 React语法及使用

1.使用React渲染一个最基本的页面//1.导入import React from "react";//创建组件、虚拟DOM元素，生命周期import ReactDOM from 'react-dom';//把创建好的组件和虚拟DOM放到页面上去展示的//2.创建虚拟DOM元素//参数1：创建的元素的类型//参数2：是一个对象或null,表示当前这个DOM元素的属性//参数3：子...

2019-07-25 13:25:20 204

转载在React中使用react-router-dom路由

转自与:https://www.jianshu.com/p/8954e9fb0c7e在React中使用react-router-dom路由使用React构建的单页面应用，要想实现页面间的跳转，首先想到的就是使用路由。在React中，常用的有两个包可以实现这个需求，那就是react-router和react-router-dom。本文主要针对react-router-dom进行说明。安装...

2019-07-25 13:18:20 451

转载移动端调试神器（eruda）

转自与:https://www.cnblogs.com/milo-wjh/p/6807753.html在日常的移动端开发时，一般都是试用chrome浏览器的移动端模式进行开发和调试，只有在chrome调试完成，没有问题了才会上到真机测试，移动端开发的一大问题就在于此，各种品牌各种型号手机，手机中各种类型的浏览器APP........还好移动端的相对一致点，但是往往都会有一些各种各样的坑，这...

2019-07-25 12:08:55 209

转载 Vue国际化处理 vue-i18n 以及项目自动切换中英文

0. 直接上预览链接Vue国际化处理 vue-i18n 以及项目自动切换中英文1. 环境搭建命令进入项目目录，执行以下命令安装vue 国际化插件vue-i18nnpm install vue-i18n --save2. 项目增加国际化翻译文件在项目的src下添加lang文件夹增加中文翻译文件（zh_CN.js）以及英文翻译文件（EN.js），里面分别存储项目中需要翻译的信...

2019-07-25 11:07:49 474

转载必会的next.js自定义App和Document

原文链接：https://juejin.im/post/5cc08f0de51d453f38191d64前言这篇文章将介绍Next.js中自定义App组件、Document组件以及什么时候需要自定义这些内容，这可能会是我们每个项目中都要做的事情，So,让我们一起掌握它吧。Tips: 按照惯例声明，笔者也是个入门级选手，文章深度无法达到大佬级文章水平，只希望能对各位入门级的小伙伴有所帮...

2019-07-25 10:26:41 1064

转载如何清除已设置的npm淘宝镜像

设置淘x,宝的是：npm config set registryhttps://registry.npm.taobao.org不想用他们的，再设置回原来的就可以了：npm configset registryhttps://registry.npmjs.org

2019-07-24 18:32:56 12171

转载 Nuxt开发经验分享，让你踩少点坑！

说明本文章基于starter-template模板进行讲解，面向有vue-cli开发经验的宝宝vue init nuxt-community/starter-templateNuxt官方文档简单来说，Nuxt就是基于Vue的一个应用框架，采用服务端渲染，让你的SPA应用(Vue)也可以拥有SEO生命周期众所周知，Vue的生命周期全都跑在客户端(浏览器)，而Nux...

2019-07-24 17:49:47 2364 1

转载 nuxt.js 简述

为什么使用nuxt.js?vue单页面应用渲染是从服务器获取所需js，在客户端将其解析生成html挂载于id为app的DOM元素上，这样会存在两大问题。由于资源请求量大，造成网站首屏加载缓慢，不利于用户体验。由于页面内容通过js插入，对于内容性网站来说，搜索引擎无法抓取网站内容，不利于SEO。 Nuxt.js 是一个基于Vue.js的通用应用框架，预设了利用Vue.js开发服务端渲...

2019-07-24 17:48:57 497

转载 react-native之ART绘图详解

转自于https://blog.csdn.net/xiangzhihong8/article/details/76572405?ref=myread背景在移动应用的开发过程中，绘制基本的二维图形或动画是必不可少的。然而，考虑到Android和iOS均有一套各自的API方案，因此采用一种更普遍接受的技术方案，更有利于代码的双平台兼容。art是一个旨在多浏览器兼容的Node style C...

2019-07-23 22:28:39 588

原创 RN art组件正确的导入方式

这方法据说也能解决RNGestureHandler null的问题不过下面的方法会造成ART的引用路劲出问题如REACT/RTLOG找不到等1.将鼠标移动到Libraries2.在files中选择add file to3.选择node-module中RN路劲下的libraries/movieProject3/node_modules/react-native/L...

2019-07-23 21:49:16 494

转载 undefied is ... (...RNGestureHandlerModule.State)..

报错：undefined is not an object (evaluating 'RNGestureHandlerModule.State')我的项目原因: react-native link react-native-gesture-handler 这个命令行没有运行成功,运行成功之后，打开xcode 运行，又报错React/RCTEventDispatcher.h...

2019-07-23 14:53:43 350

转载 webstorm断点调试ReactNative

1. 用 Chrome 断点调试RN不用安装 React Develper Tools 谷歌浏览器插件，也能断点调试摇晃手机，在菜单中选择 Debug JS Remotely ，自动调用 Chromeinspect --> Sources --> 找到 debuggerWorker.js ,点开看到源代码，就能断点调试了2. 用webstorm断点调试 ex...

2019-07-23 13:23:23 1376

转载 'React/RCTBridgeDelegate.h' file not found

OS:[ ] Windows [X] MacOS [ ] LinuxPlatform:[X] iOS [ ] AndroidOutput ofnode -v && npm -v && npm ls --prod --depth=0v6.9.15.4.2my-project@0.5.0 /Users/**/MyProject├── re...

2019-07-23 13:23:17 4828

转载 RN之react-navigation路由器使用的巨坑

react-navigation的使用的巨坑这个库安装到成功使用搞了大半天，弄得心态崩溃。主要是不好意思问别人这么基础的问题，只能自己一点点趟坑，不过搞定之后信心暴涨啊。这位兄台好像和我一样，哈哈，遇到同道中人了。安装命令npm install react-navigation --save运行命令之后会自动安装最新的版本，现在安装的是："react-navigation...

2019-07-23 01:16:09 785

转载 React Native undefined is not an object (evaluating 'RNGestureHandlerModule.State')

原创地址：https://blog.csdn.net/weixin_39931896/article/details/84566929前言：当使用RN开发跨平台app时，使用的组件（如，react-navigation...），这个组件可能是需要链接原生库的。就是说要使用react-nativelink如使用到需要链接原生库，而没有 react-native link，运行时报：un...

2019-07-23 01:15:36 140

转载 ios Could not get BatchedBridge, make sure your bundle is packaged properly

create index.js, index.android.js and index.ios.js whith the same content. I do have all of them and it solved my issue

2019-07-22 14:15:52 905

转载 React Native 第三方库之 react-native-elements

官方文档安装//第一步$ npm install --save react-native-elements//第二步$ npm install react-native-vector-icons --save//第三步$ react-native link组件Avatar用法import { Avatar } from 'react-native-elemen...

2019-07-22 14:06:55 6018

转载 React Native undefined is not an object (evaluating 'RNGestureHandlerModule.State')

2019-07-22 13:24:40 164

转载超光速学习React Native笔记二：navigation导航器基础

官方文档：https://reactnavigation.org/zh-Hans/和上一次一样，本人萌新一枚跟着官方文档一天学完导航器基础。我们这次学习的是官方主推的导航库React Navigation，最新的3.X版本教程保证一天学完！保证一天学完！保证一天学完！安装在项目中命令行窗口中，依次输入以下命令：yarn add react-navigationyarn add...

2019-07-22 13:10:40 437

转载 React Native之react-navigation总结

react-navigation号称拥有近乎原生页面切换的性能，在项目中开始投入使用以来，确实发现了其优越性，一定程度上解决了RN在页面路由管理方面上的薄弱，下面就我在项目中遇到的坑和难点做一个总结。1、Header的参数设置后无效每一个navigator只会查看其直接子级进行配置，比如一个页面在一个stackNavigator里，而这个stackNavigator在一个tabNavi...

2019-07-22 12:31:05 345