越前君
越前君

细读 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)

  • Android开源库——RxJava和RxAndroid 松仔log #Android开源库android开源rxjava
    RxJava和RxAndroid是什么？RxJava是基于JVM的响应式扩展，用于编写异步代码RxAndroid是关于Android的RxJava绑定RxJava和RxAndroid使用依赖implementation'io.reactivex.rxjava3:rxjava:3.1.0'implementation'io.reactivex.rxjava3:rxandroid:3.0.2'使用过程
  • 探索未来架构：基于AWS的响应式微服务框架 柏赢安Simona
    探索未来架构：基于AWS的响应式微服务框架reactive-refarch-cloudformationReactiveMicroservicesArchitectureswithAmazonECS,AWSLambda,AmazonKinesisStreams,AmazonElastiCache,andAmazonDynamoDB项目地址:https://gitcode.com/gh_mirror
  • 深度解析前端面试八股文：核心知识点与高效应对策略 赵大仁 前端面试职场和发展
    深度解析前端面试八股文：核心知识点与高效应对策略1.引言前端面试是每位开发者迈向职业进阶的重要环节，涉及HTML、CSS、JavaScript、性能优化、浏览器原理、网络、安全、框架（Vue/React）等核心知识点。本文不仅会覆盖前端面试的高频八股文，还会结合生动的案例，让你在面试时能够脱离死记硬背，从理解中突破！2.HTML&CSS高频考点2.1HTML语义化问题：什么是HTML语义化？为什么
  • 探索高效Arduino编程：FRP与Haskell的完美结合 管吟敏Dwight
    探索高效Arduino编程：FRP与Haskell的完美结合frp-arduinoArduinoprogrammingwithoutthehassleofC.项目地址:https://gitcode.com/gh_mirrors/fr/frp-arduino在众多开源项目中，有一个项目以其独特的技术栈和创新的理念脱颖而出，它就是基于Haskell的FRP（FunctionalReactivePro
  • 深入理解 Android 中的 ViewModel 和 LiveData：实现数据与 UI 的分离与响应式更新 tangweiguo03051987 androidandroiduiViewModelLiveData
    ViewModel和LiveData是Android架构组件中的两个核心类，用于帮助开发者构建健壮、可维护且响应迅速的应用程序。它们通常一起使用，以实现数据与UI的分离，并确保数据在配置更改（如屏幕旋转）时不会丢失。ViewModelViewModel的主要目的是管理与UI相关的数据，并在配置更改时保持数据的持久性。它允许数据在Activity或Fragment销毁和重新创建时保持不变。1.1Vi
  • Next：ReferenceError: document is not defined dingcho 前端前端javascript开发语言
    next配置路由报错nextReferenceError:documentisnotdefined，这个解决方案import{BrowserRouterasRouter,Routes,Route}from'react-router-dom';原使用react-router-dom修改为(建议)import{useRouter}from'next/router';如果使用react-router-d
  • RxSqlUtils（base R2dbc） xdpcxq1029 技术分享oracle数据库
    一、前言随着Solon3.0和Solon-Rx3.0发布，用于“响应式”操作数据库。RxSqlUtils是基于R2dbc和Reactor接口构建。极简风格，就像个工具类，故名：RxSqlUtils。尤其在solon-web-rx和场景开发时，RxSqlUtils会是最好的良配。二、RxSqlUtils使用1、引入依赖org.noearsolon-data-rx-sqlutils2、新建数据库表（f
  • 使用vite脚手架搭建react项目 JiaLin_Denny react.js前端vitereactvitev脚手架
    首选使用npm安装reactvitenpminstall-gcreatevite替换npminstall-gcreate-react-app新的脚手架据说很快，是原来的webpack的700倍。。。安装完vite后，使用npmcreatevitemy-react-app(my-react-app这是我自己的项目名，你自己可以随便取名字)先会问你，确定继续吗？继续你就y一下。然后回自动提示一些选择项
  • nodejs 010:Webpack 可视化分析插件 webpack-bundle-analyzer的使用 FakeOccupational 服务化&架构webpack前端node.js
    安装yarnadd--devwebpack-bundle-analyzer原始webpack.config.jswebpack.config.js代码定义了Webpack的配置，主要任务是将JavaScript和CSS文件打包，并将CSS提取到单独的文件中，配置了对Electron应用的支持，同时还将React相关的模块映射到Preact，以减小打包体积。//引入Node.js的path模块，用于
  • （二）Reactor核心-前置知识1 糖心何包蛋爱编程 响应式编程java响应式编程Lambda表达式干货分享
    本章是Reactor核心-前置知识（第一期），主要讲解Lambda表达式。回忆上一章我们学习了什么是响应式编程、基础概念、必读知识。一篇文章我不想写得太长了，文章不像是视频或者图片比较生动，文章太长了容易犯困。所以我直接上干货，能插图的地方我尽量插图，希望您能坚持看完。觉得有用的话点赞加藏关注，这就是我文思泉涌的动力。一、lambda表达式Lambda表达式是Java8引入的一个重要特性，它是一种
  • Web 开发都需要学什么？ Duiz33237 前端html5css3web
    Web开发是指开发和构建用于互联网的网站和应用程序的过程。它涉及使用各种编程语言、框架和技术来创建功能丰富、用户友好的网站和应用程序。常见的web开发技术包括HTML、CSS和JavaScript。HTML用于创建网页的结构，CSS用于样式和布局，而JavaScript用于实现交互和动态效果。此外，还有许多其他的编程语言和框架，如Python、PHP、Ruby、React、Angular等，用于开
  • ShadCN UI 酒江 ui
    ShadCNUI是一个用于构建现代Web应用的开源UI组件库，旨在为开发者提供一组简洁、易于使用且高度可定制的组件。ShadCNUI提供了许多常见的UI元素（如按钮、表单、模态框等），并且具备良好的设计规范和开发支持，尤其适用于React项目。主要特点：基于TailwindCSS:ShadCNUI使用了TailwindCSS作为样式框架。这意味着它的所有组件都遵循Tailwind的utility-
  • Prompt工程全解析：从入门到精通的终极指南 二川bro 智能AI人工智能prompt
    Prompt工程全解析：从入门到精通的终极指南发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，可以分享一下给大家。点击跳转到网站。https://www.captainbed.cn/ccc一、Prompt设计核心法则1.1角色定位法则[角色设定]你是一位资深全栈工程师，拥有10年React和Node.js开发经验[任务要求]为电商系统设计购物车模块，要求：1.支持商品增删改查2.实时计算总价
  • cursor全栈网页开发最合适的技术架构和开发语言 getapi 架构开发语言
    在使用Cursor（一个基于AI的代码编辑器）进行前后端全栈网页开发时，选择合适的技术架构和开发语言非常重要。以下是一个推荐的技术架构和语言组合，能够帮助你高效开发并充分利用Cursor的功能。1.技术架构推荐对于全栈开发，建议采用MERN/MEAN技术栈或现代化的微前端架构，具体如下：(1)MERN技术栈MERN是MongoDB、Express.js、React和Node.js的缩写，是目前非常
  • Web三要素：CSS之Flex/Grid布局(4) 双囍菜菜 前端随记前端css
    CSS布局革命：Flex与Grid的双子星战法文章目录CSS布局革命：Flex与Grid的双子星战法一、布局进化史：从洪荒时代到现代文明二、Flex布局：一维空间的舞蹈家2.1核心概念深度解析容器属性详解：2.2典型应用场景实战导航栏布局（React示例）垂直居中（Vue示例）三、Grid布局：二维空间的指挥官3.1网格系统深度解析核心概念图解：3.2高级布局技巧实战响应式网格（React示例）复
  • 从底层到实践：深度解析 Vue Composition API 与 React Hooks 的异同
    一、设计哲学与底层原理差异1.1响应式系统的基因差异Vue3的CompositionAPI建立在Proxy-based响应式系统之上，通过劫持对象的getter/setter实现依赖收集。当访问响应式对象时，Vue会自动建立组件与数据的依赖关系。//Vue响应式原理简版实现functionreactive(obj){returnnewProxy(obj,{get(target,key){track
  • flutter 专题三十七 Flutter混合开发之FlutterFragment leluckys Flutter面试与实战fluttergitee
    我们知道，原生Android集成Flutter主要有两种方式，一种是创建fluttermodule，然后以原生module那样依赖；另一种方式是将fluttermodule打包成aar，然后在原生工程中依赖aar包，官方推荐aar的方式接入。如何在原生Android工程中以aar的方式接入Flutter，大家可以参考我之前文章的介绍：原生Android工程接入Flutteraar。今天想给大家分享
  • 六十天前端强化训练之第十七天React Hooks 入门：useState 深度解析 编程星辰海 #前端前端react.jsjavascript
    =====欢迎来到编程星辰海的博客讲解======看完可以给一个免费的三连吗，谢谢大佬！目录一、知识讲解1.Hooks是什么？2.useState的作用3.基本语法解析4.工作原理5.参数详解a)初始值设置方式b)更新函数特性6.注意事项7.类组件对比8.常见问题解答二、核心代码示例三、实现效果四、学习要点总结五、扩展阅读推荐官方文档优质文章推荐学习路径进阶资源六、实践步骤一、表单输入控制二、动态
  • 深入解析React 18核心特性：构建未来级Web应用的全面指南 斯~内克 react知识点前端react.js前端框架
    一、React18的里程碑意义React18作为近年来最具革命性的版本更新，标志着前端开发正式进入并发渲染时代。这个版本不仅带来了底层架构的革新，更重新定义了现代Web应用的性能标准与开发范式。根据npm官方统计，React18发布首周下载量突破1800万次，GitHub星标数新增3.4万，充分展现了开发者社区对其技术价值的认可。二、架构革命：并发模式深度解析2.1并发渲染原理//传统同步渲染模式
  • 打造高性能的react 大鸡腿最好吃 react.js
    根本目的就是减少重复渲染使用使用shouldComponentUpdate规避冗余的更新逻辑shouldComponentUpdate触发的条件是只要父组件更新了，就会被触发，在里面判断传入的pros是否改变，不变则返回falsePureComponent+Immutable.jsPureComponent其实就是内置了对shouldComponentUpdate的实现，不过其对props的比对是
  • 深入解析 React Diff 算法：原理、优化与实践 赵大仁 前端技术jsreact.js前端前端框架
    深入解析ReactDiff算法：原理、优化与实践1.引言React作为前端领域的标杆框架，采用虚拟DOM（VirtualDOM）来提升UI更新性能。React的Diff算法（Reconciliation）是虚拟DOM运行机制的核心，它决定了如何高效地对比新旧DOM并执行最少的操作来更新UI。本篇文章将深入探讨ReactDiff算法的原理、优化策略，并通过生动的示例解析其工作方式，让你能够更直观地理
  • 深入解析 React 最新特性：革新、应用与最佳实践 赵大仁 前端ReactNativereact.js前端前端框架
    深入解析React最新特性：革新、应用与最佳实践1.引言React作为前端开发的核心技术之一，近年来不断推出新的API和优化机制，从ConcurrentRendering（并发模式）到ServerComponents（服务器组件），都在不断提升开发体验和应用性能。本文将深入解析React最新特性，包括React18并发模式、useTransition、useDeferredValue、ReactS
  • 【pptx-preview】react+pptx预览 起来改bug javascriptreact.jspptx
    pptx前端预览插件pptx-preview-npm1.插件使用letpptxPreviewer:any=null;constdom:any=document.getElementById(`pptx-wrapper`);if(!dom)return;pptxPreviewer=init(dom,{width:800});fetch(url).then((response:any)=>respon
  • 人工智能_大模型091_大模型工作流001_使用工作流的原因_处理复杂问题_多轮自我反思优化ReAct_COT思维链---人工智能工作笔记0236 添柴程序猿 大模型开发&神经网络人工智能大模型工作流COT思维链ReAct自我反思优化大模型工作流开发
    #清理环境信息，与上课内容无关importosos.environ["LANGCHAIN_PROJECT"]=""os.environ["LANGCHAIN_API_KEY"]=""os.environ["LANGCHAIN_ENDPOINT"]=""os.environ["LANGCHAIN_TRACING_V2"]=""#安装所需要使用的包!pipinstallopenailanggraphA
  • 前端流式输出实现详解：从原理到实践 代码剑客588 前端
    前端流式输出实现详解：从原理到实践前言一、流式输出核心原理1.1什么是流式输出？1.2技术优势对比1.3关键技术支撑二、原生JavaScript实现方案2.1使用FetchAPI流式处理关键点解析：2.2处理SSE（Server-SentEvents）三、主流框架实现示例3.1React实现方案3.2Vue实现方案四、高级优化策略4.1性能优化4.2用户体验增强4.3安全注意事项五、实际应用案例5
  • React 和 Vue _使用区别 开心小老虎 react知识点+组件vue3知识点+组件前端知识点vue.jsreact.js前端
    目录一、框架介绍1.Vue2.React二、框架结构1.创建应用2.框架结构三、使用区别1.单页面组成2.样式3.显示响应式数据4.响应式html标签属性5.控制元素显隐6.条件渲染7.渲染列表react和vue是目前前端比较流行的两大框架，前端程序员应该将两种框架都掌握，本文总结一些基本知识点的使用区别。一、框架介绍1.VueVue是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。
  • react和vue 基础使用对比 圣京都 reactreact.jsjavascriptvue.js
    1.实现功能（ts）0.基础属性使用1.组件直接的通信2.useState动态修改值3.循环遍历功能4.实现类型vue的watch，filter，computed属性功能5.实现类似vue2的生命周期5.类型vuev-if功能的实现2.文件结构图3.具体代码interface.tsimport"./index.less";import{message}from"antd";import{useSt
  • RecyclerView必须直接嵌套在SmartRefreshLayout里面，才能触发SmartRefreshLayout的加载更多吗 yzpyzp androidkotlin
    DeepSeekR1思考31秒思考过程用户的问题是关于RecyclerView是否必须直接嵌套在SmartRefreshLayout内才能触发加载更多的功能。根据之前的对话历史，用户之前询问了如何配置SmartRefreshLayout以支持滑动到底部加载更多，尤其是当RecyclerView位于Fragment中的情况。现在用户想确认是否必须直接将RecyclerView放在SmartRefre
  • Android - ViewPager 从基础到进阶 whd_Alive Android基础AndroidViewPager
    前言好记性不如烂笔头，学习的知识总要记录下来，通过本文来加深对ViewPager方方面面的理解：ViewPager的基础介绍PagerAdapter+FragmentPagerAdapter&FragmentStatePagerAdapter与Fragment+TabLayout的联动使用Banner轮播图自定义切换动画首次登录引导界面闲话少说，下面进入正题。基础介绍ViewPager是Andro
  • echarts实现3d饼图 qq_45600165 echarts前端javascript
    import*asechartsfrom'echarts'import'echarts-gl'//import{ref}from'vue';import{onMounted,onUnmounted,toRefs,ref,reactive,watch}from'vue'exportdefault{props:{//定义prop的名称和类型data:Object},setup(props){letst
  • 统一思想认识 永夜-极光 思想
    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