小白不白`
小白不白`

如何优雅地使用React Hooks

一、理解什么是Hooks

在React中，Hooks其实就是一个函数，这个函数的命名以use开头、函数return一个结果；React Hooks其实就是封装了一些通用的、公共的方法，就是一些通用的工具。

二、React Hooks分为官方Hooks和自定义Hooks

官方Hooks是指React官方推荐的一些Hooks，如：useState、useEffect、useContext、useRef、useMemo、useCallback、useReducer、......；

1.useState：让React函数组件也可以使用状态，使用方法：const [ age, setAge ] = useState(35).

2.useEffect：在React函数组件里，没有组件生命周期这一说法，所以可以使用useEffect来替代组件生命周期，使用方法如下：

useEffect( () => {
    window.addEventListener('message', handleMessage );

    return () => {
        window.removeEventListener('message', handleMessage );
    }
}, [] )

useEffect接收的一个回调函数相当于是componentDidMount和componentDidUpdate，回调函数return的这一个回调相当于是componentWillUnmount；useEffect接收的第二个数组是依赖项，如果只是模拟组件生命周期，可以传空数组，通常这个依赖项不要传入过多或过于复杂，因为当依赖项发生变化useEffect中的回调函数会重新执行。

3.useContext：用于父组件向子组件的跨级传参，使用比较简单，直接参考官方文档即可。

4.useRef：绑定元素ref，通常用于调用子组件身上的方法；this.formRef.current.doReq()...。

5.useMemo：用于缓存函数的计算结果，与Vue中的计算属性类似；使用方法如下：

const result = useMemo( () => {
    const res = a + b;
    return res;
}, [a,b] )

useMemo的第二个参数为依赖项数组，依赖项发生变化则重新计算结果。

6.useCallback：缓存函数（缓存函数地址），通常与React.memo()一起使用；React.memo()是通过校验props中的数据是否改变的来决定组件是否需要重新渲染的一种缓存技术，具体点说React.memo()其实是通过校验Props中的数据的内存地址是否改变来决定组件是否重新渲染组件的一种技术。useCallback通常用于缓存父组件向子组件传递的函数，当父组件发生变化时会重新渲染，此时若变化与子组件无关，子组件不应重复渲染；useCallBack并不能阻止函数重新创建,它只能通过依赖决定返回新的函数还是旧的函数,从而在依赖不变的情况下保证函数地址不变。其使用方法如下：

import {useCallBack,memo} from 'react';

const Parent = ( props ) => {
    const [parentData, setParentData] = useState(66);  
    
    const toChildFun = useCallBack( () => {
        console.log("需要传入子组件的函数");
        
    }, [])
    
    return (

          
          
          
    
)
}

const Child = memo(( props ) => {
    console.log('子组件渲染了');
    return 
子组件

} )

7.useReducer：相当于写redux，直接根据官方文档进行使用。

官方文档里还有一些其他的Hooks，其实使用起来都比较方便，直接看文档使用就行了，在这里就列举以上几种常用的官方Hooks。

自定义Hooks其实就是根据自己的开发需求，封装一些通用的、公共的工具函数，使用起来其实就和官方推荐的Hooks是一样的。

自定义 Hooks 允许共享有状态逻辑，而不是状态本身，例如：

import { useState } from 'react';
// 自定义Hooks 
function useCounter(initialValue) {
  const [count, setCount] = useState(initialValue);
  function increment() {
    setCount(count + 1);
  }
  return [count, increment];
}

// 在其他组件进行使用
import useCounter from './useCounter';
function Counter() {
	const [count1, increment1] = useCounter(0);
	const [count2, increment2] = useCounter(100);
  return (
    

      
Count1: {count1}

      
       
Count2: {count2}

      
    

  );
}

当我们点击 Increment2 时，并不会影响 count1 ,因为每一个 useCounter 的调用都是独立的，其内部状态也是独立的。

三、React Hooks使用方法

1.只能在函数外层调用 Hook，不要在循环、条件判断或者子函数中调用。

2.只能在 React 的函数组件（顶部）和自定义 Hook 中调用 Hook。不要在其他 JavaScript 函数中调用。

3.在组件中 React 是通过判断 Hook 调用的顺序来判断某个 state 对应的 useState的，所以必须保证 Hook 的调用顺序在多次渲染之间保持一致，React 才能正确地将内部 state 和对应的 Hook 进行关联。

四、用Hooks替代一些高阶组件会更有优势

假如现在我们要让多个组件复用一个基于状态的逻辑公共方法：

1.使用高阶组件

import { Table } from 'antd'
import server from './server'

function useTable(server) {
  return function (WrappedComponent) {
    return class HighComponent extends React.Component {
      state = {
        tableProps: xxx, 
      };
      render() {
        const { tableProps } = this.state;
        return ;
      }
    };
  };
}

@useTable(server)
class App extends Component{
  render(){
    const { tableProps } = this.props;
    return (
      
    )
  }
}
2.使用Hooks
import { Table } from 'antd'
import server from './api'

function useTable(server) {
  const [tableProps, setTableProps] = useState(xxx);
  return tableProps;
}

function App {
    const { tableProps } = useTable();
    return (
      
 
   
  

    )
}
使用Hooks可以减少组件树的层级，防止组件深度嵌套，同时代码也更少更简洁。

                    
                

        
你可能感兴趣的:(React,react.js,javascript,前端)

        

            

                
    
                    
  • Long类型前后端数据不一致
                        igotyback
前端
                        
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
    
                    
    • 
                    
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理
                        STU学生网页设计
网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
                        
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
    
                    
    • 
                    
  • 【加密社】Solidity 中的事件机制及其应用
                        加密社
闲侃区块链智能合约区块链
                        
    加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
    
                    
    • 
                    
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript
                        二挡起步
web前端期末大作业javascripthtmlcss旅游风景
                        
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
    
                    
    • 
                    
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动
                        二挡起步
web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
                        
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
    
                    
    • 
                    
  • 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的运行
    
                    
    • 
                    
  • springboot+vue项目实战一-创建SpringBoot简单项目
                        苹果酱0567
面试题汇总与解析springboot后端java中间件开发语言
                        
    这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
    
                    
    • 
                    
  • JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）
                        跳房子的前端
前端面试javascript开发语言ecmascript
                        
    在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
    
                    
    • 
                    
  • react-intl——react国际化使用方案
                        苹果酱0567
面试题汇总与解析java开发语言中间件springboot后端
                        
    国际化介绍i18n：internationalization国家化简称，首字母+首尾字母间隔的字母个数+尾字母，类似的还有k8s(Kubernetes)React-intl是React中最受欢迎的库。使用步骤安装#usenpmnpminstallreact-intl-D#useyarn项目入口文件配置//index.tsximportReactfrom"react";importReactDOMf
    
                    
    • 
                    
  • 博客网站制作教程
                        2401_85194651
javamaven
                        
    首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
    
                    
    • 
                    
  • JavaScript `Map` 和 `WeakMap`详细解释
                        跳房子的前端
JavaScript原生方法javascript前端开发语言
                        
    在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
    
                    
    • 
                    
  • 最简单将静态网页挂载到服务器上(不用nginx)
                        全能全知者
服务器nginx运维前端html笔记
                        
    最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
    
                    
    • 
                    
  • 补充元象二面
                        Redstone Monstrosity
前端面试
                        
    1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
    
                    
    • 
                    
  • 微信小程序开发注意事项
                        jun778895
微信小程序小程序
                        
    微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
    
                    
    • 
                    
  • 切换淘宝最新npm镜像源是
                        hai40587
npm前端node.js
                        
    切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
    
                    
    • 
                    
  • 字节二面
                        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
    
                    
    • 
                    
  • uniapp实现动态标记效果详细步骤【前端开发】
                        2401_85123349
uni-app
                        
    第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
    
                    
    • 
                    
  • 高性能javascript--算法和流程控制
                        海淀萌狗

                        
    -for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
    
                    
    • 
                    
  • 360前端星计划-动画可以这么玩
                        马小蜗

                        
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
    
                    
    • 
                    
  • Vue + Express实现一个表单提交
                        九旬大爷的梦

                        
    最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo
    
                    
    • 
                    
  • JavaScript中秋快乐！
                        Q_w7742
javascript开发语言ecmascript
                        
    我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh
    
                    
    • 
                    
  • Nginx从入门到实践(三)
                        听你讲故事啊

                        
    动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
    
                    
    • 
                    
  • Nginx的使用场景：构建高效、可扩展的Web架构
                        张某布响丸辣
nginx前端架构
                        
    Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
    
                    
    • 
                    
  • 前端知识点
                        ZhangTao_zata
前端javascriptcss
                        
    下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
    
                    
    • 
                    
  • 第三十一节:Vue路由:前端路由vs后端路由的了解
                        曹老师

                        
    1.认识前端路由和后端路由前端路由相对于后端路由而言的,在理解前端路由之前先对于路由有一个基本的了解路由:简而言之,就是把信息从原地址传输到目的地的活动对于我们来说路由就是:根据不同的url地址展示不同的页面内容1.1后端路由以前咱们接触比较多的后端路由,当改变url地址时,浏览器会向服务器发送请求,服务器根据这个url,返回不同的资源内容后端路由的特点就是前端每次跳转到不同url地址,都会重新访
    
                    
    • 
                    
  • 华雁智科前端面试题
                        因为奋斗超太帅啦
前端笔试面试问题整理javascript开发语言ecmascript
                        
    1.var变量的提升题目：vara=1functionfun(){console.log(b)varb=2}fun()console.log(a)正确输出结果：undefined、1答错了，给一个大嘴巴子，错误答案输出结果为：2,1此题主要考察var定义的变量，作用域提升的问题，相当于varaa=1functionfun(){varbconsole.log(b)b=2}fun()console.l
    
                    
    • 
                    
  • 如何建设数据中台（五）——数据汇集—打破企业数据孤岛
                        weixin_47088026
学习记录和总结中台数据中台程序人生经验分享
                        
    数据汇集——打破企业数据孤岛要构建企业级数据中台，第一步就是将企业内部各个业务系统的数据实现互通互联，打破数据孤岛，主要通过数据汇聚和交换来实现。企业采集的数据可以是线上采集、线下数据采集、互联网数据采集、内部数据采集等。线上数据采集主要载体分为互联网和移动互联网两种，对应有系统平台、网页、H5、小程序、App等，可以采用前端或后端埋点方式采集数据。线下数据采集主要是通过硬件来采集，例如：WiFi
    
                    
    • 
                    
  • 分布式锁和spring事务管理
                        暴躁的鱼
锁及事务分布式springjava
                        
    最近开发一个小程序遇到一个需求需要实现分布式事务管理业务需求用户在使用小程序的过程中可以查看景点，对景点地区或者城市标记是否想去，那么需要统计一个地点被标记的人数，以及记录某个用户对某个地点是否标记为想去，用两个表存储数据，一个地点表记录改地点被标记的次数，一个用户意向表记录某个用户对某个地点是否标记为想去。由于可能有多个用户同时标记一个地点，每个用户在前端点击想去按钮之后，后台接收到请求，从数据
    
                    
    • 
                    
  • 前端CSS面试常见题
                        剑亦未配妥
前端面试前端css面试
                        
    边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子
    
                    
    • 
                                
  • 解线性方程组
                                    qiuwanchi

                                    
    package gaodai.matrix;

import java.util.ArrayList;
import java.util.List;
import java.util.Scanner;

public class Test {

	public static void main(String[] args) {
		Scanner scanner = new Sc
    
                                
    • 
                                
  • 在mysql内部存储代码
                                    annan211
性能mysql存储过程触发器
                                    
    

在mysql内部存储代码
  在mysql内部存储代码，既有优点也有缺点，而且有人倡导有人反对。
  先看优点：
  1 她在服务器内部执行，离数据最近，另外在服务器上执行还可以节省带宽和网络延迟。
  2 这是一种代码重用。可以方便的统一业务规则，保证某些行为的一致性，所以也可以提供一定的安全性。
  3 可以简化代码的维护和版本更新。
  4 可以帮助提升安全，比如提供更细
    
                                
    • 
                                
  • Android使用Asynchronous Http Client完成登录保存cookie的问题
                                    hotsunshine
android
                                    
    Asynchronous Http Client是android中非常好的异步请求工具 
除了异步之外还有很多封装比如json的处理，cookie的处理 
 
  引用   
 
Persistent Cookie Storage with PersistentCookieStore 
 
This library also includes a PersistentCookieStore whi
    
                                
    • 
                                
  • java面试题
                                    Array_06
java面试
                                    
    java面试题 
 
 
第一，谈谈final, finally, finalize的区别。 
final-修饰符（关键字）如果一个类被声明为final，意味着它不能再派生出新的子类，不能作为父类被继承。因此一个类不能既被声明为 abstract的，又被声明为final的。将变量或方法声明为final，可以保证它们在使用中不被改变。被声明为final的变量必须在声明时给定初值，而在以后的引用中只能
    
                                
    • 
                                
  • 网站加速
                                    oloz
网站加速
                                    
    前序:本人菜鸟，此文研究总结来源于互联网上的资料，大牛请勿喷！本人虚心学习，多指教. 
 
 
1、减小网页体积的大小，尽量采用div+css模式，尽量避免复杂的页面结构，能简约就简约。 
 
 
2、采用Gzip对网页进行压缩； 
   GZIP最早由Jean-loup Gailly和Mark Adler创建，用于UNⅨ系统的文件压缩。我们在Linux中经常会用到后缀为.gz
    
                                
    • 
                                
  • 正确书写单例模式
                                    随意而生
java 设计模式 单例
                                    
    　　单例模式算是设计模式中最容易理解，也是最容易手写代码的模式了吧。但是其中的坑却不少，所以也常作为面试题来考。本文主要对几种单例写法的整理，并分析其优缺点。很多都是一些老生常谈的问题，但如果你不知道如何创建一个线程安全的单例，不知道什么是双检锁，那这篇文章可能会帮助到你。 
 
　　懒汉式，线程不安全 
 
　　当被问到要实现一个单例模式时，很多人的第一反应是写出如下的代码，包括教科书上也是这样
    
                                
    • 
                                
  • 单例模式
                                    香水浓
java
                                    
    懒汉  调用getInstance方法时实例化 
 

public class Singleton {

	private static Singleton instance;
	
	private Singleton() {}

	public static synchronized Singleton getInstance() {
		if(null == ins
    
                                
    • 
                                
  • 安装Apache问题：系统找不到指定的文件 No installed service named "Apache2"
                                    AdyZhang
apachehttp server
                                    
    安装Apache问题：系统找不到指定的文件 No installed service named "Apache2" 
每次到这一步都很小心防它的端口冲突问题，结果，特意留出来的80端口就是不能用，烦。 
解决方法确保几处： 
1、停止IIS启动 
2、把端口80改成其它 （譬如90，800，，，什么数字都好） 
3、防火墙(关掉试试) 
在运行处输入 cmd 回车，转到apa
    
                                
    • 
                                
  • 如何在android 文件选择器中选择多个图片或者视频？
                                    aijuans
android
                                    
    我的android app有这样的需求，在进行照片和视频上传的时候，需要一次性的从照片/视频库选择多条进行上传 
但是android原生态的sdk中，只能一个一个的进行选择和上传。 
我想知道是否有其他的android上传库可以解决这个问题，提供一个多选的功能，可以使checkbox之类的，一次选择多个   处理方法 
官方的图片选择器(但是不支持所有版本的androi，只支持API Level 
    
                                
    • 
                                
  • mysql中查询生日提醒的日期相关的sql
                                    baalwolf
mysql
                                    
    SELECT sysid,user_name,birthday,listid,userhead_50,CONCAT(YEAR(CURDATE()),DATE_FORMAT(birthday,'-%m-%d')),CURDATE(),  dayofyear( CONCAT(YEAR(CURDATE()),DATE_FORMAT(birthday,'-%m-%d')))-dayofyear(
    
                                
    • 
                                
  • MongoDB索引文件破坏后导致查询错误的问题
                                    BigBird2012
mongodb
                                    
    问题描述： 
MongoDB在非正常情况下关闭时，可能会导致索引文件破坏，造成数据在更新时没有反映到索引上。 
解决方案： 
  
使用脚本，重建MongoDB所有表的索引。 
var names  = db.getCollectionNames();
for( var i in names ){
    var name = names[i];
    print(name);

    
                                
    • 
                                
  • Javascript Promise
                                    bijian1013
JavaScriptPromise
                                    
            Parse JavaScript SDK现在提供了支持大多数异步方法的兼容jquery的Promises模式，那么这意味着什么呢，读完下文你就了解了。 
一.认识Promises 
        “Promises”代表着在javascript程序里下一个伟大的范式，但是理解他们为什么如此伟大不是件简
    
                                
    • 
                                
  • [Zookeeper学习笔记九]Zookeeper源代码分析之Zookeeper构造过程
                                    bit1129
zookeeper
                                    
       Zookeeper重载了几个构造函数，其中构造者可以提供参数最多，可定制性最多的构造函数是   
  
public ZooKeeper(String connectString, int sessionTimeout, Watcher watcher, long sessionId, byte[] sessionPasswd, boolea
    
                                
    • 
                                
  • 【Java命令三】jstack
                                    bit1129
jstack
                                    
    jstack是用于获得当前运行的Java程序所有的线程的运行情况(thread dump），不同于jmap用于获得memory dump 
  
[hadoop@hadoop sbin]$ jstack
Usage:
    jstack [-l] <pid>
        (to connect to running process)
    jstack -F 
    
                                
    • 
                                
  • jboss 5.1启停脚本　动静分离部署
                                    ronin47

                                    
    以前启动jboss，往各种xml配置文件，现只要运行一句脚本即可。start nohup sh /**/run.sh -c servicename  -b ip -g  clustername   -u broatcast jboss.messaging.ServerPeerID=int  -Djboss.service.binding.set=p
    
                                
    • 
                                
  • UI之如何打磨设计能力?
                                    brotherlamp
UIui教程ui自学ui资料ui视频
                                    
      
在越来越拥挤的初创企业世界里，视觉设计的重要性往往可以与杀手级用户体验比肩。在许多情况下，尤其对于 Web 初创企业而言，这两者都是不可或缺的。前不久我们在《右脑革命：别学编程了，学艺术吧》中也曾发出过重视设计的呼吁。如何才能提高初创企业的设计能力呢?以下是 9 位创始人的体会。 
1.找到自己的方式 
如果你是设计师，要想提高技能可以去设计博客和展示好设计的网站如D-lists或
    
                                
    • 
                                
  • 三色旗算法
                                    bylijinnan
java算法
                                    
    

import java.util.Arrays;

/**
问题：
假设有一条绳子，上面有红、白、蓝三种颜色的旗子，起初绳子上的旗子颜色并没有顺序，
您希望将之分类，并排列为蓝、白、红的顺序，要如何移动次数才会最少，注意您只能在绳
子上进行这个动作，而且一次只能调换两个旗子。

网上的解法大多类似：
在一条绳子上移动，在程式中也就意味只能使用一个阵列，而不使用其它的阵列来
    
                                
    • 
                                
  • 警告:No configuration found for the specified action: \'s
                                    chiangfai
configuration
                                    
    1.index.jsp页面form标签未指定namespace属性。 
<!--index.jsp代码--> 
 
<%@taglib prefix="s" uri="/struts-tags"%>
...
<s:form action="submit" method="post"&g
    
                                
    • 
                                
  • redis -- hash_max_zipmap_entries设置过大有问题
                                    chenchao051
redishash
                                    
    使用redis时为了使用hash追求更高的内存使用率，我们一般都用hash结构，并且有时候会把hash_max_zipmap_entries这个值设置的很大，很多资料也推荐设置到1000，默认设置为了512，但是这里有个坑 
  
#define ZIPMAP_BIGLEN 254
#define ZIPMAP_END 255 
  
  
/* Return th
    
                                
    • 
                                
  • select into outfile access deny问题
                                    daizj
mysqltxt导出数据到文件
                                    
    本文转自：http://hatemysql.com/2010/06/29/select-into-outfile-access-deny%E9%97%AE%E9%A2%98/ 
 
为应用建立了rnd的帐号，专门为他们查询线上数据库用的，当然，只有他们上了生产网络以后才能连上数据库，安全方面我们还是很注意的，呵呵。 
授权的语句如下： 
grant select on armory.* to rn
    
                                
    • 
                                
  • phpexcel导出excel表简单入门示例
                                    dcj3sjt126com
PHPExcelphpexcel
                                    
      
<?php 
error_reporting(E_ALL); 
ini_set('display_errors', TRUE); 
ini_set('display_startup_errors', TRUE); 
  
if (PHP_SAPI == 'cli') 
 die('This example should only be run from a Web Brows
    
                                
    • 
                                
  • 美国电影超短200句
                                    dcj3sjt126com
电影
                                    
    1. I see． 我明白了。2. I quit! 我不干了!3. Let go! 放手!4. Me too． 我也是。5. My god! 天哪!6. No way! 不行!7. Come on． 来吧(赶快)8. Hold on． 等一等。9. I agree。 我同意。10. Not bad． 还不错。11. Not yet． 还没。12. See you． 再见。13. Shut up! 
    
                                
    • 
                                
  • Java访问远程服务
                                    dyy_gusi
httpclientwebservicegetpost
                                    
        随着webService的崛起，我们开始中会越来越多的使用到访问远程webService服务。当然对于不同的webService框架一般都有自己的client包供使用，但是如果使用webService框架自己的client包，那么必然需要在自己的代码中引入它的包，如果同时调运了多个不同框架的webService，那么就需要同时引入多个不同的clien
    
                                
    • 
                                
  • Maven的settings.xml配置
                                    geeksun
settings.xml
                                    
    settings.xml是Maven的配置文件，下面解释一下其中的配置含义： 
settings.xml存在于两个地方： 
1.安装的地方：$M2_HOME/conf/settings.xml 
2.用户的目录：${user.home}/.m2/settings.xml 
前者又被叫做全局配置，后者被称为用户配置。如果两者都存在，它们的内容将被合并，并且用户范围的settings.xml优先。 

    
                                
    • 
                                
  • ubuntu的init与系统服务设置
                                    hongtoushizi
ubuntu
                                    
    转载自： 
http://iysm.net/?p=178  init 
Init是位于/sbin/init的一个程序，它是在linux下，在系统启动过程中，初始化所有的设备驱动程序和数据结构等之后，由内核启动的一个用户级程序，并由此init程序进而完成系统的启动过程。 
ubuntu与传统的linux略有不同，使用upstart完成系统的启动，但表面上仍维持init程序的形式。  
运行
    
                                
    • 
                                
  • 跟我学Nginx+Lua开发目录贴
                                    jinnianshilongnian
nginxlua
                                    
    使用Nginx+Lua开发近一年的时间，学习和实践了一些Nginx+Lua开发的架构，为了让更多人使用Nginx+Lua架构开发，利用春节期间总结了一份基本的学习教程，希望对大家有用。也欢迎谈探讨学习一些经验。  
  目录 
第一章 安装Nginx+Lua开发环境 
第二章 Nginx+Lua开发入门 
第三章 Redis/SSDB+Twemproxy安装与使用 
第四章 L
    
                                
    • 
                                
  • php位运算符注意事项
                                    home198979
位运算PHP&
                                    
    $a = $b = $c = 0;
$a & $b = 1;
$b | $c = 1 
 问a,b,c最终为多少? 
  
当看到这题时，我犯了一个低级错误，误 以为位运算符会改变变量的值。所以得出结果是1 1 0 
但是位运算符是不会改变变量的值的，例如： 
$a=1;$b=2;
$a&$b;
 
 这样a,b的值不会有任何改变 

    
                                
    • 
                                
  • Linux shell数组建立和使用技巧
                                    pda158
linux
                                    
    1.数组定义   　　[chengmo@centos5 ~]$ a=(1 2 3 4 5)   　　[chengmo@centos5 ~]$ echo $a   　　1   　　一对括号表示是数组，数组元素用“空格”符号分割开。   　　 
2.数组读取与赋值   　　得到长度：   　　[chengmo@centos5 ~]$ echo ${#a[@]}   　　5   　　用${#数组名[@或
    
                                
    • 
                                
  • hotspot源码(JDK7)
                                    ol_beta
javaHotSpotjvm
                                    
    源码结构图，方便理解： 
  
├─agent                            Serviceab
    
                                
    • 
                                
  • Oracle基本事务和ForAll执行批量DML练习
                                    vipbooks
oraclesql
                                    
    基本事务的使用： 
从账户一的余额中转100到账户二的余额中去，如果账户二不存在或账户一中的余额不足100则整笔交易回滚 
 
 

select * from account;
-- 创建一张账户表
create table account(
       -- 账户ID
       id number(3) not null,
       -- 账户名称
       nam
    
                                
    •