Alisone_li
Alisone_li

【React 基础】之 React 基本介绍、jsx 规则、模块与组件

React 全家桶

  • React 基础
  • React-Router 路由
  • PubSub + 消息管理库
  • Redux 集中式的状态管理
  • Ant-Design UI 组件库
  • …

React 简介

官网

  • 英文官网: https://reactjs.org/
  • 中文官网: https://react.docschina.org/

基本介绍

React 是什么

  • 官网定义：

    用于动态构建用户界面的 JavaScript 库(只关注于视图)

    也就是说，React 是一个将数据渲染为 HTML 视图的开源 JavaScript 库。

  • 由 Facebook 开发，且开源

为什么要学 React?

  • 1，原生 JavaScript 操作 DOM 繁琐、效率低（DOM-API 操作 UI）。
  • 2，使用 JavaScript 直接操作 DOM，浏览器会进行大量的重绘重排。
  • 3，原生 JavaScript 没有 组件化，代码复用率低。

React 的特点

  • 1，采用 组件化 模式、声明式编码，提高开发效率及组件复用率。
  • 2，在 React Native 中，可以使用 React 语法进行 移动端开发。（开发 Android、IOS）
  • 3，使用 虚拟DOM + 优秀的 Diffing 算法，尽量减少与真实 DOM 的交互。

React高效的原因

  • 使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。
  • DOM Diffing算法, 最小化页面重绘

准备工作

学习 React 之前，你要掌握的 JavaScript 基础知识

  • 判断 this 的指向
  • class(类)
  • ES6 语法规范
  • npm 包管理器
  • 原型、原型链
  • 数组常用方法
  • 模块化

基本使用

相关js库

  • 1，react.js：React核心库。（返回 React ）
  • 2，react-dom.js：提供操作DOM的react扩展库。(返回 ReactDOM )
  • 3，babel.min.js：解析JSX语法代码转为JS代码的库。

基础示例

效果
【React 基础】之 React 基本介绍、jsx 规则、模块与组件_第1张图片
代码实现

  • hello_react.html

    
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>hello_reacttitle>
    head>
    <body>
        
        <div id="test">div>

        
        <script type="text/javascript" src="../js/react.development.js">script>
        
        <script type="text/javascript" src="../js/react-dom.development.js">script>
        
        <script type="text/javascript" src="../js/babel.min.js">script>

        <script type="text/babel">/* 此处一定要写 babel，即告知浏览器使用babel将jsx转为js */
        // 1. 创建虚拟 DOM，jsx 方式
        const VDOM = <h1>Hello, React</h1> /* 此处一定不要写引号，因为不是字符串 */
        // 2. 渲染虚拟 DOM 到页面
        /**
         * @param1：虚拟DOM 
         * @param2：容器，节点 
         */
        ReactDOM.render(VDOM, document.getElementById("test")) 
        script>
    body>
html>

创建虚拟DOM的两种方式

【React 基础】之 React 基本介绍、jsx 规则、模块与组件_第2张图片

  • 1，纯JS方式(一般不用)，不需要 Babel

      /**
   * @param1：标签名
   * @param2：{Object} 标签属性
   * @param3：标签内容 
  */
  const VDOM = React.createElement(
  	'h1', 
  	{
       id: 'title'}, 
  	React.createElement('span', {
       }, 'Hello React')
  )

  • 2，JSX方式：纯 js 的语法糖

    const VDOM = (  /* 此处一定不要写引号，因为不是字符串 */
    <h1 id="title">
    	<span>Hello, React</span>
    </h1>
)

    Jsx 的语法最终通过 babel 转换为 js 语法，也就是说，以 JSX 方式创建的虚拟DOM ，将编译成 纯JS方式创建的虚拟DOM

虚拟DOM与真实DOM

  • 1，React提供了一些API来创建一种 “特别” 的一般js对象

    • const VDOM = React.createElement('xx',{
         id:'xx'},'xx')

    • 上面创建的就是一个简单的虚拟DOM对象

  • 2，虚拟DOM对象最终都会被React转换为真实的DOM

  • 3，我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界面

  • 代码比较

    const VDOM = ( // 虚拟DOM
    <h1 id="title">
   		<span>Hello, React</span>
    </h1>
) 
onsole.log("虚拟DOM：", VDOM);
const TDOM = document.getElementById("demo")　// 真实DOM
console.log("真实DOM：", TDOM);
debugger;

    关于虚拟DOM

    1. 本质是 Object 类型的对象（一般对象）
    2. 虚拟DOM 比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性
    3. 虚拟DOM最终会被React转化为真实DOM，呈现在页面上

React JSX

基础案例

效果
【React 基础】之 React 基本介绍、jsx 规则、模块与组件_第3张图片
代码实现

  • 总结 jsx 规则

    <script type="text/babel">
    const myId = 'aTgUiGu'
    const myData = 'Hello, React'
    // 1. 创建虚拟DOM
    const VDOM = (
    <div>
        <h2 className="title" id={
       myId.toLowerCase()}>
            <span style={
       {
        color: 'white', fontSize: '20px' }}>{
       myData.toLowerCase()}</span>
        </h2>
        <h2 className="title" id={
       myId.toLowerCase()}>
            <span style={
       {
        color: 'white', fontSize: '20px' }}>{
       myData.toLowerCase()}</span>
        </h2>
        <input type="text" />
        <Good>123</Good>
    </div>
    )

    // 渲染虚拟DOM到页面
    ReactDOM.render(VDOM, document.getElementById('test'))
</script>

总结：jsx 语法规则

jsx 语法规则

  1. 定义虚拟DOM 时，不要写引号
  2. 标签中混入 JS表达式 时要用 {}
  3. 样式的类名指定不要用 class，要用 className
  4. 内联样式，要用 style={ {key:value}} 的形式去写
  5. 虚拟DOM必须只有一个根标签
  6. 标签必须闭合
  7. 标签首字母
    • 1，若小写字母开头，则将该标签转为 html 中同名元素，若html中无该标签对应的同名元素，则报错。
    • 2，若大写字母开头，react 就去渲染对应的组件，若组件没有定义，则报错。

JSX

  • 1，全称: JavaScript XML

  • 2，react定义的一种类似于XML的JS扩展语法: JS + XML

    • XML 早期用于存储和传输数据

      <student>
	<name>Tomname>
    <age>19age>
student>

  • 3，本质是 React.createElement(component, props, ...children) 方法的语法糖

  • 4，作用: 用来简化创建虚拟DOM

    • 写法：var ele =

      Hello JSX!

    • 注意1：它不是字符串, 也不是HTML/XML标签
    • 注意2：它最终产生的就是一个JS对象

  • 5，标签名任意: HTML标签或其它标签

  • 6，标签属性任意: HTML标签属性或其它

  • 7，基本语法规则

    • 遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
    • 遇到以 { 开头的代码，以JS语法解析: 标签中的 js 表达式必须用 { } 包含

  • 8，babel.js的作用

    • 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
    • 只要用了JSX，都要加上type=“text/babel”, 声明需要babel来处理

渲染虚拟DOM(元素)

  • 语法: ReactDOM.render(virtualDOM, containerDOM)
  • 作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示
  • 参数说明
    • 参数一: 纯js或jsx创建的虚拟dom对象
    • 参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)

JSX练习

  • 需求: 动态展示如下列表
    【React 基础】之 React 基本介绍、jsx 规则、模块与组件_第4张图片

  • 代码实现

    // 模拟一些数据
// 注意：写数组可以，写成对象会报错
const data = ['Angular', 'React', 'Vue']
// 1. 创建虚拟DOM
const VDOM = (
    <div>
        <h1>前端js框架列表</h1>
        <ul>
            {
       
                data.map((item, index) => {
       
                    return <li key={
       index}>{
       item}</li>
                })
            }
        </ul>
    </div>
)
// 2. 渲染虚拟DOM到页面
ReactDOM.render(VDOM, document.getElementById('test'))

【js语句(代码)】与【js表达式】

一定注意区分：

  1. 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方

    • 下面这些都是表达式：
      (1). a
      (2). a + b
      (3). demo(1)
      (4). arr.map() 遍历
      (5). function test () {}

  2. 语句(代码)：

    • 下面这些都是语句(代码)：
      (1). if () {}
      (2). for () {}
      (3). switch () { case: xxxx }

模块与组件

【React 基础】之 React 基本介绍、jsx 规则、模块与组件_第5张图片

模块

  • 理解：向外提供特定功能的js程序, 一般就是一个js文件
  • 为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。
  • 作用：复用js, 简化js的编写, 提高js运行效率

组件

  • 理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
  • 为什么要用组件： 一个界面的功能更复杂
  • 作用：复用编码, 简化项目编码, 提高运行效率

模块化与组件化

模块化

当应用的js都以模块来编写的, 这个应用就是一个模块化的应用

组件化

当应用是以多组件的方式实现, 这个应用就是一个组件化的应用

你可能感兴趣的:(ReactJs,reactjs)

  • JSX编译革命：React 17+无需导入的Babel优化与AST深层解析 PineappleCode react.js前端前端框架
    二、ReactJSX1.什么是JSXJSX是React中的一项核心技术，本质上是JavaScript的语法扩展(JavaScriptXML)。根据最新的React文档，JSX被定义为"在JavaScript中嵌入类似HTML的标签语法"，它允许我们直观地描述UI应该呈现的样子。从本质上看，JSX是React.createElement()函数的语法糖，它使UI结构的描述更加直观和可读。React团
  • React - 错误边界（Error boundary） 风轻轻~ #React__基础react.js
    React-错误边界（Errorboundary）一.理解二.使用1.使用方式2.使用案例错误边界：https://zh-hans.reactjs.org/docs/error-boundaries.html一.理解部分UI的JavaScript错误不应该导致整个应用崩溃，为了解决这个问题，React16引入了一个新的概念——错误边界。错误边界是一种React组件，这种组件可以捕获发生在其子组件树
  • 推荐使用ReactJS Cron：一款强大且灵活的定时任务编辑器
    推荐使用ReactJSCron：一款强大且灵活的定时任务编辑器react-js-cronAReactcroneditorbuiltwithantd项目地址:https://gitcode.com/gh_mirrors/re/react-js-cron项目简介ReactJSCron是一个基于React和AntDesign构建的高效能定时任务编辑组件。它提供了友好的用户界面，帮助开发者轻松创建和管理c
  • ReactJS笔记之JSX描述UI信息笔记1 小白爱准准 ReactJS
    JSX原理如何用JavaScript对象来表现一个DOM元素的结构，举个例子：HelloClick每个DOM元素的结构都可以用JavaScript的对象来表示。你会发现一个DOM元素包含的信息其实只有三个：标签名，属性，子元素。所以其实上面这个HTML所有的信息我们都可以用合法的JavaScript对象来表示{tag:'div',attrs:{className:'box',id:'content
  • React学习教程（开发文档、学习文档） 大卡拉米 react.js学习前端
    ReactReact前言官方文档React18中文文档1(国内社区)：https://react.docschina.org/React18中文文档2(官方)：https://zh-hans.reactjs.orgReact18英文文档：https://reactjs.orgReact17英文文档：https://17.reactjs.orgreact概述React是一个用于动态构建用户界面的Js
  • html5 vue react,Web前端技术（JS，HTML5，JQuery，React，Vue.js） Partfolio html5vuereact
    Web前端框架概览Web前端技术架构：展示层：html，css控制层：JavaScript后端服务接口：ajax，restful，node.jsWeb前端运行原理解析Web前端当前开发趋势典型的web前端开发框架：jQuery、BootstrapVueReactJSWeb前端框架实现原理主流JS框架实现剖析：jQuery、Vue，ReactJS，Node.JS浏览器工作原理JavaScript对象
  • python 新闻 api + react js 客户端。 waterHBO pythonjspython
    1.起因，目的:前面写了几个爬虫。那么这些数据怎么使用。使用api，看看到底有哪些新闻。感受：最初只是一个想法，然而实现的过程中却很枯燥乏味，甚至怀疑为什么要做这个事情.2.先看效果效果就是能行。3.过程:fastapi+reactjs代码，无。见完整项目。4.结论+todo这部分，没什么新东西，就是想看看，能否行得通。希望对大家有帮助。
  • react完整项目搭建的思路 佛系努力中…… reactreactjs
    react完整项目搭建的思路react完整项目搭建的思路1.使用creacte-react-app初始化项目2.安装所需插件:路由、网络、样式、组件库3.reactjs目录结构组织4.配置@路径别名4.配置路由5.网络配置,对axios进行封装》获取当前环境变量6.配置代理解决跨域7.配置使用iconfont8.状态管理1.使用creacte-react-app初始化项目依赖安装create-re
  • Table警告：Each child in a list should have a unique “key“ prop bulucc 日常积累前端javascripthtml
    问题描述devScripts.js:6523Warning:Eachchildinalistshouldhaveaunique"key"prop.Checktherendermethodof`Body`.Seehttps://reactjs.org/link/warning-keysformoreinformation.atBodyRow(http://**:8000/umi.js:392823:
  • 【React学习笔记】第一章：React入门 Mae_cpski 前端-Reactreact.js学习笔记
    1.React介绍中文官网：https://react.docschina.org/英文官网：https://reactjs.org/1.1React是什么react是一个用于构建用户界面的开源JavaScript库。（操作DOM呈现页面）由Facebook的软件工程师JordanWalke创建，于2011年部署于Facebook的newsfeed；2012年部署于Instagram；2013年5
  • 深度掌握 ReactJS 高级概念：前端开发者必备 前端javascript
    ReactHook深入浅出CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读这篇文章汇总了ReactJS中值得深入研究的高级概念。读完后，不仅在前端面试中能更胸有成竹，还能自行开发一个类似ReactJS的UI库。目录Rendering的含义与过程Re-rendering发生的机制及原因VirtualDOM的原理Reconciliation算法的运行方式ReactJS的性能优化方案1
  • 使用指南：react-facebook-pixel开源项目深度探索 梅研芊
    使用指南：react-facebook-pixel开源项目深度探索react-facebook-pixelReactJSwrapperforFacebook'sPixel项目地址:https://gitcode.com/gh_mirrors/re/react-facebook-pixel1.项目目录结构及介绍react-facebook-pixel是一个专为React应用程序设计的库，用于轻松集成
  • 探索表单设计新境界：React JSON Schema Form 编辑器 包椒浩Leith
    探索表单设计新境界：ReactJSONSchemaForm编辑器react-json-schema-form-builderVisualeditorforformsbasedonjsonschema,builtinReactJS项目地址:https://gitcode.com/gh_mirrors/re/react-json-schema-form-builder在当今快速迭代的软件开发领域，灵活
  • 7. React Hooks 草木红 #Reactreact.js前端前端框架
    官方文档：https://zh-hans.react.dev/reference/react/hooks官方文档：https://zh-hans.legacy.reactjs.org/docs/hooks-intro.htmlRouter6的一个中文文档：https://baimingxuan.github.io/react-router6-doc/react：版本18.2.0node：版本18.
  • 强力推荐：React JS清洁架构——打造可扩展的前端应用基石 柏廷章Berta
    强力推荐：ReactJS清洁架构——打造可扩展的前端应用基石react_js_clean_architectureReactJSCleanarchitecture:AboilerplatethatmakesiteasyandintuitivetoimplementUncleBob'sCleanArchitectureinReactJS.Thisboilerplateprovidesbasicpro
  • 【微前端】ReactJS实现微前端的代码架构 小涵 前端框架前端react.js架构前端框架javascriptmicroservices微前端
    【微前端】ReactJS实现微前端的代码架构目录【微前端】ReactJS实现微前端的代码架构通用步骤基于微前端的应用典型树结构：示例代码Webpack设置：Babel设置：配置Webpack别名：依赖管理：推荐超级课程：Docker快速入门到精通Kubernetes入门到大师通关课AWS云服务快速入门实战微前端是一种构建Web应用程序的架构方法，涉及将单块前端拆分为更小、更易管理的组件。这些更小的
  • React JSX: A Deep Dive into the JavaScript XML lly202406 开发语言
    ReactJSX:ADeepDiveintotheJavaScriptXMLIntroductionReactJSX,oftenreferredtoassimplyJSX,isasyntaxextensionforJavaScriptthatisusedextensivelyintheReactlibraryforbuildinguserinterfaces.Itallowsdeveloperst
  • day53（reactJS） 李中豪前端大佬 react.js前端前端框架scss
    reactJS框架的介绍1.React框架的建造原因2.该框架解决了什么问题3.该框架有哪些特点4.该框架如何解决问题5.该框架和传统MVC的关系6.该框架的使用步骤7.React项目的主要部分8.类组件相关9.sass的使用1.React框架的建造原因起源于FaceBook公司的内部项目，在架构公司内部项目时，FaceBook对当时市面上所有的JavaScriptMVC框架都不满意，认为MVC模
  • day56（reactJS）受控组件以及高阶组件 李中豪前端大佬 react.js前端javascript
    一.受控组件如何理解受控组件？（什么是受控组件？+什么情况下是非受控组件？+如何将组件变成受控组件？）1.受控组件是指value值受到React组件状态控制的表单元素2.非受控组件：HTML中的表单元素是可输入的，也就是有自己的可变状态,但是默认表单元素的值不受所在组件state控制,也就是表单元素所在组件无法实时获取最新的表单元素值，表单元素值不受所在组件状态的控制,我们将这样的表单元素称作:非
  • react起源 lemmo
    简介React（有时叫React.js或ReactJS），是一个为数据提供渲染为HTML视图的开源JavaScript库。React视图通常采用包含以自定义HTML标记规定的其他组件的组件渲染。React为程序员提供了一种子组件不能直接影响外层组件（"dataflowsdown"）的模型，数据改变时对HTML文档的有效更新，和现代单页应用中组件之间干净的分离。它由Facebook、Instagra
  • Web前端开发的框架可以应用到哪些地方 一只有头发的程序猿 工作学习web前端JavaScript编程程序员前端开发
    随着时间的推移，网页设计越来越具有创新性。web前端开发将成为2020年技术领域最热门的学科之一。以前，前端空间的开发人员只要了解一些HTML，CSS，也许还有jQuery来创建交互式网站，就足够了。但是今天，他们面临着广泛且不断变化的开发技能生态系统；最近几年，我们使用JavaScript为主要的Web应用程序提供了强大的新库和框架，例如ReactJS，VueJS和angularJS。这3个可以
  • React：高阶组件|ref转发 是席木木啊 Reactreact.js前端javascript
    高阶组件参考文档：高阶组件–React(reactjs.org)高阶组件（Higher-OrderComponents，简称HOC）是React中用于复用组件逻辑的一种高级技巧。具体而言：高阶组件是参数为组件，返回值为新组件的函数。组件是将props转换为UI，而高阶组件是将组件转换为另一个组件。HOC在React的第三方库中很常见，例如Redux的connect和Relay的createFrag
  • You Probably Dont Need Derived State 阿里王成文
    今天在segmentfault上写了一篇有关React16.3的文章，大家感兴趣的话可以去看看，以后我几乎都会在segmentfault上面写文章了，大家感兴趣的话的话保持联系，经常交流，共同进步，主攻前端。本文是一片翻译，原本来自https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html。
  • ReactJS+antd+select标签组件（可单选，多选，可将输入项作为选项） 流砂飞雪 reactantdreactjs
    MySelectTag代码块如下：importReact,{useState}from'react';import{Select}from'antd';/***@paraminitialValue默认值*@paramonChange值改变时调用方法*@paramisSingle是否单选*@paramdata选项初始值*@returns{*}*@constructor*/constMySelectT
  • Redux-003-使用 react-redux 空乱木
    本文视频地址：https://www.qiuzhi99.com/movies/react-redux/150.html参考链接https://github.com/reactjs/react-reduxhttps://github.com/reactjs/react-redux/blob/master/docs/api.md目录结构image.pngactions定义action事件constan
  • react做一个轮播图（比对reactjs-swiper、swiper方式） sasaraku. 前端
    1、使用插件：reactjs-swiperhttps://www.cnblogs.com/cbp-jltx/p/9681838.htmlreact插入图片：https://www.cnblogs.com/cheeseCatMiao/p/9797136.html在public下建文件夹imgs这个方法的示意图（虽然它动的又慢又卡，但真的只是视频转gif不灵活的锅，原本还是很流畅的。这个方法不能点底下
  • react框架知识点 zmw1502 react.jsjavascript前端
    react框架知识点1、React入门：React简介。官网：英文官网:https://reactjs.org/。中文官网:https://react.docschina.org。介绍描述：用于动态构建用户界面的JavaScript库(只关注于视图)。由Facebook开源。React的特点：声明式编码，组件化编码。ReactNative编写原生应用。高效（优秀的Diffing算法）。React高
  • 使用GPT实现一个简单的网站 李黎明 gpt教程
    背景Inthisexcitingtutorialvideo,you’lldiscoverhowtouse文心一言,apowerfullanguagemodeldevelopedby百度,togenerateReactJScodeforasimpleblogwebsite.With文心一言’shelp,youcanquicklycreateablogwebsitethat’seasytocustom
  • React详解（基础知识）——react学习part01 哈喽…… react.js学习笔记
    React详解（基础知识）——react学习part01react简介1.官网2.介绍描述3.React的特点4.React高效的原因React的使用1.基本使用1.1创建虚拟DOM的两种方式1.2渲染虚拟DOM1.3虚拟DOM与真实DOM2.ReactJSX2.1JSX3.模块与组件、模块化与组件化的理解3.1模块3.2组件3.3模块化3.4组件化React面向组件编程4.1函数式组件4.2类式
  • React爬坑之路三：Dva boJIke java前端react.js
    前两篇写了react各种基本操作和主要概念但其实没必要那么复杂直接用框架就好啦这年头前端框架真是一睁眼就多出好几个傻瓜级教程写的不合理的地方请批评指正React官网：https://reactjs.org/菜鸟教程：http://www.runoob.com/react/react-tutorial.htmlES6入门:http://es6.ruanyifeng.com/AntDesign：htt
  • html 周华华 html
    js 1，数组的排列 var arr=[1,4,234,43,52,]; for(var x=0;x<arr.length;x++){    for(var y=x-1;y<arr.length;y++){      if(arr[x]<arr[y]){     &
  • 【Struts2 四】Struts2拦截器 bit1129 struts2拦截器
    Struts2框架是基于拦截器实现的，可以对某个Action进行拦截，然后某些逻辑处理，拦截器相当于AOP里面的环绕通知，即在Action方法的执行之前和之后根据需要添加相应的逻辑。事实上，即使struts.xml没有任何关于拦截器的配置，Struts2也会为我们添加一组默认的拦截器，最常见的是，请求参数自动绑定到Action对应的字段上。   Struts2中自定义拦截器的步骤是：
  • make:cc 命令未找到解决方法 daizj linux命令未知make cc
    安装rz sz程序时，报下面错误：   [root@slave2 src]# make posix cc   -O -DPOSIX -DMD=2 rz.c -o rz make: cc：命令未找到 make: *** [posix] 错误 127   系统：centos 6.6 环境：虚拟机   错误原因：系统未安装gcc，这个是由于在安
  • Oracle之Job应用 周凡杨 oracle job
    最近写服务，服务上线后，需要写一个定时执行的SQL脚本，清理并更新数据库表里的数据，应用到了Oracle 的 Job的相关知识。在此总结一下。   一：查看相关job信息    1、相关视图  dba_jobs  all_jobs  user_jobs  dba_jobs_running 包含正在运行
  • 多线程机制 朱辉辉33 多线程
    转至http://blog.csdn.net/lj70024/archive/2010/04/06/5455790.aspx 程序、进程和线程： 程序是一段静态的代码，它是应用程序执行的蓝本。进程是程序的一次动态执行过程，它对应了从代码加载、执行至执行完毕的一个完整过程，这个过程也是进程本身从产生、发展至消亡的过程。线程是比进程更小的单位，一个进程执行过程中可以产生多个线程，每个线程有自身的
  • web报表工具FineReport使用中遇到的常见报错及解决办法（一） 老A不折腾 web报表finereportjava报表报表工具
    FineReport使用中遇到的常见报错及解决办法（一） 这里写点抛砖引玉，希望大家能把自己整理的问题及解决方法晾出来，Mark一下，利人利己。   出现问题先搜一下文档上有没有，再看看度娘有没有，再看看论坛有没有。有报错要看日志。下面简单罗列下常见的问题，大多文档上都有提到的。   1、address pool is full： 含义：地址池满，连接数超过并发数上
  • mysql rpm安装后没有my.cnf 林鹤霄 没有my.cnf
    Linux下用rpm包安装的MySQL是不会安装/etc/my.cnf文件的， 至于为什么没有这个文件而MySQL却也能正常启动和作用，在这儿有两个说法， 第一种说法，my.cnf只是MySQL启动时的一个参数文件，可以没有它，这时MySQL会用内置的默认参数启动， 第二种说法，MySQL在启动时自动使用/usr/share/mysql目录下的my-medium.cnf文件，这种说法仅限于r
  • Kindle Fire HDX root并安装谷歌服务框架之后仍无法登陆谷歌账号的问题 aigo root
    原文：http://kindlefireforkid.com/how-to-setup-a-google-account-on-amazon-fire-tablet/   Step 4: Run ADB command from your PC   On the PC, you need install Amazon Fire ADB driver and instal
  • javascript 中var提升的典型实例 alxw4616 JavaScript
    // 刚刚在书上看到的一个小问题,很有意思.大家一起思考下吧 myname = 'global'; var fn = function () { console.log(myname); // undefined var myname = 'local'; console.log(myname); // local }; fn() // 上述代码实际上等同于以下代码 m
  • 定时器和获取时间的使用 百合不是茶 时间的转换定时器
    定时器:定时创建任务在游戏设计的时候用的比较多   Timer();定时器 TImerTask();Timer的子类  由 Timer 安排为一次执行或重复执行的任务。       定时器类Timer在java.util包中。使用时，先实例化，然后使用实例的schedule(TimerTask task, long delay)方法，设定
  • JDK1.5 Queue bijian1013 javathreadjava多线程Queue
    JDK1.5 Queue LinkedList： LinkedList不是同步的。如果多个线程同时访问列表，而其中至少一个线程从结构上修改了该列表，则它必须 保持外部同步。（结构修改指添加或删除一个或多个元素的任何操作；仅设置元素的值不是结构修改。）这一般通过对自然封装该列表的对象进行同步操作来完成。如果不存在这样的对象，则应该使用 Collections.synchronizedList 方
  • http认证原理和https bijian1013 httphttps
    一.基础介绍         在URL前加https://前缀表明是用SSL加密的。 你的电脑与服务器之间收发的信息传输将更加安全。         Web服务器启用SSL需要获得一个服务器证书并将该证书与要使用SSL的服务器绑定。 http和https使用的是完全不同的连接方式，用的端口也不一样,前者是80，后
  • 【Java范型五】范型继承 bit1129 java
    定义如下一个抽象的范型类，其中定义了两个范型参数，T1，T2   package com.tom.lang.generics; public abstract class SuperGenerics<T1, T2> { private T1 t1; private T2 t2; public abstract void doIt(T
  • 【Nginx六】nginx.conf常用指令(Directive) bit1129 Directive
    1. worker_processes    8; 表示Nginx将启动8个工作者进程，通过ps -ef|grep nginx,会发现有8个Nginx Worker Process在运行   nobody 53879 118449 0 Apr22 ? 00:26:15 nginx: worker process
  • lua 遍历Header头部 ronin47 lua header 遍历　
    local headers = ngx.req.get_headers()   ngx.say("headers begin", "<br/>")   ngx.say("Host : ", he
  • java-32.通过交换a,b中的元素，使[序列a元素的和]与[序列b元素的和]之间的差最小(两数组的差最小)。 bylijinnan java
    import java.util.Arrays; public class MinSumASumB { /** * Q32.有两个序列a,b，大小都为n,序列元素的值任意整数，无序. * * 要求：通过交换a,b中的元素，使[序列a元素的和]与[序列b元素的和]之间的差最小。 * 例如: * int[] a = {100,99,98,1,2,3
  • redis 开窍的石头 redis
    在redis的redis.conf配置文件中找到# requirepass foobared 把它替换成requirepass 12356789 后边的12356789就是你的密码 打开redis客户端输入config get requirepass 返回 redis 127.0.0.1:6379> config get requirepass 1) "require
  • [JAVA图像与图形]现有的GPU架构支持JAVA语言吗？ comsci java语言
          无论是opengl还是cuda，都是建立在C语言体系架构基础上的，在未来，图像图形处理业务快速发展，相关领域市场不断扩大的情况下，我们JAVA语言系统怎么从这么庞大，且还在不断扩大的市场上分到一块蛋糕，是值得每个JAVAER认真思考和行动的事情       
  • 安装ubuntu14.04登录后花屏了怎么办 cuiyadll ubuntu
    这个情况，一般属于显卡驱动问题。 可以先尝试安装显卡的官方闭源驱动。 按键盘三个键：CTRL + ALT  +  F1 进入终端，输入用户名和密码登录终端： 安装amd的显卡驱动 sudo  apt-get  install  fglrx 安装nvidia显卡驱动 sudo  ap
  • SSL 与 数字证书 的基本概念和工作原理 darrenzhu 加密ssl证书密钥签名
    SSL 与 数字证书 的基本概念和工作原理 http://www.linuxde.net/2012/03/8301.html SSL握手协议的目的是或最终结果是让客户端和服务器拥有一个共同的密钥，握手协议本身是基于非对称加密机制的，之后就使用共同的密钥基于对称加密机制进行信息交换。 http://www.ibm.com/developerworks/cn/webspher
  • Ubuntu设置ip的步骤 dcj3sjt126com ubuntu
    在单位的一台机器完全装了Ubuntu Server，但回家只能在XP上VM一个，装的时候网卡是DHCP的，用ifconfig查了一下ip是192.168.92.128,可以ping通。 转载不是错： Ubuntu命令行修改网络配置方法 /etc/network/interfaces打开后里面可设置DHCP或手动设置静态ip。前面auto eth0，让网卡开机自动挂载. 1. 以D
  • php包管理工具推荐 dcj3sjt126com PHPComposer
    http://www.phpcomposer.com/   Composer是 PHP 用来管理依赖（dependency）关系的工具。你可以在自己的项目中声明所依赖的外部工具库（libraries），Composer 会帮你安装这些依赖的库文件。 中文文档  入门指南  下载  安装包列表 Composer 中国镜像
  • Gson使用四（TypeAdapter） eksliang jsongsonGson自定义转换器gsonTypeAdapter
    转载请出自出处：http://eksliang.iteye.com/blog/2175595 一.概述        Gson的TypeAapter可以理解成自定义序列化和返序列化 二、应用场景举例        例如我们通常去注册时（那些外国网站），会让我们输入firstName，lastName,但是转到我们都
  • JQM控件之Navbar和Tabs gundumw100 htmlxmlcss
    在JQM中使用导航栏Navbar是简单的。 只需要将data-role="navbar"赋给div即可： <div data-role="navbar"> <ul> <li><a href="#" class="ui-btn-active&qu
  • 利用归并排序算法对大文件进行排序 iwindyforest java归并排序大文件分治法Merge sort
      归并排序算法介绍，请参照Wikipeida zh.wikipedia.org/wiki/%E5%BD%92%E5%B9%B6%E6%8E%92%E5%BA%8F 基本思想： 大文件分割成行数相等的两个子文件，递归（归并排序）两个子文件，直到递归到分割成的子文件低于限制行数 低于限制行数的子文件直接排序 两个排序好的子文件归并到父文件 直到最后所有排序好的父文件归并到输入
  • iOS UIWebView URL拦截 啸笑天 UIWebView
    本文译者：candeladiao，原文：URL filtering for UIWebView on the iPhone说明：译者在做app开发时，因为页面的javascript文件比较大导致加载速度很慢，所以想把javascript文件打包在app里，当UIWebView需要加载该脚本时就从app本地读取，但UIWebView并不支持加载本地资源。最后从下文中找到了解决方法，第一次翻译，难免有
  • 索引的碎片整理SQL语句 macroli sql
    SET NOCOUNT ON DECLARE @tablename VARCHAR (128) DECLARE @execstr VARCHAR (255) DECLARE @objectid INT DECLARE @indexid INT DECLARE @frag DECIMAL DECLARE @maxfrag DECIMAL --设置最大允许的碎片数量,超过则对索引进行碎片
  • Angularjs同步操作http请求with $promise qiaolevip 每天进步一点点学习永无止境AngularJS纵观千象
    // Define a factory app.factory('profilePromise', ['$q', 'AccountService', function($q, AccountService) { var deferred = $q.defer(); AccountService.getProfile().then(function(res) {
  • hibernate联合查询问题 sxj19881213 sqlHibernateHQL联合查询
    最近在用hibernate做项目，遇到了联合查询的问题，以及联合查询中的N+1问题。 针对无外键关联的联合查询，我做了HQL和SQL的实验，希望能帮助到大家。（我使用的版本是hibernate3.3.2）   1 几个常识：  （1）hql中的几种join查询，只有在外键关联、并且作了相应配置时才能使用。  （2）hql的默认查询策略，在进行联合查询时，会产
  • struts2.xml wuai struts
    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" "http://struts.apache
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他