React loading

需求

众所周知，应用如果少了loading，交互就显得僵硬。

本文分享如何在React中从零到一实现并使用loading。

实现

一个loading，应该始终出现在视口的正中。

同时为了表示加载过程的动态性，需要适当的动画。

以及，成功和失败的提示与loading其实本质上是一回事，所以，实现loading的同时，也顺便将另外两个一并实现。

严格意义上，这是toast的实现。

Toast.jsx

import l from './toast.module.css'
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
import {faCheck, faSpinner, faTriangleExclamation} from '@fortawesome/pro-solid-svg-icons'
import PropTypes from 'prop-types'
import {memo} from 'react';

function Toast({type, message}) {
    return (
        

            

                {
                    type === 'success'
                        ? 
                        : type === 'fail'
                            ? 
                            : 
                }
            

            {
                message
                    ? message
                    : type === 'success'
                        ? '完成'
                        : type === 'fail'
                            ? '失败'
                            : '加载中'
            }
        

    )
}

Toast.propTypes = {
    type: PropTypes.oneOf(['loading', 'success', 'fail']),
    message: PropTypes.string
}

export default memo(Toast)

toast.module.css

:root {
    --toastSize: 136px;
    --containerSize: 40px;
}

.toast {
    width: var(--toastSize);
    height: var(--toastSize);
    position: fixed;
    top: calc(50vh - var(--toastSize)/2);
    left: calc(50vw - var(--toastSize)/2);
    background: #4C4C4C;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, .9);
}

.container {
    width: var(--containerSize);
    display: inherit;
    flex-direction: inherit;
    align-items: inherit;
    margin: 0 auto 16px;
}

.container > svg {
    height: var(--containerSize);
}

.loading {
    animation: rotate linear 1s infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}

使用

路由

loading的首要应用场景就是页面间的切换。

使用lazy()和Suspense配合React Router实现页面间切换时新页面加载loading的显隐：

// App.jsx
import React, {Suspense, lazy} from 'react'
import {BrowserRouter, Routes, Route} from 'react-router-dom'

const Home = lazy(() => import('./routes/Home'))
const About = lazy(() => import('./routes/About'))

const App = () => (
    
        }>
            
                } />
                } />
            
        
    
);

不过，目前这个组合有一个致命缺点：

即新组件尚未完成加载时，旧组件已经隐藏，且不论新组件加载得多快，Suspense的fallback都会执行，这将导致页面切换时出现闪烁。

虽然官方推出了startTransition()解决闪烁问题，但该方案目前尚未适用于路由。

所以这个组合实践中不推荐使用，因为以页面闪烁为代价实现loading得不偿失。

过渡

React新增的useTranstion() Hook，搭配useState()，实现动态组件加载时loading的显隐。

import {useEffect, useState, useTransition} from 'react'
import {url} from '../../configuration'
import Toast from '../../../components/toast/Toast'
import Table from '../../../components/table/Table'

export default function User() {
    const [res, setRes] = useState({})
    const [loading, startTransition] = useTransition() // loading表示过渡任务的等待状态

    useEffect(() => {
        fetch(`${url}`, {method: 'GET'})
            .then(r => r.json())
            .then(d => {
                if (d.hasOwnProperty('err'))
                    alert(`${d.text}：${d.err}`)
                else if (
                    d.hasOwnProperty('data')
                )
                    startTransition(() => {setRes(d)}) // 将setRes()标记为过渡任务
            })
            .catch(e => {alert(e)})
    }, [])

    return (
        

            {loading && }
            
    )
}
useTransition()几乎能覆盖loading的绝大部分场景，因为在React中，组件的更新基本都是通过在useEffect()的依赖数组中添加state来实现。
总结
本着官方支持的绝不自己再封装的原则，loading的需求算是基本实现了，后续开发中若有新收获再来同步。
若有不足，欢迎指正。

                    
                

        
你可能感兴趣的:(React loading)

        

            

                
    
                    
  • node.js学习
                        小猿L
node.jsnode.js学习vim
                        
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
    
                    
    • 
                    
  • react-intl——react国际化使用方案
                        苹果酱0567
面试题汇总与解析java开发语言中间件springboot后端
                        
    国际化介绍i18n：internationalization国家化简称，首字母+首尾字母间隔的字母个数+尾字母，类似的还有k8s(Kubernetes)React-intl是React中最受欢迎的库。使用步骤安装#usenpmnpminstallreact-intl-D#useyarn项目入口文件配置//index.tsximportReactfrom"react";importReactDOMf
    
                    
    • 
                    
  • 字节二面
                        Redstone Monstrosity
前端面试
                        
    1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
    
                    
    • 
                    
  • 前端代码上传文件
                        余生逆风飞翔
前端javascript开发语言
                        
    点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
    
                    
    • 
                    
  • Vicky的ScalersTalk第六轮新概念朗读持续力训练Day73 20210411
                        Vicky_b9de

                        
    练习材料：ModerncavemenPart-3ˈmɒdənˈkeɪvmənpɑːt-3Theyplungedintothelake,andafterloadingtheirgearonaninflatablerubberdinghy,letthecurrentcarrythemtotheotherside.Toprotectthemselvesfromtheicywater,theyhadtow
    
                    
    • 
                    
  • 前端使用react-intl-universal进行国际化
                        Stephy_Yy
#调研reactjsjavascriptcss
                        
    一、国际化/i18n目前国际化，就是开发者写对象，一个key关联若干语种的翻译。相比于浏览器自带的翻译功能，语义更加准确。“国际化”的简称：i18n（其来源是英文单词internationalization的首末字符i和n，18为中间的字符数）二、react项目国际化react-intl是业界最受欢迎的软件包之一：React-intl是雅虎的语言国际化开源项目FormatJS的一部分，通过其提供的
    
                    
    • 
                    
  • VUE实现大小缩放轮播图
                        书边事.
vue.js前端javascript
                        
    效果图import{ref,computed,reactive,watch,onMounted}from'vue';exportdefault{props:{/***轮播数据来源*/source:{type:Array,default:()=>[{img:require('@/assets/imgs/test/1.png')},{img:require('@/assets/imgs/test/1.
    
                    
    • 
                    
  • react里的index.js是怎么跟index.html结合起来的?
                        SherrinfordL

                        
    image.pngcreate-react-app把webpack、babel等配置都封装到了依赖项目react-script中，所以你无法直观的看到这些配置。你可以在项目下运行npmruneject，被隐藏的配置文件就会暴露到项目根路径下。把请求转发到index.html原因是，你执行npmrunstart时，启动的webpack-dev-server，会加载react-script项目conf
    
                    
    • 
                    
  • Taro实现微信小程序自定义拍照截图识别
                        书边事.
taro微信小程序小程序
                        
    效果图：代码：>请对准框内拍摄题目重新拍照文件处理中...开始识别definePageConfig({navigationStyle:"custom",navigationBarTitleText:"",//启用页面分享//enableShareAppMessage:true,//启动朋友圈分享//enableShareTimeline:true});import{reactive,toRefs,
    
                    
    • 
                    
  • （小白入门）Windows环境下搭建React Native Android开发环境
                        码农老黑
前端ReactNative移动开发Androidstudio
                        
    ReactNative(简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的UI框架React在原生移动应用平台的衍生产物，目前支持iOS和Android两大平台。RN的环境搭建在RN的中文社区有所介绍，但是对于小白来说还是有些太过简略了。RN中文社区详见参考，本文不涉及的问题也许在其中能够有所解答。ReactNative思想底层引擎是JavaSc
    
                    
    • 
                    
  • react中如何获取并使用usestate声明的变量的值
                        小华0000
react.jsjavascript前端
                        
    1.函数式更新当需要根据当前状态来更新状态时，可以使用函数式更新。setState（在类组件中）和setCount（在useState中）都可以接受一个函数作为参数，这个函数接收当前的状态作为参数，并返回新的状态。functionExampleComponent(){const[count,setCount]=useState(0);//使用函数式更新functionhandleClick(){s
    
                    
    • 
                    
  • 【Vue3源码实现】Ref isRef unRef proxyRefs实现
                        ZhaiMou
vue.jsjavascript前端数据结构前端框架开发语言
                        
    前言在上篇文章中我们了解了响应式原理，并在最后实现了reactive。上文链接Vue3响应式原理实现与track和trigger依赖收集和触发依赖在我们的日常业务中，我们有可能需要将一个基础数据类型的值也转换成响应式的，而reactive只能代理对象，我们需要对基础数据类型的值也进行读写操作的拦截，但Proxy无法实现对基础数据类型值读写操作的拦截。所以Vue设计了Ref,以及相关api本篇文章实
    
                    
    • 
                    
  • React 前端应用结合 Nginx 部署指南及常见错误排查
                        蜗牛去旅行吧
前端react.jsnginx
                        
    在现代Web开发中，React已成为构建用户界面的流行选择，而Nginx则是一个高性能的Web服务器，广泛用于静态文件的托管和负载均衡。在本篇博客中，我们将详细介绍如何将一个React应用部署到Nginx上，并探讨在部署过程中可能遇到的常见错误及其解决方案。部署步骤1.准备React应用首先，确保你已经创建了一个React应用。如果还没有，可以使用CreateReactApp快速生成一个基础项目：
    
                    
    • 
                    
  • vue3 响应性API
                        weixin_44747590
vue3vuejs
                        
    toRef可以用来为源响应式对象上的property性创建一个ref。然后可以将ref传递出去，从而保持对其源property的响应式连接。本质类似指针引用。举例：conststate=reactive({foo:1,bar:2})constfooRef=toRef(state,'foo')fooRef.value++console.log(state.foo)//2state.foo++cons
    
                    
    • 
                    
  • 手撸vue3核心源码——响应式原理(isRef和unRef)
                        前端不是渣男
前端vue.js
                        
    今天来实现一下ref的功能函数，isRef与unRefisRefisRef和isReactive一样，都是用于检测数据类型，isRef是检测是不是一个ref对象,跟isReactive函数实现起来一样,我们先来写一个单元测试这里要实现的功能是，检测ref对象肯定就通过返回true，检测普通类型数据以及reactive对象都是falseit("itshouldreturnaboolean",()=>
    
                    
    • 
                    
  • vue3 | isRef、unref、toRef、toRefs
                        杨贵妃会飞飞飞
Vuevue.js前端
                        
    isRef检查某个值是否是ref。是返回true，否则返回false。constnum=ref(10)constnum1=20constnum2=reactive({data:30})console.log(isRef(num))//trueconsole.log(isRef(num1))//falseconsole.log(isRef(num2))//falseunref()如果参数是ref，则
    
                    
    • 
                    
  • vue学习笔记——关于对Vue3 ref(), toRef(), toRefs(), unref(), isRef(), reactive()方法的理解。
                        chen_sir_sh
vue学习笔记javascript前端vue
                        
    VUE3出现了很多新的API，下面是自己的一些理解进行的总结。欢迎大家一起交流补充。ref()使用ref创建一个数据类型，ref有value这个属性constname1={age:"14",name:"bob1"};constname2=ref({name:"bob2"});//使用ref创建一个数据类型相对于reactive，ref有value属性name2.value="bob3"consol
    
                    
    • 
                    
  • React项目的开发前准备 以及 JSX 的基本使用
                        渡鸦七
Reactreact.js前端前端框架
                        
    React项目的开发前准备以及JSX的基本使用React项目创建create-react-appnpxcreate-react-appmy-appcdmy-appnpmstartyarncreatereact-appyarncreatereact-appmy-appcdmy-appyarnstartcreate-react-app和yarncreatereact-app都可以快速创建一个React
    
                    
    • 
                    
  • react 函数组件useState异步变同步
                        MIKE-zi
react入门setstate异步问题函数组件实现分页函数组件上拉加载
                        
    需求函数组件实现一个下拉上拉的列表，列表支持分页。最开始我们使用setstate的方式去报错当前页数。这样做的问题，就是有一个异步的延迟。上代码const[pageNo,setpageNo]=useState(1)constonPullUpRefresh=()=>{console.log("上拉加载内容")console.log("上一次的pageNo",pageNo)setpageNo(page
    
                    
    • 
                    
  • Netty权威指南：Netty总结-高性能与可靠性
                        Ty_1106
Nettyjava网络rpc
                        
    第二十二章高性能之道22.1RPC调用性能模型分析22.1.1传统RPC调用性能差三宗罪：网络传输采用同步阻塞I/O导致经常性阻塞序列化性能差线程模型问题22.1.2I/O通信性能三要素传输：BIO、NIO或者AIO协议：HTTP公有协议，内部私有协议线程：数据报如何读取，Reactor线程模型22.2Netty高性能之道22.2.1异步非阻塞通信I/O多路复用技术22.2.2高效的Reactor
    
                    
    • 
                    
  • Vue 和 React 的对比
                        淘淘是只狗
vueReactvue.jsreact.jsjavascript
                        
    React和Vue有许多相似之处：使用VirtualDOM提供了响应式(Reactive)和组件化(Composable)的视图组件。将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。运行时性能React在React应用中，当某个组件的状态发生变化时，它会以该组件为根，重新渲染整个组件子树。如要避免不必要的子组件的重渲染，你需要在所有可能的地方使用PureComponent，
    
                    
    • 
                    
  • 一文让你彻底弄懂Redux的基本原理以及其如何在React中使用！
                        tabzzz
react.jsjavascriptecmascript
                        
    文章目录什么是Redux？它有什么用Redux基本原理Redux在React中具体使用的方法ReduxToolkit（RTK）createSlice函数参数返回值示例configureStore函数参数返回值示例React-ReduxProvider组件示例React组件使用store中的数据useSelector钩子函数示例connect组件mapStateToPropsmapDispatchT
    
                    
    • 
                    
  • react 更新元素状态
                        叶绿素yls

                        
    所有的react元素都是immutable不可变的。当元素被创建之后，我们无法修改他的内容或属性。根据我们现在所学的react的知识，我们要更新元素的内容，我们必须重新渲染这个元素，也就是重新创建这个元素。看一个例子：functiontick(){constelement=Hello,worldItis{newDate().toLocaleString()}.;ReactDOM.render(el
    
                    
    • 
                    
  • Reactive 编程-Vert.x
                        Flying_Fish_Xuan
python开发语言
                        
    Reactive编程与Vert.x：高效异步Java微服务框架一、什么是Reactive编程？Reactive编程是一种异步编程范式，专注于数据流和事件的传播处理。与传统的阻塞式编程不同，Reactive编程能够更好地处理高并发和异步操作，特别适合实时系统、流处理以及需要快速响应的场景。Reactive编程的核心原则包括：响应性（Responsive）：系统能够快速响应用户请求，并保持低延迟。弹性
    
                    
    • 
                    
  • 生成一个完整的App代码通常不会仅仅通过单一的文件或几种语言的简单组合来完成，因为App的开发涉及前端用户界面、后端逻辑处理、数据库管理以及可能的第三方服务集成等多个方面。不过，我可以为你提供一个概念
                        NewmanEdwarda2
前端ui数据库
                        
    前端(用户界面)yinanjinying.comHTML/CSS/JavaScript(原生Web开发)对于简单的WebApp，你可以直接使用HTML来构建页面结构，CSS来设置样式，JavaScript来添加交互性。React(JavaScript/TypeScript)对于更复杂的单页应用（SPA），React是一个流行的选择。它允许你构建可复用的UI组件。Flutter(Dart)如果你想要
    
                    
    • 
                    
  • react native ScrollView实现滑动锚定，滑动到指定位置
                        君君yui
前端reactnativereact.jsjavascript
                        
    实现ScrollView滑动视图组件滑动到指定位置，实现tab与具体位置相锚定给需要锚定的组件加上onLayout属性//event.nativeEvent.layout.x是水平方向值，event.nativeEvent.layout.y是数值方向值//this.layoutList用于存储组件位置onLayout={(event)=>{this.layoutList.push(event.na
    
                    
    • 
                    
  • reactnative 获取定位_React-native实现定位的功能
                        weixin_39644915
reactnative获取定位
                        
    1、在React-native中实现定位的功能的几种方式。(1).使用rn中的自带的Geolocation实现定位。(2).用第三放库react-native-location实现定位。2.用rn中自带的Geolocation实现定位的详细步骤：(1).如果是android进行定位手下是需要权限的通过以下代码设置权限：(2).直接通过navigator.geolocation来进行定位，示例代码如
    
                    
    • 
                    
  • 小程序的三种弹框showToast、showModal、showLoading
                        前端-文龙刚
小程序小程序
                        
    小程序常用的三种弹框有：showToast：消息提示框showModal：模态对话框showLoading：加载框第一：showToast：消息提示框默认的样式自定义icon图标具体代码如下：wx.showToast({title:'成功',//提示内容icon:'loading',//图标（success成功图标、error失败图标、loading加载图标、none不显示图标）image:'..
    
                    
    • 
                    
  • 小程序将图片保存到本地
                        前端-文龙刚
小程序小程序javascript开发语言
                        
    wx.downloadFile({//先将图片下载下来url:canvasToTempFilePath,//图片地址success:function(res){//图片保存本地操作wx.saveImageToPhotosAlbum({filePath:res.tempFilePath,success:function(data){wx.hideLoading()wx.showToast({titl
    
                    
    • 
                    
  • React Native动画的锚点anchorPoint
                        沉默的依恋
ReactNative
                        
    在RN动画开发的过程中,有需求让图片绕中心点以外的其它点旋转,本以为是一个简单的问题,猜想Facebook应该有提供类似的API.然而在官网找了一圈没有anchorPoint这个API,后来想了想,RN与H5非常像,应该有transformOrigin这个属性,然而,还是没有,在github的issues中有人提问过什么时候更新这个属性,但是官网仍旧没有计划;为了达到这种效果,其实有一种间接的方法
    
                    
    • 
                                
  • LeetCode[Math] - #66 Plus One
                                    Cwind
javaLeetCode题解AlgorithmMath
                                    
    原题链接：#66 Plus One 
  
要求： 
给定一个用数字数组表示的非负整数，如num1 = {1, 2, 3, 9}, num2 = {9, 9}等，给这个数加上1。 
注意： 
1. 数字的较高位存在数组的头上，即num1表示数字1239 
2. 每一位（数组中的每个元素）的取值范围为0~9 
  
难度：简单 
  
分析： 
题目比较简单，只须从数组
    
                                
    • 
                                
  • JQuery中$.ajax()方法参数详解
                                    AILIKES
JavaScriptjsonpjqueryAjaxjson
                                    
    url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。 
type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和    delete也可以使用，但仅部分浏览器支持。 
timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局
    
                                
    • 
                                
  • JConsole & JVisualVM远程监视Webphere服务器JVM
                                    Kai_Ge
JVisualVMJConsoleWebphere
                                    
        JConsole是JDK里自带的一个工具，可以监测Java程序运行时所有对象的申请、释放等动作，将内存管理的所有信息进行统计、分析、可视化。我们可以根据这些信息判断程序是否有内存泄漏问题。 
　　使用JConsole工具来分析WAS的JVM问题，需要进行相关的配置。 
　　首先我们看WAS服务器端的配置. 
　　1、登录was控制台https://10.4.119.18
    
                                
    • 
                                
  • 自定义annotation
                                    120153216
annotation
                                    
    Java annotation 自定义注释@interface的用法  一、什么是注释  
 
    说起注释，得先提一提什么是元数据(metadata)。所谓元数据就是数据的数据。也就是说，元数据是描述数据的。就象数据表中的字段一样，每个字段描述了这个字段下的数据的含义。而J2SE5.0中提供的注释就是java源代码的元数据，也就是说注释是描述java源
    
                                
    • 
                                
  • CentOS 5/6.X 使用 EPEL YUM源
                                    2002wmj
centos
                                    
    CentOS 6.X 安装使用EPEL YUM源1. 查看操作系统版本[root@node1 ~]# uname -a Linux node1.test.com 2.6.32-358.el6.x86_64 #1 SMP Fri Feb 22 00:31:26 UTC 2013 x86_64 x86_64 x86_64 GNU/Linux [root@node1 ~]#
    
                                
    • 
                                
  • 在SQLSERVER中查找缺失和无用的索引SQL
                                    357029540
SQL Server
                                    
    --缺失的索引 
SELECT  avg_total_user_cost * avg_user_impact * ( user_scans + user_seeks ) AS PossibleImprovement ,  
        last_user_seek ,  
  
    
                                
    • 
                                
  • Spring3 MVC 笔记（二） —json+rest优化
                                    7454103
Spring3 MVC
                                    
    接上次的 spring mvc 注解的一些详细信息！ 
                         其实也是一些个人的学习笔记  呵呵！ 
 

    
                                
    • 
                                
  • 替换“\”的时候报错Unexpected internal error near index 1 \ ^
                                    adminjun
java“\替换”
                                    
    发现还是有些东西没有刻子脑子里,,过段时间就没什么概念了,所以贴出来...以免再忘... 
  
在拆分字符串时遇到通过 \ 来拆分，可是用所以想通过转义 \\ 来拆分的时候会报异常 
   
 
 public class Main {   
    
     /*
    
                                
    • 
                                
  • POJ 1035 Spell checker(哈希表)
                                    aijuans
暴力求解--哈希表
                                    
    /*
题意：输入字典，然后输入单词，判断字典中是否出现过该单词，或者是否进行删除、添加、替换操作，如果是，则输出对应的字典中的单词
要求按照输入时候的排名输出

题解：建立两个哈希表。一个存储字典和输入字典中单词的排名，一个进行最后输出的判重
*/

#include <iostream>
//#define 
using namespace std;
const int HASH =
    
                                
    • 
                                
  • 通过原型实现javascript Array的去重、最大值和最小值
                                    ayaoxinchao
JavaScriptarrayprototype
                                    
    用原型函数（prototype）可以定义一些很方便的自定义函数，实现各种自定义功能。本次主要是实现了Array的去重、获取最大值和最小值。 
实现代码如下： 
  
<script type="text/javascript">
	Array.prototype.unique = function() {
		var a = {};
		var le
    
                                
    • 
                                
  • UIWebView实现https双向认证请求
                                    bewithme
UIWebViewhttpsObjective-C
                                    
      
        什么是HTTPS双向认证我已在先前的博文 ASIHTTPRequest实现https双向认证请求 
中有讲述，不理解的读者可以先复习一下。本文是用UIWebView来实现对需要客户端证书验证的服务请求，网上有些文章中有涉及到此内容，但都只言片语，没有讲完全，更没有完整的代码，让人困扰不已。但是此知
    
                                
    • 
                                
  • NoSQL数据库之Redis数据库管理(Redis高级应用之事务处理、持久化操作、pub_sub、虚拟内存)
                                    bijian1013
redis数据库NoSQL
                                    
    3.事务处理 
        Redis对事务的支持目前不比较简单。Redis只能保证一个client发起的事务中的命令可以连续的执行，而中间不会插入其他client的命令。当一个client在一个连接中发出multi命令时，这个连接会进入一个事务上下文，该连接后续的命令不会立即执行，而是先放到一个队列中，当执行exec命令时，redis会顺序的执行队列中
    
                                
    • 
                                
  • 各数据库分页sql备忘
                                    bingyingao
oraclesql分页
                                    
    ORACLE 
 
下面这个效率很低 
SELECT * FROM ( SELECT A.*, ROWNUM RN FROM (SELECT * FROM IPAY_RCD_FS_RETURN order by id desc) A ) WHERE RN <20; 
 
下面这个效率很高 
SELECT A.*, ROWNUM RN FROM (SELECT * FROM IPAY_RCD_
    
                                
    • 
                                
  • 【Scala七】Scala核心一：函数
                                    bit1129
scala
                                    
    1. 如果函数体只有一行代码，则可以不用写{},比如 
def print(x: Int) = println(x) 
一行上的多条语句用分号隔开，则只有第一句属于方法体，例如 
  
def printWithValue(x: Int) : String= println(x); "ABC" 
  
上面的代码报错，因为，printWithValue的方法
    
                                
    • 
                                
  • 了解GHC的factorial编译过程
                                    bookjovi
haskell
                                    
    GHC相对其他主流语言的编译器或解释器还是比较复杂的，一部分原因是haskell本身的设计就不易于实现compiler，如lazy特性，static typed，类型推导等。 
关于GHC的内部实现有篇文章说的挺好，这里，文中在RTS一节中详细说了haskell的concurrent实现，里面提到了green thread，如果熟悉Go语言的话就会发现，ghc的concurrent实现和Go有点类
    
                                
    • 
                                
  • Java-Collections Framework学习与总结-LinkedHashMap
                                    BrokenDreams
LinkedHashMap
                                    
            前面总结了java.util.HashMap，了解了其内部由散列表实现，每个桶内是一个单向链表。那有没有双向链表的实现呢？双向链表的实现会具备什么特性呢？来看一下HashMap的一个子类——java.util.LinkedHashMap。 
      
    
                                
    • 
                                
  • 读《研磨设计模式》-代码笔记-抽象工厂模式-Abstract Factory
                                    bylijinnan
abstract
                                    
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ 
 
 


package design.pattern;

/*
 * Abstract Factory Pattern
 * 抽象工厂模式的目的是：
 * 通过在抽象工厂里面定义一组产品接口，方便地切换“产品簇”
 * 这些接口是相关或者相依赖的
    
                                
    • 
                                
  • 压暗面部高光
                                    cherishLC
PS
                                    
    方法一、压暗高光&重新着色 
当皮肤很油又使用闪光灯时，很容易在面部形成高光区域。 
下面讲一下我今天处理高光区域的心得： 
皮肤可以分为纹理和色彩两个属性。其中纹理主要由亮度通道（Lab模式的L通道）决定，色彩则由a、b通道确定。 
处理思路为在保持高光区域纹理的情况下，对高光区域着色。具体步骤为：降低高光区域的整体的亮度，再进行着色。 
如果想简化步骤，可以只进行着色（参看下面的步骤1
    
                                
    • 
                                
  • Java VisualVM监控远程JVM
                                    crabdave
visualvm
                                    
    Java VisualVM监控远程JVM  
  
JDK1.6开始自带的VisualVM就是不错的监控工具. 
这个工具就在JAVA_HOME\bin\目录下的jvisualvm.exe, 双击这个文件就能看到界面 
  
通过JMX连接远程机器, 需要经过下面的配置: 
1. 修改远程机器JDK配置文件 (我这里远程机器是linux). 
   
    
                                
    • 
                                
  • Saiku去掉登录模块
                                    daizj
saiku登录olapBI
                                    
     
1、修改applicationContext-saiku-webapp.xml 
 
<security:intercept-url pattern="/rest/**" access="IS_AUTHENTICATED_ANONYMOUSLY" />  
<security:intercept-url pattern=&qu
    
                                
    • 
                                
  • 浅析 Flex中的Focus
                                    dsjt
htmlFlexFlash
                                    
    关键字：focus、 setFocus、 IFocusManager、KeyboardEvent 
 焦点、设置焦点、获得焦点、键盘事件 
 
 
 一、无焦点的困扰——组件监听不到键盘事件 
原因：只有获得焦点的组件（确切说是InteractiveObject）才能监听到键盘事件的目标阶段；键盘事件（flash.events.KeyboardEvent）参与冒泡阶段，所以焦点组件的父项（以及它爸
    
                                
    • 
                                
  • Yii全局函数使用
                                    dcj3sjt126com
yii
                                    
    由于YII致力于完美的整合第三方库，它并没有定义任何全局函数。yii中的每一个应用都需要全类别和对象范围。例如，Yii::app()->user;Yii::app()->params['name'];等等。我们可以自行设定全局函数，使得代码看起来更加简洁易用。(原文地址) 
我们可以保存在globals.php在protected目录下。然后，在入口脚本index.php的，我们包括在
    
                                
    • 
                                
  • 设计模式之单例模式二（解决无序写入的问题）
                                    come_for_dream
单例模式volatile乱序执行双重检验锁
                                    
                    在上篇文章中我们使用了双重检验锁的方式避免懒汉式单例模式下由于多线程造成的实例被多次创建的问题，但是因为由于JVM为了使得处理器内部的运算单元能充分利用，处理器可能会对输入代码进行乱序执行（Out Of Order Execute）优化，处理器会在计算之后将乱序执行的结果进行重组，保证该
    
                                
    • 
                                
  • 程序员从初级到高级的蜕变
                                    gcq511120594
框架工作PHPandroidhtml5
                                    
    软件开发是一个奇怪的行业，市场远远供不应求。这是一个已经存在多年的问题，而且随着时间的流逝，愈演愈烈。 
我们严重缺乏能够满足需求的人才。这个行业相当年轻。大多数软件项目是失败的。几乎所有的项目都会超出预算。我们解决问题的最佳指导方针可以归结为——“用一些通用方法去解决问题，当然这些方法常常不管用，于是，唯一能做的就是不断地尝试，逐个看看是否奏效”。 
现在我们把淫浸代码时间超过3年的开发人员称为
    
                                
    • 
                                
  • Reverse Linked List
                                    hcx2013
list
                                    
    Reverse a singly linked list. 
  
/**
 * Definition for singly-linked list.
 * public class ListNode {
 *     int val;
 *     ListNode next;
 *     ListNode(int x) { val = x; }
 * }
 */
p
    
                                
    • 
                                
  • Spring4.1新特性——数据库集成测试
                                    jinnianshilongnian
spring 4.1
                                    
    目录 
Spring4.1新特性——综述 
Spring4.1新特性——Spring核心部分及其他 
Spring4.1新特性——Spring缓存框架增强 
Spring4.1新特性——异步调用和事件机制的异常处理 
Spring4.1新特性——数据库集成测试脚本初始化 
Spring4.1新特性——Spring MVC增强 
Spring4.1新特性——页面自动化测试框架Spring MVC T
    
                                
    • 
                                
  • C# Ajax上传图片同时生成微缩图(附Demo)
                                    liyonghui160com

                                    
      
  
1.Ajax无刷新上传图片,详情请阅我的这篇文章。（jquery + c# ashx） 
        2.C#位图处理  System.Drawing。 
        3.最新demo支持IE7,IE8,Fir
    
                                
    • 
                                
  • Java list三种遍历方法性能比较
                                    pda158
java
                                    
    从c/c++语言转向java开发，学习java语言list遍历的三种方法，顺便测试各种遍历方法的性能，测试方法为在ArrayList中插入1千万条记录，然后遍历ArrayList，发现了一个奇怪的现象，测试代码例如以下： 
package com.hisense.tiger.list;
import java.util.ArrayList;
import java.util.Iterator;
    
                                
    • 
                                
  • 300个涵盖IT各方面的免费资源（上）——商业与市场篇
                                    shoothao
seo商业与市场IT资源免费资源
                                    
     
 A.网站模板+logo+服务器主机+发票生成 
 
 
  HTML5 UP:响应式的HTML5和CSS3网站模板。 
  Bootswatch:免费的Bootstrap主题。 
  Templated:收集了845个免费的CSS和HTML5网站模板。 
  Wordpress.org|Wordpress.com:可免费创建你的新网站。 
  Strikingly:关注领域中免费无限的移动优
    
                                
    • 
                                
  • localStorage、sessionStorage
                                    uule
localStorage
                                    
    W3School 例子 
  
HTML5 提供了两种在客户端存储数据的新方法： 
localStorage - 没有时间限制的数据存储 
sessionStorage - 针对一个 session 的数据存储 
  
之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不
    
                                
    •