越前君
越前君

细读 React | Fragment

配图源自 Freepik

React 中的一个常见模式是一个组件返回多个元素。Fragments 允许你将子列表分组，而无需向 DOM 添加额外节点。

假设我们要使用 React 组件渲染以下这段真实 DOM 节点。

Some text.

A heading

More text.

Another heading

Even more text.

要怎么做呢？很简单，谁都知道...

React.Fragment 是在 React 16.2 新增的新特性，旧版本并不支持。下面我们从几个方面，说明 Fragment 的好处。

一、React 16.0 之前

在低于 React 16.0 的版本，类组件或函数组件有很多限制。

比如，它们必须返回 React 元素或 null。其中 React 元素包括类似 等自定义组件、类似

等 DOM 节点元素。

正确示例：

function MyComponent() {
  // ✅ 合法，也可以是其他 HTML 元素
  return 
...

}

function MyComponent() {
  // ✅ 合法，返回 React 组件
  return 
}

function MyComponent() {
  // ✅ 合法，不渲染任何真实 DOM 节点
  return null
}

错误示例：

function MyComponent() {
  // ❌ 不能返回数组
  return [1, 2, 3].map((item, index) => (
    
{item}

  ))

  // ✅ 但注意，下面这种包裹在 {} 内是合法的，
  // map 方法返回的数组，目测是除了子元素时，做了扁平化处理。
  // return (
  //   

  //     {[1, 2, 3].map((item, index) => (
  //       
{item}

  //     ))}
  //   

  // )
}

function MyComponent() {
  // ❌ 一定要有返回值，跟 return null 是两回事
  return undefined
}

类组件同理。当不正确使用时，将会报错：

Warning: MyComponent(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

这种方案的缺点也是显而易见的，在组件的返回值上，总需要一层

、 或其他 DOM 节点包装起来。当 React 渲染成真实 DOM 时，这个包装节点总是会存在的。

很多时候，往往这个包装节点对我们的 UI 层是没有意义的，反而加深了 DOM 树的层次。但很无奈，谁让我们要用 React 呢，人家语法限制就那样...

二、React 16.0 起

除了原来的 React 元素和 null 之外，新增了几种类型：

  • React 16.0 起支持返回数组、Protals、字符串、数值、布尔值。
  • React 16.2 起支持返回 Fragment，个人认为这是对数组形式的一种增强用法。

其中布尔值和 null 什么都不渲染，字符串或数值类型会渲染为文本节点。

例如：

function MyComponent() {
  // ✅ 合法，支持数组了，需要添加 key 属性去避免警告，
  // 这种情况下，底层会默认嵌套一个  包裹起来。
  return [1, 2, 3].map((item, index) => (
    
{item}

  ))

  // 或者是
  // return [
  //   
1
,
  //   
2
,
  //   
3

  // ]
}

function MyComponent() {
  // ✅ 合法，自 React 16.2 起支持 Fragment 语法，不用像上面一样需要 key 了
  return (
    
      
1

      
2

      
3

    
  )
}

function MyComponent() {
  // ✅ 合法，最终会渲染为文本节点（注意，不是 some string... 哦）
  return 'some string...'
}

相比 React 15.x 及更早版本，这种方式实在是太棒了。除了支持更多类型，最重要的是不会增加额外的节点。

前面提到，React 15.x 里的 React 组件总是避免不了需要一层可能是“无谓”的节点节点进行包装，那么 React 16.0 的改进，可以解决如下场景：

问题示例：

function Table() {
  return (
    
        

      
        

          

      
    

  )
}

function Columns() {
  // 按照 React 15.x 的语法要求，Columns 组件的返回值，
  // 必须要用一个类似 div 元素等包装起来
  return (
    

      Hello
      World
    

  )
}

根据 W3C 的要求，一个合法的

， 的子元素必须是
。而 React 这种组件的写法直接破坏了 结构，最终也得不到我们的预期结果。

一个合法的

结构应该是这样的，table > thead/tbody/tfoot > tr > td > div/other。

如果按照 React 16.x 提供的新特性，可以轻松解决...

function Columns() {
  // React.Fragment 最终渲染为真实 DOM 并不会产生任何 DOM 节点，
  // 因此，不会破坏
的结构了。（数组形式也是可以的） return ( ) }

三、Fragment

自 React 16.2 起，开始支持 React.Fragment 语法。前面提到该特性是对数组形式的一种增强用法。

语法

它的语法非常简单，把它是 React 内置的一个 React 组件。


  // One or more child elements

key 是唯一可以传递给 Fragment 的属性。将来可能会添加对其他属性的支持，例如事件处理程序。

class App extends React.Component {
  state = {
    items: [
      {
        id: '`2`',
        name: '计算机',
        description: '用来计算的仪器...'
      },
      {
        id: '2',
        name: '显示器',
        description: '以视觉方式显示信息的装置...'
      }
    ]
  }

  render() {
    return 
  }
}

function Glossary(props) {
  return (
    

      {props.items.map(item => (
        // 没有 `key`，React 会发出一个关键警告
        
          
{item.name}

          
{item.description}

        
      ))}
    

  )
}

也可以使用它的简写语法 <>，但这种写法不接受任意属性，包括 key。

JSX 中的片段语法受到现有技术的启发，例如 E4X 中的 XMLList() <> 构造函数。使用一对空标签是为了表示它不会向 DOM 添加实际元素的想法。

对比

回到文章开头的示例，要渲染这样一段真实 DOM 节点。

Some text.

A heading

More text.

Another heading

Even more text.

前面提到，可以有几种解决方案，各有利弊。

解决方法一

低于 React 16.0 版本，由于不支持 Fragment 和数组形式，唯一的方法是将它们包装在一个额外的元素中，通常是 div 或 span。如下：

function MyComponent() {
  return (
    

      Some text.
      
A heading

      More text.
      
Another heading

      Even more text.
    

  )
}

但上述这种方法有个缺点，在渲染成真实 DOM 的时候，会增加一个节点，比如上述的

。

解决方法二

自 React 16.0 起，支持数组形式。因此可以这么做：

function MyComponent() {
  return [
    'Some text.',
    
A heading
,
    'More text.',
    
Another heading
,
    'Even more text.'
  ]
}

这种方式有点麻烦，我们对比一下 Fragment 形式。

解决方法三（推荐）

自 React 16.2 起，支持 React.Fragment 语法，因此我们可以这样使用。

function MyComponent() {
  return (
    
      Some text.
      
A heading

      More text.
      
Another heading

      Even more text.
    
  )
}

仔细对比数组和 Fragment 形式，可以发现数组形式有以下缺点：

  • 数组中的子项必须用逗号分隔。
  • 数组中的 children 必须有一个 key 来防止 React 的 key 警告。
  • 字符串必须用引号括起来。

以上这些限制 Fragment 统统都没有，我们就按正常的思维去编写 DOM 节点就好了。

四、References

  • Fragments
  • React v16.0
  • React v16.2.0: Improved Support for Fragments

你可能感兴趣的:(细读 React | Fragment)

  • 使用 React 和 Cypress 进行单元测试 pxr007 单元测试react.jsjunit
    每个开发人员都希望发布一个没有错误的生产应用程序。为了实现这一点，我们需要考虑如何将测试集成到我们的应用程序中。我们可以使用许多测试工具、框架和测试类型。Cypress是一个现代化的自动化测试套件。它是一个基于JavaScript的完全开源的测试框架，由Mocha和Chai等支持BDD和TDD断言样式的库构建。此外，如果您熟悉用JavaScript编写测试，那么使用Cypress会很容易。Cypr
  • 前端面试：[React] scheduler 调度机制原理？ returnShitBoy 前端react.jsjavascript
    ReactScheduler是React16.8引入的一种调度机制，旨在对高效渲染和复杂应用程序的性能进行优化。它允许React在空闲时间进行渲染，优先处理对用户体验最为重要的任务。以下是Scheduler调度机制的原理，以及它在实际工作中如何帮助管理渲染。1.调度机制的背景React的渲染过程可能会受到多个因素的影响，例如用户输入、网络请求以及其他状态变化。传统的渲染机制在某些情况下可能导致性能
  • Tinyflow AI 工作流编排框架 v0.0.7 发布 自不量力的A同学 人工智能
    目前没有关于TinyflowAI工作流编排框架v0.0.7发布的相关具体信息。Tinyflow是一个轻量的AI智能体流程编排解决方案，其设计理念是“简单、灵活、无侵入性”。它基于WebComponent开发，前端支持与React、Vue等任何框架集成，后端支持Java、Node.js、Python等语言，助力传统应用快速AI转型。该框架代码库轻量，学习成本低，能轻松应对简单任务编排和复杂多模态推理
  • Vue3-笔记002-Ref与Reactive ·焱· vue3学习笔记笔记vue.jsjavascript
    002-Ref与Reactive-目录Refref案例ref与RefifRefshallowReftriggerRefcustomRefdom元素的refReactive与ref的共同点与ref的不同点数组的异步赋值问题readonlyshallowReactivetoReftoRefstoRawRef接受一个内部值并返回一个响应式且可变的ref对象。ref对象仅有一个.valueproperty
  • Vue3-day3-Ref-Reactive 金串串 vue.jsjavascript前端
    Ref：创建基本类型的响应式数据作用：定义响应式变量语法：letxxx=ref(初始值)返回值：一个RefImpl的实例对象，简称ref对象或者ref，ref对象的value属性是响应式的注意点：js中操作数据需要：xxx.value，但模板中不需要.value，直接使用即可。对于letname=ref('张三')来说，name不是响应式的，name.value是响应式的。代码段姓名：{{name
  • element plus table树形数据，增、删、改子节点数据时，进行局部刷新，而不刷新整个页面 catino vue.jsjavascriptelementui
    ...constlistLoading=ref(false)//保存节点映射的Mapconstmaps=reactive(newMap())constload=async(row,treeNode,resolve)=>{constpid=row.idmaps.set(pid,{row,treeNode,resolve})constpost_data={parent_id:row.id,}listL
  • 清晰架构之typescript实践：构建可扩展服务的利器 吕曦耘George
    清晰架构之typescript实践：构建可扩展服务的利器react-with-clean-architectureCleanarchitecturebasedreactprojectsamplecode.项目地址:https://gitcode.com/gh_mirrors/re/react-with-clean-architecture在软件开发的浩瀚宇宙中，找到一个既能维持代码的清晰度又能确保
  • 新建react native项目都失败，创建出来的都是.xcodeproj，而不是.xcworkspace，如何解决？？ bug菌¹ 全栈Bug调优(实战版)reactnativereact.jsjavascript
    本文收录于《全栈Bug调优(实战版)》专栏，主要记录项目实战过程中所遇到的Bug或因后果及提供真实有效的解决方案，希望能够助你一臂之力，帮你早日登顶实现财富自由；同时，欢迎大家关注&&收藏&&订阅！持续更新中，up！up！up！！全文目录：问题描述解决方案1.确保正确设置代理源（如果你在国内）2.手动安装CocoaPods依赖3.检查你的Ruby和CocoaPods环境4.尝试清理并重建项目5.查
  • Android com.facebook.react:react-native:+ 版本问题 小铁-Android reactnativeandroid
    Executionfailedfortask':app:desugarBetaDebugAndroidTestFileDependencies'.>Couldnotresolveallfilesforconfiguration':app:betaDebugRuntimeClasspath'.>Failedtotransformreact-native-0.71.0-rc.0-debug.aar(c
  • cesium 文字避让 花归去 cesiumjavascript前端vue.js
    token记得换成您自己的！！！申请cesium的token官网【Cesium:ThePlatformfor3DGeospatial】>import*asCesiumfrom'cesium';import{onMounted,reactive,ref,computed,nextTick}from'vue';//地图实例letviewer:any;constshowText=()=>{viewer.
  • React 18 如何定义变量，及赋值 与渲染 痴心阿文 Reactreact.jsjavascript前端
    React18中，定义变量、赋值和渲染的方式因变量的用途和作用域不同而有所差异，下面为你详细介绍不同场景下的实现方法。1.函数组件内定义普通变量在函数组件里，你可以像在普通JavaScript函数中一样定义变量，并且这些变量会在每次组件重新渲染时重新创建。importReactfrom'react';constMyComponent=()=>{//定义普通变量并赋值constmessage='He
  • react-native 实现AES RSA MD5加密 花程序媛
    importReact,{Component}from'react';import{Platform,StyleSheet,Text,View,Image,Dimensions,ScrollView,TouchableOpacity,Modal,TouchableHighlight,NativeModules,ToastAndroid,Alert,FlatList,}from'react-nati
  • Netty源码—3.Reactor线程模型四 东阳马生架构 Netty应用与源码NettyReactor线程模型
    大纲5.NioEventLoop的执行总体框架6.Reactor线程执行一次事件轮询7.Reactor线程处理产生IO事件的Channel8.Reactor线程处理任务队列之添加任务9.Reactor线程处理任务队列之执行任务10.NioEventLoop总结8.Reactor线程处理任务队列之添加任务(1)Reactor线程执行一次事件轮询的过程(2)任务的分类和添加说明(3)普通任务的添加(4
  • Netty源码分析之Reactor线程模型详解 Java-进阶架构师 javajava编程java后端java-ee
    在分析源码之前，我们先分析，哪些地方用到了EventLoop？NioServerSocketChannel的连接监听注册NioSocketChannel的IO事件注册NioServerSocketChannel连接监听在AbstractBootstrap类的initAndRegister()方法中，当NioServerSocketChannel初始化完成后，会调用case标记位置的代码进行注册。f
  • React 中 Context 的作用是什么，在什么场景下使用它？ 前端大白话 大白话前端八股react.js前端javascript
    大白话React中Context的作用是什么，在什么场景下使用它？React中Context的作用在React里，组件之间常常需要共享数据。通常情况下，数据是通过props从父组件传递到子组件。不过，要是组件嵌套层次很深，就需要在每一层组件都传递props，这样会让代码变得复杂且难以维护。Context能帮我们解决这个问题。它可以创建一个数据“容器”，让处于不同层级的组件都能直接访问其中的数据，而
  • Netty源码—2.Reactor线程模型二 东阳马生架构 Netty应用与源码NettyReactor线程模型
    大纲1.关于NioEventLoop的问题整理2.理解Reactor线程模型主要分三部分3.NioEventLoop的创建4.NioEventLoop的启动4.NioEventLoop的启动(1)启动NioEventLoop的两大入口(2)判断当前线程是否是NioEventLoop线程(3)创建一个线程并启动(4)NioEventLoop的启动总结(1)启动NioEventLoop的两大入口入口一
  • 【致100位技术同路人：代码无边界，GIS×编程的双向奔赴！】 喆星时瑜 留言感谢你们的关注
    今天在地理信息科学的坐标系里标记了一个闪亮锚点——我的CSDN粉丝破百啦！✨破百节点亮起的不只是GISer，还有无数程序员伙伴的坐标！感谢你们的关注，是你们的每一次的让这些文章有了生命力，每一次的都化作我深夜调试的动力。作为穿梭在GIS与通用编程之间的开发者，我始终相信：空间算法是经纬度的代码诗，而工程思维是让地理智能落地的坐标系。未来会继续用PostGIS的严谨写空间索引，用React/Vue的
  • 如何在 React 项目中优化列表渲染性能，避免不必要的重绘？ 前端大白话 大白话前端八股react.js前端前端框架
    大白话如何在React项目中优化列表渲染性能，避免不必要的重绘？在React项目里，要是列表数据量很大，每次数据变化都重新渲染列表，会严重影响性能。1.使用key属性key属性能帮助React识别哪些元素发生了变化，这样在更新列表时，React就只更新那些真正改变的元素，而不是重新渲染整个列表。importReactfrom'react';//假设这是我们的数据列表constdata=[{id:1
  • nextjs 实现rag知识库检索增强的ai问答app *goliter * web开发学习人工智能
    AI-Chat-一个基于LLM大语言模型的知识库问答系统项目源码：https://github.com/goliter/ai-chat项目简介AI-Chat是一个基于Next.js和React开发的现代化大语言模型的知识库问答系统。该平台提供了简易的对话界面，支持上传文件进行知识库的构建，让用户在与大语言模型进行问答时给与大模型知识库内的相关内容。主要功能上传文件构建属于自己的知识库支持doc,t
  • PakePlus支持将vue/react等项目打包为跨平台桌面软件了 1024小神 多端开发vue.js前端javascript
    PakePLus介绍Turnanywebpage/Vue/ReactandsoonintoadesktopappandmobileappwithRust.轻松将任意网站/Vue/React等项目构建为轻量级(仅5M)多端桌面应用和多端手机应用。pakeplus开源地址：GitHub-Sjj1024/PakePlus:Turnanywebpage/Vue/Reactandsoonintoadeskt
  • 手机端Flutter、React Native与原生安卓、iOS交互的方案及设计原理 JafarOne 智能手机flutterreactnativeAndroidiOSJava
    手机端Flutter、ReactNative与原生安卓、iOS交互的方案及设计说明一、交互方案与代码示例1.Flutter与原生交互方案核心方案：通过MethodChannel和EventChannel实现双向通信。原理：Flutter的Channel机制基于平台信道（如MethodChannel），通过Dart引擎与原生层的二进制消息传递完成调用。原生代码需监听信道，并根据方法名执行操作，结果通
  • 网页编辑器能否满足Word公式与图片的直接复制粘贴？ 2501_90699800 编辑器wordumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片ueditor导入word
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • React中的高优先级任务插队机制 东方睡衣 react.jsjavascript前端
    说到高优先级任务插队机制，就要提到Reatfiber这个东西了，也就是时间分片，说实话这东西我之前了解过，但是下午被面试官问到了，我还说都能答上来，结果突然问到时间分片后，被分化的小任务的执行顺序，还有就是如果有优先级高的任务插入进来，它们的执行顺序是什么，当时头皮发麻，想着我都说到这里了，怎么还问，刚刚看了下，其实原理很简单，下面一起来看看吧！在React的concurrent模式下，低优先级任
  • 高级前端面试题-React 圣诞小子 javascript面试
    react概念类组件和函数组件,什么时候用类组件获取组件实例类组件如何实现逻辑复用？高阶组件、renderprops选择hooks的优点状态逻辑复用；状态逻辑集中，易于理解；类组件不利于优化，比如不能很好的压缩为什么要用hooks,解决了什么问题同上react的context的使用场景共享对一个组件树全局的信息，不需要一层层传参受控组件和非受控组件非受控组件：数据只保存在内部state中；受控组件
  • 前端面试：[React] Recoil 里面 selector 支持哪些参数？ returnShitBoy 前端面试react.js
    在Recoil中，selector用于派生状态并可以通过传递不同的参数来实现更强大的功能。创建selector时，可以传入以下参数：1.key类型:string描述:是selector的唯一标识符。每个selector和atom都必须有一个唯一的key，否则会抛出错误。这个key用于在Recoil状态树中进行识别。示例：javascriptconstmySelector=selector({key
  • react 技术栈请问该如何优化 DOM 大小 混血哲谈 react.js前端前端框架
    针对React应用中DOM大小过大的问题，以下是详细的优化方案和具体操作步骤，帮助你提升Lighthouse性能评分和用户体验：一、问题根源分析DOM大小过大（如超过1500个节点或深度超过32层）会导致：渲染性能下降：浏览器解析和渲染DOM的时间增加。内存占用过高：大量DOM节点占用更多内存，影响低端设备表现。交互延迟：事件监听器绑定过多节点时，响应变慢。常见原因：未优化的列表渲染（如长列表一次
  • useSyncExternalStore 的应用 前端
    我们是袋鼠云数栈UED团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。本文作者：修能学而不思则罔，思而不学则殆。---《论语·为政》WhatuseSyncExternalStoreisaReactHookthatletsyousubscribetoanexternalstore.useSyncExternalStore是一个支持让用户订阅外部
  • 从 0 到 1 搭建一个 Web 应用项目：详细步骤与踩坑记录 算法探索者 前端
    一、引言在当今数字化时代，Web应用无处不在。对于开发者而言，掌握从0到1搭建Web应用项目的技能至关重要。本指南将带你逐步完成一个简单Web应用项目的搭建，分享技术选型思路以及在过程中遇到的问题和解决方案，助力你开启Web开发之旅。二、技术选型（一）前端框架：选择React.js。它具有高效的虚拟DOM机制，能够快速更新页面，提升用户体验。同时，React生态系统丰富，有大量现成的组件库和工具可
  • Netty源码—2.Reactor线程模型一 东阳马生架构 Netty应用与源码NettyReactor线程模型
    大纲1.关于NioEventLoop的问题整理2.理解Reactor线程模型主要分三部分3.NioEventLoop的创建4.NioEventLoop的启动1.关于NioEventLoop的问题整理一.默认下Netty服务端起多少线程及何时启动？答：默认是2倍CPU核数个线程。在调用EventExcutor的execute(task)方法时，会判断当前线程是否为Netty的Reactor线程，也就
  • react-11（自定义hook、useRef） 我只是想饮一杯奶茶 reactJavaScriptreact.jsjavascript前端typescript
    自定义hook主要是我们利用已有的hook,实现hook的效果，并在其他地方引用。（感觉像是封装了一个方法）//定义constfetchHook=(url)=>{const[data,setData]=useState({})const[loading,setLoading]=useState('')useEffect(()=>{setLoading('loading')axios.get(url
  • 统一思想认识 永夜-极光 思想
    1.统一思想认识的基础,才能有的放矢  原因:    总有一种描述事物的方式最贴近本质,最容易让人理解.    如何让教育更轻松,在于找到最适合学生的方式.          难点在于,如何模拟对方的思维基础选择合适的方式.   &
  • Joda Time使用笔记 bylijinnan javajoda time
    Joda Time的介绍可以参考这篇文章： http://www.ibm.com/developerworks/cn/java/j-jodatime.html 工作中也常常用到Joda Time，为了避免每次使用都查API，记录一下常用的用法：     /** * DateTime变化（增减） */ @Tes
  • FileUtils API eksliang FileUtilsFileUtils API
    转载请出自出处：http://eksliang.iteye.com/blog/2217374 一、概述 这是一个Java操作文件的常用库，是Apache对java的IO包的封装，这里面有两个非常核心的类FilenameUtils跟FileUtils，其中FilenameUtils是对文件名操作的封装;FileUtils是文件封装，开发中对文件的操作，几乎都可以在这个框架里面找到。 非常的好用。
  • 各种新兴技术 不懂事的小屁孩 技术
    1:gradle Gradle 是以 Groovy 语言为基础，面向Java应用为主。基于DSL（领域特定语言）语法的自动化构建工具。 现在构建系统常用到maven工具，现在有更容易上手的gradle， 搭建java环境: http://www.ibm.com/developerworks/cn/opensource/os-cn-gradle/ 搭建android环境： http://m
  • tomcat6的https双向认证 酷的飞上天空 tomcat6
    1.生成服务器端证书 keytool -genkey -keyalg RSA -dname "cn=localhost,ou=sango,o=none,l=china,st=beijing,c=cn" -alias server -keypass password -keystore server.jks -storepass password -validity 36
  • 托管虚拟桌面市场势不可挡 蓝儿唯美
    用户还需要冗余的数据中心，dinCloud的高级副总裁兼首席营销官Ali Din指出。该公司转售一个MSP可以让用户登录并管理和提供服务的用于DaaS的云自动化控制台，提供服务或者MSP也可以自己来控制。 在某些情况下，MSP会在dinCloud的云服务上进行服务分层，如监控和补丁管理。 MSP的利润空间将根据其参与的程度而有所不同，Din说。 “我们有一些合作伙伴负责将我们推荐给客户作为个
  • spring学习——xml文件的配置 a-john spring
    在Spring的学习中，对于其xml文件的配置是必不可少的。在Spring的多种装配Bean的方式中，采用XML配置也是最常见的。以下是一个简单的XML配置文件： <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.or
  • HDU 4342 History repeat itself 模拟 aijuans 模拟
    来源：http://acm.hdu.edu.cn/showproblem.php?pid=4342 题意：首先让求第几个非平方数，然后求从1到该数之间的每个sqrt(i)的下取整的和。 思路：一个简单的模拟题目，但是由于数据范围大，需要用__int64。我们可以首先把平方数筛选出来，假如让求第n个非平方数的话，看n前面有多少个平方数，假设有x个，则第n个非平方数就是n+x。注意两种特殊情况，即
  • java中最常用jar包的用途 asia007 java
    java中最常用jar包的用途 jar包用途axis.jarSOAP引擎包commons-discovery-0.2.jar用来发现、查找和实现可插入式接口，提供一些一般类实例化、单件的生命周期管理的常用方法.jaxrpc.jarAxis运行所需要的组件包saaj.jar创建到端点的点到点连接的方法、创建并处理SOAP消息和附件的方法，以及接收和处理SOAP错误的方法.  w
  • ajax获取Struts框架中的json编码异常和Struts中的主控制器异常的解决办法 百合不是茶 jsjson编码返回异常
    一:ajax获取自定义Struts框架中的json编码  出现以下 问题:       1,强制flush输出  json编码打印在首页 2, 不强制flush js会解析json 打印出来的是错误的jsp页面   却没有跳转到错误页面 3,  ajax中的dataType的json 改为text 会
  • JUnit使用的设计模式 bijian1013 java设计模式JUnit
    JUnit源代码涉及使用了大量设计模式 1、模板方法模式（Template Method）         定义一个操作中的算法骨架，而将一些步骤延伸到子类中去，使得子类可以不改变一个算法的结构，即可重新定义该算法的某些特定步骤。这里需要复用的是算法的结构，也就是步骤，而步骤的实现可以在子类中完成。   
  • Linux常用命令（摘录） sunjing crondchkconfig
    chkconfig --list   查看linux所有服务 chkconfig --add servicename 添加linux服务 netstat -apn | grep 8080  查看端口占用 env 查看所有环境变量 echo $JAVA_HOME 查看JAVA_HOME环境变量   安装编译器 yum install -y gcc
  • 【Hadoop一】Hadoop伪集群环境搭建 bit1129 hadoop
     结合网上多份文档，不断反复的修正hadoop启动和运行过程中出现的问题，终于把Hadoop2.5.2伪分布式安装起来，跑通了wordcount例子。Hadoop的安装复杂性的体现之一是，Hadoop的安装文档非常多，但是能一个文档走下来的少之又少，尤其是Hadoop不同版本的配置差异非常的大。Hadoop2.5.2于前两天发布，但是它的配置跟2.5.0，2.5.1没有分别。 &nb
  • Anychart图表系列五之事件监听 白糖_ chart
    创建图表事件监听非常简单：首先是通过addEventListener('监听类型',js监听方法)添加事件监听，然后在js监听方法中定义具体监听逻辑。 以钻取操作为例，当用户点击图表某一个point的时候弹出point的name和value，代码如下： <script> //创建AnyChart var chart = new AnyChart(); //添加钻取操作&quo
  • Web前端相关段子 braveCS web前端
    Web标准：结构、样式和行为分离   使用语义化标签 0）标签的语义：使用有良好语义的标签，能够很好地实现自我解释，方便搜索引擎理解网页结构，抓取重要内容。去样式后也会根据浏览器的默认样式很好的组织网页内容，具有很好的可读性，从而实现对特殊终端的兼容。 1）div和span是没有语义的：只是分别用作块级元素和行内元素的区域分隔符。当页面内标签无法满足设计需求时，才会适当添加div
  • 编程之美-24点游戏 bylijinnan 编程之美
    import java.util.ArrayList; import java.util.Arrays; import java.util.HashSet; import java.util.List; import java.util.Random; import java.util.Set; public class PointGame { /**编程之美
  • 主页面子页面传值总结 chengxuyuancsdn 总结
    1、showModalDialog returnValue是javascript中html的window对象的属性,目的是返回窗口值,当用window.showModalDialog函数打开一个IE的模式窗口时,用于返回窗口的值 主界面 var sonValue=window.showModalDialog("son.jsp"); 子界面 window.retu
  • [网络与经济]互联网+的含义 comsci 互联网+
          互联网+后面是一个人的名字 = 网络控制系统       互联网+你的名字 =  网络个人数据库       每日提示:如果人觉得不舒服,千万不要外出到处走动,就呆在床上,玩玩手游,更不能够去开车,现在交通状况不
  • oracle 创建视图 with check option daizj 视图vieworalce
    我们来看下面的例子： create or replace view testview as select empno,ename from emp where ename like ‘M%’ with check option; 这里我们创建了一个视图，并使用了with check option来限制了视图。 然后我们来看一下视图包含的结果： select * from testv
  • ToastPlugin插件在cordova3.3下使用 dibov Cordova
        自己开发的Todos应用，想实现“ 再按一次返回键退出程序 ”的功能，采用网上的ToastPlugins插件，发现代码或文章基本都是老版本，运行问题比较多。折腾了好久才弄好。下面吧基于cordova3.3下的ToastPlugins相关代码共享。       ToastPlugin.java package&nbs
  • C语言22个系统函数 dcj3sjt126com cfunction
    C语言系统函数一、数学函数下列函数存放在math.h头文件中Double floor(double num) 求出不大于num的最大数。Double fmod(x, y) 求整数x/y的余数。Double frexp(num, exp); double num; int *exp; 将num分为数字部分（尾数）x和 以2位的指数部分n，即num=x*2n，指数n存放在exp指向的变量中，返回x。D
  • 开发一个类的流程 dcj3sjt126com 开发
    本人近日根据自己的开发经验总结了一个类的开发流程。这个流程适用于单独开发的构件，并不适用于对一个项目中的系统对象开发。开发出的类可以存入私人类库，供以后复用。   以下是开发流程： 1. 明确类的功能，抽象出类的大概结构 2. 初步设想类的接口 3. 类名设计（驼峰式命名） 4. 属性设置(权限设置) 判断某些变量是否有必要作为成员属
  • java 并发 shuizhaosi888 java 并发
    能够写出高伸缩性的并发是一门艺术   在JAVA SE5中新增了3个包 java.util.concurrent java.util.concurrent.atomic java.util.concurrent.locks 在java的内存模型中，类的实例字段、静态字段和构成数组的对象元素都会被多个线程所共享，局部变量与方法参数都是线程私有的，不会被共享。
  • Spring Security（11）——匿名认证 234390216 Spring SecurityROLE_ANNOYMOUS匿名
    匿名认证 目录 1.1     配置 1.2     AuthenticationTrustResolver          对于匿名访问的用户，Spring Security支持为其建立一个匿名的AnonymousAuthenticat
  • NODEJS项目实践0.2[ express,ajax通信...] 逐行分析JS源代码 Ajaxnodejsexpress
      一、前言         通过上节学习，我们已经        ubuntu系统搭建了一个可以访问的nodejs系统，并做了nginx转发。本节原要做web端服务 及 mongodb的存取，但写着写着，web端就
  • 在Struts2 的Action中怎样获取表单提交上来的多个checkbox的值 lhbthanks javahtmlstrutscheckbox
    第一种方法：获取结果String类型 在 Action 中获得的是一个 String 型数据，每一个被选中的 checkbox 的 value 被拼接在一起，每个值之间以逗号隔开(,)。 所以在 Action 中定义一个跟 checkbox 的 name 同名的属性来接收这些被选中的 checkbox 的 value 即可。 以下是实现的代码： 前台 HTML 代码：
  • 003.Kafka基本概念 nweiren hadoopkafka
    Kafka基本概念：Topic、Partition、Message、Producer、Broker、Consumer。 Topic：             消息源（Message）的分类。 Partition：             Topic物理上的分组，一
  • Linux环境下安装JDK roadrunners jdklinux
    1、准备工作 创建JDK的安装目录： mkdir -p /usr/java/   下载JDK，找到适合自己系统的JDK版本进行下载： http://www.oracle.com/technetwork/java/javase/downloads/index.html   把JDK安装包下载到/usr/java/目录，然后进行解压： tar -zxvf jre-7
  • Linux忘记root密码的解决思路 tomcat_oracle linux
    1：使用同版本的linux启动系统，chroot到忘记密码的根分区passwd改密码 　　2：grub启动菜单中加入init=/bin/bash进入系统，不过这时挂载的是只读分区。根据系统的分区情况进一步判断. 　　3: grub启动菜单中加入 single以单用户进入系统. 　　4:用以上方法mount到根分区把/etc/passwd中的root密码去除 　　例如: 　　ro
  • 跨浏览器 HTML5 postMessage 方法以及 message 事件模拟实现 xueyou jsonpjquery框架UIhtml5
    postMessage 是 HTML5 新方法，它可以实现跨域窗口之间通讯。到目前为止，只有 IE8+, Firefox 3, Opera 9, Chrome 3和 Safari 4 支持，而本篇文章主要讲述 postMessage 方法与 message 事件跨浏览器实现。postMessage 方法 JSONP 技术不一样，前者是前端擅长跨域文档数据即时通讯，后者擅长针对跨域服务端数据通讯，p
Hello World