react-router3.x hashHistory render两次的bug,及解决方案

先写一个简单App页面,其实就是简单修改了react-router的官方例子中的animations例子,修改了两个地方: 1.路由方式由browserHistory修改为hashHistory 2.在Page1组件中打印console.log('render page1'); 直接上代码: 然后现在点击Page1链接,会发现render page1 被打印了两次,说明,Page1组件被渲染了两次,假如Page1组件比较复杂的话,岂不是很影响性能: 为了仔细研究为什么会render两次,下面把P…

vue h render function & render select with options bug

vue h render function & render select with options bug https://github.com/xgqfrms/vue/issues/41 bug vue h render function & render select how to use vue h render function to render select? https://vuejs.org/v2/guide/render-function.html let option…

puppeteer render local HTML template bug

puppeteer render local HTML template bug ➜ url-to-poster git:(master) ✗ dev ^-v-^ app is running in development env! yarn run v1.16.0 $ node index.js (node:2725) UnhandledPromiseRejectionWarning: Error: Protocol error (Page.navigate): Cannot navigate…

一个诡异的MySQL查询超时问题，居然隐藏着存在了两年的BUG

这一周线上碰到一个诡异的BUG. 线上有个定时任务,这个任务需要查询一个表几天范围内的一些数据做一些处理,每隔十分钟执行一次,直至成功. 通过日志发现,从凌晨5:26分开始到5:56任务执行了三次,三次都因为SQL查询超时而执行失败,而诡异的是,任务到凌晨6:00多就执行成功了. 每天都是凌晨五点多失败,凌晨六点执行成功. 点开异常日志一看是这样的: 总结来说就是MySQL查询超时. 像这种稳定复现的BUG,我原以为只需三分钟能定位,没有想到却耗费了我半天的时间. 排查之路 Explain 看到…

React 16.13.1触发两次render

一段很普通的代码,出发了两次render import React, { useState, useEffect } from 'react' const MouseTracker: React.FC = () => { const [ positions, setPositions ] = useState({x: 0, y: 0}) useEffect(() => { console.log('add effect', positions.x) const updateMouse= (e:…

React源码 ReactDOM.render

在 react 当中,主要创建更新的有三种方式 1.ReactDOM.render || hydrate 这两个api都是要把这个应用第一次渲染到我们页面上面,展现出来整个应用的样子的过程,这就是初始渲染 2.setState 3.forceUpdate ReactDOM.render 需要做哪些事情呢? 1.创建 ReactRoot 2.创建 FiberRoot 和 RootFiber 3.创建更新 import React, { Component } from 'react' impor…

[React] Use React.ReactNode for the children prop in React TypeScript components and Render Props

Because @types/react has to expose all its internal types, there can be a lot of confusion over how to type specific patterns, particularly around higher order components and render prop patterns. The widest and most recommended element type is React…

[React Router v4] Conditionally Render a Route with the Switch Component

We often want to render a Route conditionally within our application. In React Router v4, the Route components match the current route inclusively so a “stack” of Routes will all be processed. To render a single Route exclusively we can wrap them in…

React给state赋值的两种写法

如果你看过React的官方文档,就会对怎么给局部state赋值有一定的了解.如下代码: class Test extends React.Component { constructor(props) { super(props); this.state = { name:'李磊' }; // 为了在回调中使用 `this`,这个绑定是必不可少的 this.handleClick = this.handleClick.bind(this); } handleClick(){ this.setSta…

react源码之render

1.最近学习react源码,刚刚入门,看了render的原理,到了fiberRoot的创建如图:…

react中IOS手机里面两个input同时存在时，聚焦focus失效解决办法

最近在做webapp搜索功能时,用到两个input同时存在时,轻点input聚焦时,ios手机软键盘弹起又失效,一直在寻找合理的解决办法,现在最简单的总结回顾: <一>bug显示 <二> 最终测试通过的修改方案 1. 安卓保持不动,原生input当点击的时候可以自动聚焦; 2. ios单个input的也是正常的,就是两个input在一起失效: 3. 当两个input在一起的时候,每一个input外面包裹一层div,里面有一个span标签. 测试代码如下: <!DOCTYPE…

实现简易版react中createElement和render方法

function createElement(type, config, children) { // 1. 创建一个对象 // 2.根据参数config修改这个对象 // 3.把children参数作为对象中props中的一个属性 let virtureDOM = {}; virtureDOM.type = type; virtureDOM.ref = config.ref || null; virtureDOM.key = config.key || null; let props = {}…

从React Native到微服务，落地一个全栈解决方案

Poplar是一个社交主题的内容社区,但自身并不做社区,旨在提供可快速二次开发的开源基础套件.前端基于React Native与Redux构建,后端由Spring Boot.Dubbo.Zookeeper组成微服务对外提供一致的API访问. https://github.com/lvwangbeta/Poplar 前端React Native & Redux React Native虽然提供跨平台解决方案,但并未在性能与开发效率上做出过度妥协,尤其是对于有JS与CSS基础的开发人员入手不会很难,…

React+Webpack+ES6 兼容低版本浏览器（IE9）解决方案

虽然过了兼容IE6的噩梦时代,IE依旧阴魂不散,因为你可能还要兼容IE9.在ES6已经普及的今天,用ES6写react已经成了标配.但是babel编译的js语法,由于某些不规范的写法,可能在IE9下不能正确解释,很容易导致白屏.本文记录如下起因在准备提测的那天,顺便打开IE9看一眼(注意,这里是原生IE9 ,不是用IE11模拟的IE9),OMG! 排查后发现,原来是因为构造函数中使用了this.简写如下 class Child extends React.Component { cons…

(原创)spring mvc和jersey rest 组合使用时单例对像实例化两次的BUG及解决办法

项目中没用spring 的restTemplate 而是采用 jersey来做rest 的实现,一直用着,也没发现有什么不对,后来加入了,以quartz用硬编码方式实现,结果启动项目的时候报错 ,具体信息为job id重复.后来经排查是因为:jersey依赖于org.springframework.web.context.ContextLoaderListener初始化的ApplicationContext,而spring mvc 依赖于org.springframework.web.serv…

"只能在执行Render()的过程中调用RegisterForEventValidation" 解决方案

开发中遇到令人蛋疼的问题: 只能在执行Render()的过程中调用RegisterForEventValidation 当出现的异常的提示: 异常详细信息: System.InvalidOperationException:只能在执行Render()的过程中调用RegisterForEventValidation: 不要伤心,下面是解决办法: 出现这个异常,解决问题只需要在<%@ Page %> 指令中加上 EnableEventValidation="false"…

js对象属性两种调用bug

jsobj.url_3[0]=url_3[1];这就错误jsobj.url_3[0]红色看成一个整体的0的属性,这就错了 TypeError: Cannot set property '0' of undefined 只能用[],jsobj[url_3[0]] indexOf和lastIndexOf方法区别 indexof从0开始,如果没有找到返回-1,严格区分大小写,返回索引 lastIndexOf 如果只有一个查询值,不管从后往前还是从前往后找,索引值都一样,区别就在于有好几个查询值,不管…

Linux 下Redis集群安装部署及使用详解(在线和离线两种安装+相关错误解决方案)

一.应用场景介绍本文主要是介绍Redis集群在Linux环境下的安装讲解,其中主要包括在联网的Linux环境和脱机的Linux环境下是如何安装的.因为大多数时候,公司的生产环境是在内网环境下,无外网,服务器处于脱机状态(最近公司要上线项目,就是无外网环境的Linux,被离线安装坑惨了,走了很多弯路,说多了都是血泪史啊%>_<%).这也是笔者写本文的初衷,希望其他人少走弯路,下面就介绍如何在Linux安装部署Redis集群. 二.安装环境及工具系统:Red Hat Enterprise Li…

点击label执行两次的bug

首先我是这样的写的: <label> <input type="checkbox">点击 </label> 无论点击input还是文字,都会执行两次.因为点击lable会默认执行以下input,然后input又会自己执行一下,所以执行了两次. 解决方法: function clickIn(event){ if($(event.target).is("input")){ alert(123); } } 当元素为input的时候执行方…

【反思】一个价值两天的BUG，无论工作还是学习C语言的朋友都看看吧！

博文原创,转载请联系博主! 使用C语言也有两个年头了,BUG写出来过不少,也改过不少BUG.但是偏偏就是有这么一个BUG让我手头的项目停工了两天,原因从百度找到谷歌,资料从MAN手册找到RFC也没有找到问题的原因,但是真正发现BUG原因之后实在是让自己汗颜. 不管如何,决定把这个BUG写进博文,也是给学习C语言的朋友们提个醒,查看BUG的眼光不要太高,思考问题要自底向上思考. 具体项目在我的github里: https://github.com/yue9944882/HttpAccelerate…