学习React，从这篇文章开始！

一、React是什么？

React 是基于 JavaScript 的用户界面库，可灵活组合元素(html标签)并渲染到HTML中某个指定DOM元素下。

JSX 是React定义的一种 标签式 扩展语法，用 JSX 编写的元素和组件，通过预处理器 babel 解析，再交给 React 渲染到HTML中指定节点下，最终形成 HTML 文件。当然React不强制要求使用 JSX ，但 JSX 确实带来了更多便利。JSX怎么使用？详情，看这里！

二、怎么安装和使用React

怎么使用 React 库到我的项目中去？推荐使用 Create React App 创建React项目，用于学习研究，因为它配置了React 运行所需的所有环境，开箱即用，详细安装和使用步骤，详情，看这里！

三、React元素和组件

1、class组件、函数组件

HTML中的标签（div、p等），在 React 中称之为元素，是构成React的最小单位，多个元素可以构成组件，组件分为 class组件 和 函数组件。组件怎么创建和使用，详情，看这里！。

2、生命周期

每个组件经历：挂载、更新、销毁，这三个阶段，称之为组件的生命周期。详情，看这里！

四、其他主题及解决方案

1、props

组件（包括函数组件和class组件）间的内置属性，用其可以传递数据给子节点。详情，看这里！

2、Context

用于设置全局变量。详情，看这里！

3、state

class组件的内置对象，用于class组件内部数据更新，譬如可以封装一个Clock组件，每秒更新一次时间。详情，看这里！

4、受控组件

用state来获取和设置输入元素值的组件，称之为受控组件。, </code> 和 <code><select></code> 等标签都可用 <code>value</code> 属性，来实现受控组件。<a href="https://link.segmentfault.com/?enc=42bUP9m2f5%2FI6iUMpBu7dQ%3D%3D.qMxrrq3Tk6a%2FsCsFIllndS5h8EpCg6ofAs4TMMTgwiFPqOXzcAYnU%2ByUdFqCC9hu" rel="nofollow">详情，看这里！</a></p> <hr> <h6>5、Hook</h6> <p>Hook 是以 <code>use</code> 开头的特殊函数（useState、useEffect等），只能在函数组件内部使用。让函数组件拥有 class组件才有的功能，譬如 useState 就等同于 class组件中的state对象。Hook是React 16.8 新增特性。<a href="https://link.segmentfault.com/?enc=Kaifa7F%2FGCKTwJ%2FwXD76Fg%3D%3D.GUBggkZ3ehre6ZqPrflKRO2sVikuxthx3wTbcQSEYTkczmssMwwU7v%2BPOuc1np6K" rel="nofollow">详情，看这里！</a></p> <hr> <h6>6、Fragment</h6> <p>无需向 DOM 添加额外节点，即可完成子列表分组功能。<a href="https://link.segmentfault.com/?enc=zRsBKOk2shyB3LK%2FI%2BkttQ%3D%3D.drHh8ok3YawwpJkk2Zklx1q2yeng34gyULPoVug2%2F36fubLAzOkqufTLaQsMAMuE" rel="nofollow">详情，看这里！</a></p> <hr> <h6>7、Portal</h6> <p>React节点默认渲染到父节点下，Portal可以让节点渲染到非父节点的其他节点下面。Portal适用场景：当子组件需要从视觉上“跳出”其容器时，譬如对话框、悬浮卡、提示框等。<a href="https://link.segmentfault.com/?enc=fUm3L9IKbClg0gRLb8bahg%3D%3D.p1Lk1LBkhbDZcPGB6iI3FIs7x7bUhFiW9Z%2B1O%2BX333oAXtv0ovhxIrW9fYRZXx8i" rel="nofollow">详情，看这里！</a></p> <hr> <h6>8、高阶组件</h6> <p>就是一个函数，接收组件作为参数并返回新组件的过程。将多个组件的相同逻辑代码，抽象到HOC中，让组件更有结构化，更易于复用。HOC不破坏传入组件的特性，只通过组合形成新组件。HOC是纯函数，没有副作用。<a href="https://link.segmentfault.com/?enc=6P0s2CkY%2BJjHv34qrFKhLw%3D%3D.Js%2FbzZiif6bMJGyhvFgspgLJ5afH44gVAordpTbFL9fKy03ODTmfvxj2Szp9IIjl" rel="nofollow">详情，看这里!</a></p> <hr> <h6>9、ref</h6> <p>ref 可以理解为指向React 元素的变量，方便其他组件访问这个React元素。<a href="https://link.segmentfault.com/?enc=FyIEqLqzXAKxCENv5dof4w%3D%3D.IyDA3daNeW5w6Q717khoe2x4oTdzqOoaWZHajmXKrvcETZx8bdcDaPI6I16kDfAj" rel="nofollow">详情，看这里！</a></p> <hr> <h6>10、事件处理函数</h6> <p>页面交互必然会伴随事件的发生，譬如HTML中的一个button被点击了一下，接下来页面应该怎么反应？就是需要button的onClick事件函数来处理。<a href="https://link.segmentfault.com/?enc=UMid8L%2FDF1CZvtT1cXZLyQ%3D%3D.bobBHeX6kHYobiqGIbP8rbmYL14HzBodse%2B%2F%2BwEJRG13Sw6xXq9TKIUvSGLiKDJI" rel="nofollow">详情，看这里！</a></p> <hr> <h6>11、列表key属性</h6> <p>当创建列表组件时，必须给每一个元素设置 key 属性，否则会有警告： a key should be provided for list items。如果元素没有key属性，React很难判断元素应该怎么渲染？如果元素有key值，那么React只对匹配key值的元素，进行更改等渲染操作，这样极高提升了运行性能。<a href="https://link.segmentfault.com/?enc=vsRyeDwaNzF30xzh%2F2NNeg%3D%3D.vp0S1dU0AuMVCq4rDuR%2BZAK52wywj9xYXV57m2IANtn6UeaDub0b880%2FD%2FMMnvdf" rel="nofollow">详情，看这里！</a></p> <hr> <h6>12、错误边界</h6> <p>UI 中 JavaScript 错误不应该导致整个应用崩溃，错误边界就是解决方案(React 16 增加的功能)。<a href="https://link.segmentfault.com/?enc=VvMkmsocKpHsfXBPFwNICw%3D%3D.GM8tiIew3htg79fU9qc7xVxHyYQOWzEXCeKXaq4l4qv3S%2BHN8otLZApllMGHy02d" rel="nofollow">详情，看这里！</a></p> <hr> <h5>第三方库对接</h5> <h5>性能优化</h5> <h5>测试用例</h5> <hr> <h5>五、相关链接：</h5> <ul> <li><a href="https://link.segmentfault.com/?enc=jgefyrQCUYp3JlcLS8KCQg%3D%3D.zowG7KTq6chYl%2B5C3RtUTjr%2BmF1BjG%2B7mLiJHMdYvFvMv5b05tfyQYt%2BamZlB2OS" rel="nofollow">学习React，从这篇文章开始！</a></li> </ul> </article> </div> </div> </div>  <div id="SOHUCS" sid="1464467324609343488"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script>  <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad">  <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div>  <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div>  <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(react.js)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1830646621059248128.htm" title="react.js" target="_blank">react.js</a> <span class="text-muted">涔溪</span> <a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>一、create-react-app全局安装create-react-app$npminstall-gcreate-react-app创建一个项目$create-react-appyour-app注意命名方式CreatinganewReactappin/dir/your-app.Installingpackages.Thismighttakeacoupleofminutes.安装过程较慢，Inst</div> </li> <li><a href="/article/1828080032459878400.htm" title="React.js如何使用Bootstrap" target="_blank">React.js如何使用Bootstrap</a> <span class="text-muted">Vesper63</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/bootstrap/1.htm">bootstrap</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>在React.js项目中使用Bootstrap有多种方法，主要包括直接引入BootstrapCSS文件和使用ReactBootstrap库。下面将详细介绍这两种方法。方法一：直接引入BootstrapCSS文件这是最简单的方式，只需在项目中引入Bootstrap的CSS文件即可。安装Bootstrap：你可以通过npm或yarn安装Bootstrap：npminstallbootstrap或者：y</div> </li> <li><a href="/article/1759950762793857024.htm" title="react起源" target="_blank">react起源</a> <span class="text-muted">lemmo</span> <div>简介React（有时叫React.js或ReactJS），是一个为数据提供渲染为HTML视图的开源JavaScript库。React视图通常采用包含以自定义HTML标记规定的其他组件的组件渲染。React为程序员提供了一种子组件不能直接影响外层组件（"dataflowsdown"）的模型，数据改变时对HTML文档的有效更新，和现代单页应用中组件之间干净的分离。它由Facebook、Instagra</div> </li> <li><a href="/article/1759892840671965184.htm" title="2024前端面试准备之uniapp篇" target="_blank">2024前端面试准备之uniapp篇</a> <span class="text-muted">前端fighter</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a> <div>全文链接！！！！！！！1.UniApp和其他跨平台框架（如ReactNative、Flutter）有什么区别？语言和技术栈：UniApp使用Vue.js作为开发语言和技术栈，而ReactNative使用React.js，Flutter使用Dart语言。开发者可以根据自己的技术背景和偏好选择合适的框架。性能和体验：UniApp的性能和用户体验相对较好，因为它使用原生渲染技术，可以实现更接近原生应用的</div> </li> <li><a href="/article/1759629324341833728.htm" title="快速创建react项目." target="_blank">快速创建react项目.</a> <span class="text-muted">River_tong</span> <div>react简介说起react，我相信大家都对它有一定的了解，react目前是前端界非常流行的一个框架了，react它产生了很多相关的技术，比如：我们常说的react.js，我们可以用react语法来编写一些网页版应用，reactnative这门技术使得我们可以用react语法来编写原生应用，reactVR可以借助react的语法来编写一些VR相关的应用或者说全景视图这样的应用。react开发环境搭</div> </li> <li><a href="/article/1759403284218589184.htm" title="Vue前端】vue使用笔记0基础到高手第2篇：Vue进阶知识点介绍（附代码，已分享）" target="_blank">Vue前端】vue使用笔记0基础到高手第2篇：Vue进阶知识点介绍（附代码，已分享）</a> <span class="text-muted"></span> <a class="tag" taget="_blank" href="/search/vim%E5%89%8D%E7%AB%AF/1.htm">vim前端</a> <div>本系列文章md笔记（已分享）主要讨论vue相关知识。Vue.js是前端三大新框架：Angular.js、React.js、Vue.js之一，Vue.js目前的使用和关注程度在三大框架中稍微胜出，并且它的热度还在递增。Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。Vue.js是一个构建数据驱动的web界面的渐进式框架，Vue.js的目标是通过尽可能简单的API实</div> </li> <li><a href="/article/1759401029595639808.htm" title="Vue 与 React 比较，十年恩怨情仇整理" target="_blank">Vue 与 React 比较，十年恩怨情仇整理</a> <span class="text-muted"></span> <div>过去的十年里，出现了许多令人兴奋的前端技术。其中，最为亮眼的当属Vue.js和React.js，他们一经出世就备受前端开发者的欢迎，当然，流行框架之间的比较也从未停止。本文将从思否社区中出现的第一篇Vue.jsvs.React.js技术比较文章开始，回顾这两位在开发者们眼中的明星框架，十年间都发生了哪些变化。本文不只是技术的对比分析，更是对那些年我们一起追过的框架的致敬。让我们从头再来一次，感受V</div> </li> <li><a href="/article/1757098127510224896.htm" title="什么是VUE？" target="_blank">什么是VUE？</a> <span class="text-muted">最爱喝龙井</span> <div>什么是Vue.jsVue.js是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App，Vue语法也是可以用于进行手机App开发的，需要借助于Weex）Vue.js是前端的主流框架之一，和Angular.js、React.js一起，并成为前端三大主流框架！Vue.js是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整</div> </li> <li><a href="/article/1756897967672934400.htm" title="常见的web前端开发框架：Bootstrap" target="_blank">常见的web前端开发框架：Bootstrap</a> <span class="text-muted">钟念</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%A1%86%E6%9E%B6/1.htm">前端开发框架</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/bootstrap/1.htm">bootstrap</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>常见的Web前端开发框架包括Bootstrap、Vue.js、React.js、Angular.js等。每个框架都有其独特的特点和优势，开发者可以根据项目的需求和个人的喜好来选择合适的框架。同时，随着技术的不断发展，新的框架和工具也会不断涌现，为Web前端开发带来更多的选择和可能性。下面将对Bootstrap框架进行简要介绍，包括它们的特点、使用方法和一些示例代码。Bootstrap基本概念：Bo</div> </li> <li><a href="/article/1756897968931225600.htm" title="常见的web前端开发框架：Vue.js" target="_blank">常见的web前端开发框架：Vue.js</a> <span class="text-muted">钟念</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%A1%86%E6%9E%B6/1.htm">前端开发框架</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>常见的Web前端开发框架包括Bootstrap、Vue.js、React.js、Angular.js等。每个框架都有其独特的特点和优势，开发者可以根据项目的需求和个人的喜好来选择合适的框架。同时，随着技术的不断发展，新的框架和工具也会不断涌现，为Web前端开发带来更多的选择和可能性。下面将对Vue.js框架进行简要介绍，包括它们的特点、使用方法和一些示例代码。Vue.js基本概念：Vue.js是一</div> </li> <li><a href="/article/1756897969937858560.htm" title="常见的web前端开发框架：React.js" target="_blank">常见的web前端开发框架：React.js</a> <span class="text-muted">钟念</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%A1%86%E6%9E%B6/1.htm">前端开发框架</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>常见的Web前端开发框架包括Bootstrap、Vue.js、React.js、Angular.js等。每个框架都有其独特的特点和优势，开发者可以根据项目的需求和个人的喜好来选择合适的框架。同时，随着技术的不断发展，新的框架和工具也会不断涌现，为Web前端开发带来更多的选择和可能性。下面将对React.js框架进行简要介绍，包括它们的特点、使用方法和一些示例代码。React.jsReact.js是</div> </li> <li><a href="/article/1756897837745979392.htm" title="常见的web前端开发框架：Angular.js" target="_blank">常见的web前端开发框架：Angular.js</a> <span class="text-muted">钟念</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%A1%86%E6%9E%B6/1.htm">前端开发框架</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/angular.js/1.htm">angular.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/typescript/1.htm">typescript</a><a class="tag" taget="_blank" href="/search/npm/1.htm">npm</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a> <div>常见的Web前端开发框架包括Bootstrap、Vue.js、React.js、Angular.js等。每个框架都有其独特的特点和优势，开发者可以根据项目的需求和个人的喜好来选择合适的框架。同时，随着技术的不断发展，新的框架和工具也会不断涌现，为Web前端开发带来更多的选择和可能性。下面将对Angular.js框架进行简要介绍，包括它们的特点、使用方法和一些示例代码。Angular.js基本概念：</div> </li> <li><a href="/article/1756617175155621888.htm" title="Vue 与 React 比较，十年恩怨情仇整理" target="_blank">Vue 与 React 比较，十年恩怨情仇整理</a> <span class="text-muted"></span> <div>过去的十年里，出现了许多令人兴奋的前端技术。其中，最为亮眼的当属Vue.js和React.js，他们一经出世就备受前端开发者的欢迎，当然，流行框架之间的比较也从未停止。本文将从思否社区中出现的第一篇Vue.jsvs.React.js技术比较文章开始，回顾这两位在开发者们眼中的明星框架，十年间都发生了哪些变化。本文不只是技术的对比分析，更是对那些年我们一起追过的框架的致敬。让我们从头再来一次，感受V</div> </li> <li><a href="/article/1755191676357328896.htm" title="新书速览 | React.js+Node.js+MongoDB企业级全栈开发实践" target="_blank">新书速览 | React.js+Node.js+MongoDB企业级全栈开发实践</a> <span class="text-muted">全栈开发圈</span> <a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a> <div>详解React.js全家桶及其结合Node.js、MongoDB进行全栈开发的方法实战企业级应用系统项目开发本书内容本书系统介绍Web应用全栈开发技术，通过一个真实的企业项目，讲解如何使用React全家桶以及Node.js、MongoDB进行全栈开发，帮助开发人员快速积累开发经验，全面掌握开发技巧。读完本书相当于真实参与一个完整的全栈项目开发。本书配套示例项目源代码。本书共分27章，内容包括开发环</div> </li> <li><a href="/article/1754735265894645760.htm" title="React 与 Angular：项目的最佳框架" target="_blank">React 与 Angular：项目的最佳框架</a> <span class="text-muted">千源万码</span> <a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/angular.js/1.htm">angular.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>什么是React？React或React.js是一个基于JavaScript的前端库，可帮助创建用户界面(UI)。它以声明式编程风格描绘UI状态。通过React，程序员可以掌握应用程序在开发后将如何呈现给用户以及他们将如何与用户交互。尽管React以开发Web应用程序而闻名，但它也有助于构建移动应用程序和本机呈现的应用程序。Facebook、Instagram、Netflix和纽约时报等全球公司在</div> </li> <li><a href="/article/1754340238215364608.htm" title="web 技术栈有哪些？" target="_blank">web 技术栈有哪些？</a> <span class="text-muted">老马啸西风</span> <a class="tag" taget="_blank" href="/search/web/1.htm">web</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>前端技术栈：HTML（超文本标记语言）：用于创建网页结构的标记语言，定义页面的内容和结构。CSS（层叠样式表）：用于设计和排版网页的样式表语言，负责页面的外观和样式。JavaScript：一种脚本语言，用于在浏览器中实现动态交互和客户端逻辑。常用的前端框架和库如React、Vue、Angular等，可以加速开发。前端框架和库：React.js、Vue.js、Angular等，用于简化和加速前端开发</div> </li> <li><a href="/article/1754304108208078848.htm" title="DataBinding使用详解-Google官方的视图绑定" target="_blank">DataBinding使用详解-Google官方的视图绑定</a> <span class="text-muted">ZhangQiang-</span> <a class="tag" taget="_blank" href="/search/%5BAndroid%E8%BF%9B%E9%98%B6%5D/1.htm">[Android进阶]</a> <div>几年前，数据绑定在便已在前端界风生水起，Angular.js、React.js、vue.js等热门前端框架都具备这种能力。Android端的开源库butterknife/Anotation/dragger2等等也非常好用且广受支持;数据绑定简单来说，就是通过某种机制，把代码中的数据和xml(UI)绑定起来，双方都能对数据进行操作，并且在数据发生变化的时候，自动刷新数据。在2015年的谷歌IO大会上</div> </li> <li><a href="/article/1754135698736168960.htm" title="LLM应用开发与落地：使用gradio十分钟搭建聊天UI" target="_blank">LLM应用开发与落地：使用gradio十分钟搭建聊天UI</a> <span class="text-muted">前行的七哥</span> <a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a> <div>一、背景如果你是做LLM应用开发的，特别是做后端开发，你一定会遇到怎么快速写一个聊天UI界面来调试prompt或agent的问题。这时候的你可能在苦恼中，毕竟react.js,next.js,css,html也不是每个人都那么熟练，对吧？即使你是做前端开发的，你也可以尝试一下Gradio，哪天有人给你提了一个调试界面的需求，原本要半天的工作现在只需要十分钟了，多余的时机用来学习或享受生活，多美（或</div> </li> <li><a href="/article/1753035361233158144.htm" title="通过 React 来构建界面" target="_blank">通过 React 来构建界面</a> <span class="text-muted">张培跃吧</span> <a class="tag" taget="_blank" href="/search/React/1.htm">React</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>1-通过React来构建界面第1步：下载所需要的二个库文件至本地，如果需要加载指定版本的react和react-dom，可以把18替换成所需加载的版本号。react.js：React中的核心库文件。//开发版https://unpkg.com/react@18/umd/react.development.js//生产版https://unpkg.com/react@18/umd/react.pro</div> </li> <li><a href="/article/1752156807041662976.htm" title="如何在 React 中使用 Sass" target="_blank">如何在 React 中使用 Sass</a> <span class="text-muted">网络研究院</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E7%A0%94%E7%A9%B6%E9%99%A2/1.htm">网络研究院</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/sass/1.htm">sass</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/%E9%A1%B9%E7%9B%AE/1.htm">项目</a> <div>Sass（语法很棒的样式表）是CSS的扩展，具有使其更强大的附加功能。Sass最好的一点是它与CSS的兼容性，这意味着您可以在Web开发项目中使用React等JavaScript框架。然而，与普通CSS不同，您需要进行一些设置才能使用Sass。通过设置一个简单的React.js项目并将Sass与其集成来了解其工作原理。如何在React.js项目中使用Sass与其他CSS处理器一样，React本身并</div> </li> <li><a href="/article/1751983156120010752.htm" title="js获取今天剩余时间_前端教程丨手把手教你用 Next.js 搭建个人博客，从入门到吃鸡" target="_blank">js获取今天剩余时间_前端教程丨手把手教你用 Next.js 搭建个人博客，从入门到吃鸡</a> <span class="text-muted">weixin_39610774</span> <a class="tag" taget="_blank" href="/search/js%E8%8E%B7%E5%8F%96%E4%BB%8A%E5%A4%A9%E5%89%A9%E4%BD%99%E6%97%B6%E9%97%B4/1.htm">js获取今天剩余时间</a><a class="tag" taget="_blank" href="/search/%E7%94%A8/1.htm">用</a><a class="tag" taget="_blank" href="/search/js%E5%88%A4%E6%96%AD/1.htm">js判断</a><a class="tag" taget="_blank" href="/search/%E4%B8%80%E4%B8%AA%E6%95%B0%E6%98%AF%E5%90%A6%E6%98%AF%E7%B4%A0%E6%95%B0%28%E8%B4%A8%E6%95%B0%29/1.htm">一个数是否是素数(质数)</a> <div>React.js是现今前端最火的应用框架之一，而Next.js正是React.js领域最优秀的服务端渲染框架之一。基本上，现在所有的前端主流形式，从服务端渲染APP，静态站到桌面应用等，Next.js都能胜任。不论是国内还是国外，都有不少开发者和企业在使用Next.js开发网站，比如：腾讯新闻移动端门口站腾讯网大名顶顶的Hulu视频站世界最受欢迎的ReactUI组件库Material-UI魅族官网</div> </li> <li><a href="/article/1751982897977376768.htm" title="前端教程丨手把手教你用 Next.js 搭建个人博客，从入门到吃鸡" target="_blank">前端教程丨手把手教你用 Next.js 搭建个人博客，从入门到吃鸡</a> <span class="text-muted">蓝桥云课</span> <a class="tag" taget="_blank" href="/search/web/1.htm">web</a><a class="tag" taget="_blank" href="/search/reactjs/1.htm">reactjs</a> <div>React.js是现今前端最火的应用框架之一，而**Next.js正是React.js领域最优秀的服务端渲染框架之一。**基本上，现在所有的前端主流形式，从服务端渲染APP，静态站到桌面应用等，Next.js都能胜任。不论是国内还是国外，都有不少开发者和企业在使用Next.js开发网站，比如：腾讯新闻移动端门口站腾讯网大名顶顶的Hulu视频站世界最受欢迎的ReactUI组件库Material-UI</div> </li> <li><a href="/article/1751982513158373376.htm" title="【前端教程】手把手教你用 Next.js 搭建个人博客，从入门到吃鸡！" target="_blank">【前端教程】手把手教你用 Next.js 搭建个人博客，从入门到吃鸡！</a> <span class="text-muted">实验楼v</span> <div>React.js是现今前端最火的应用框架之一，而Next.js正是React.js领域最优秀的服务端渲染框架之一。基本上，现在所有的前端主流形式，从服务端渲染APP，静态站到桌面应用等，Next.js都能胜任。不论是国内还是国外，都有不少开发者和企业在使用Next.js开发网站，比如：腾讯新闻移动端门口站腾讯网大名顶顶的Hulu视频站世界最受欢迎的ReactUI组件库Material-UI魅族官网</div> </li> <li><a href="/article/1750115808266174464.htm" title="React-9：通过路由实现排序切换" target="_blank">React-9：通过路由实现排序切换</a> <span class="text-muted">kino2046</span> <div>queryString（查询字符串）通常我们把URL`?`后面的内容称为queryString，在React.js中，我们可以通过`this.props.location.search`来获取，它的值是字符串，格式为：?k1=v1&k2=v2，为了方便操作，我们把它转成对象形式URLSearchParams在原生JJavaScript中内置了一个URLSearchParams的类，我们通过它可以很</div> </li> <li><a href="/article/1749663567096856576.htm" title="构建高效外卖系统：技术实践与代码示例" target="_blank">构建高效外卖系统：技术实践与代码示例</a> <span class="text-muted">万岳科技系统开发</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a> <div>外卖系统在现代社会中扮演着重要的角色，为用户提供了便捷的用餐解决方案。在这篇文章中，我们将探讨构建高效外卖系统的技术实践，同时提供一些基础的代码示例，帮助开发者更好地理解和应用这些技术。1.技术栈选择构建外卖系统首先需要选择合适的技术栈。以下是一个简单的技术栈示例：前端：React.js后端：Node.js数据库：MongoDB实时通信：WebSocket云服务：AWS或Azure2.用户认证与授</div> </li> <li><a href="/article/1749324305847566336.htm" title="React.js快速入门教程" target="_blank">React.js快速入门教程</a> <span class="text-muted">heiyay</span> <a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>介绍React.js是一个由Facebook开发的用于构建用户界面的JavaScript库。它主要用于构建单页面应用程序（SPA），可以轻松地创建交互性强、快速响应的用户界面。React.js的特点1.声明式设计−React采用声明范式，可以轻松描述应用。2.高效−React通过对DOM的模拟，最大限度地减少与DOM的交互。3.灵活−React可以与已知的库或框架很好地配合。4.JSX−JSX是J</div> </li> <li><a href="/article/1747414643418087424.htm" title="useRef钩子大法好！" target="_blank">useRef钩子大法好！</a> <span class="text-muted">今天也想MK代码</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>在React.js中，useRef是一个钩子，允许你创建一个对元素或值的可变引用。与useState钩子不同，更新useRef不会触发组件的重新渲染。它通常用于直接访问和管理DOM元素，存储持久值，或处理不应触发重新渲染的值。useRef的基本语法如下：constrefContainer=useRef(initialValue);useRef的主要用途1.访问DOM元素useRef的一个最常见的用</div> </li> <li><a href="/article/1746103789431046144.htm" title="Vue.js 学习Day1" target="_blank">Vue.js 学习Day1</a> <span class="text-muted">cf6d95617c55</span> <div>Vue.js-Day1课程介绍前5天：都在学习Vue基本的语法和概念；打包工具Webpack,Gulp后5天：以项目驱动教学；什么是Vue.jsVue.js是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App，Vue语法也是可以用于进行手机App开发的，需要借助于Weex）Vue.js是前端的主流框架之一，和Angular.js、React.js</div> </li> <li><a href="/article/1745787485834723328.htm" title="【React.js 06】Redux基础知识" target="_blank">【React.js 06】Redux基础知识</a> <span class="text-muted">IUVO</span> <div>Redux是一个专注于状态管理的库，和React是解耦的，用Angular和Vue都可以使用Redux。其具有一个单一状态，单向数据流的特性。Redux概念redux有一个store，记录所有的state，state要改变的时候，就通知dispatch去执行action，reducer拿到state和action去生成新的state，store.subscribe根据新的state重新渲染出改变后</div> </li> <li><a href="/article/1744937354797268992.htm" title="前端八股文系列（七） React 面试专题" target="_blank">前端八股文系列（七） React 面试专题</a> <span class="text-muted">微莱羽墨</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>文章目录React面试专题React.js是MVVM框架吗?hooks用过吗？聊聊react中class组件和函数组件的区别React组件通信方式1）父组件向子组件通信2）子组件向父组件通信3）跨级组件通信4）非嵌套关系的组件通信setState既存在异步情况也存在同步情况生命周期说一下react-fiber1）背景2）实现原理Portals何时要使用异步组件？如和使用异步组件React事件绑定原</div> </li> <li><a href="/article/67.htm" title="jvm调优总结（从基本概念到深度优化）" target="_blank">jvm调优总结（从基本概念到深度优化）</a> <span class="text-muted">oloz</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/jdk/1.htm">jdk</a><a class="tag" taget="_blank" href="/search/%E8%99%9A%E6%8B%9F%E6%9C%BA/1.htm">虚拟机</a><a class="tag" taget="_blank" href="/search/%E5%BA%94%E7%94%A8%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">应用服务器</a> <div>JVM参数详解：http://www.cnblogs.com/redcreen/archive/2011/05/04/2037057.html Java虚拟机中，数据类型可以分为两类：基本类型和引用类型。基本类型的变量保存原始值，即：他代表的值就是数值本身；而引用类型的变量保存引用值。“引用值”代表了某个对象的引用，而不是对象本身，对象本身存放在这个引用值所表示的地址的位置。 </div> </li> <li><a href="/article/194.htm" title="【Scala十六】Scala核心十：柯里化函数" target="_blank">【Scala十六】Scala核心十：柯里化函数</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/scala/1.htm">scala</a> <div>本篇文章重点说明什么是函数柯里化，这个语法现象的背后动机是什么，有什么样的应用场景，以及与部分应用函数(Partial Applied Function)之间的联系 1. 什么是柯里化函数 A way to write functions with multiple parameter lists. For instance def f(x: Int)(y: Int) is a </div> </li> <li><a href="/article/321.htm" title="HashMap" target="_blank">HashMap</a> <span class="text-muted">dalan_123</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>HashMap在java中对很多人来说都是熟的；基于hash表的map接口的非同步实现。允许使用null和null键；同时不能保证元素的顺序；也就是从来都不保证其中的元素的顺序恒久不变。 1、数据结构在java中，最基本的数据结构无外乎：数组和引用（指针），所有的数据结构都可以用这两个来构造，HashMap也不例外，归根到底HashMap就是一个链表散列的数据</div> </li> <li><a href="/article/448.htm" title="Java Swing如何实时刷新JTextArea，以显示刚才加append的内容" target="_blank">Java Swing如何实时刷新JTextArea，以显示刚才加append的内容</a> <span class="text-muted">周凡杨</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%9B%B4%E6%96%B0/1.htm">更新</a><a class="tag" taget="_blank" href="/search/swing/1.htm">swing</a><a class="tag" taget="_blank" href="/search/JTextArea/1.htm">JTextArea</a> <div>在代码中执行完textArea.append("message")后，如果你想让这个更新立刻显示在界面上而不是等swing的主线程返回后刷新，我们一般会在该语句后调用textArea.invalidate()和textArea.repaint()。问题是这个方法并不能有任何效果，textArea的内容没有任何变化，这或许是swing的一个bug，有一个笨拙的办法可以实现</div> </li> <li><a href="/article/575.htm" title="servlet或struts的Action处理ajax请求" target="_blank">servlet或struts的Action处理ajax请求</a> <span class="text-muted">g21121</span> <a class="tag" taget="_blank" href="/search/servlet/1.htm">servlet</a> <div>其实处理ajax的请求非常简单，直接看代码就行了： //如果用的是struts //HttpServletResponse response = ServletActionContext.getResponse(); // 设置输出为文字流 response.setContentType("text/plain"); // 设置字符集 res</div> </li> <li><a href="/article/702.htm" title="FineReport的公式编辑框的语法简介" target="_blank">FineReport的公式编辑框的语法简介</a> <span class="text-muted">老A不折腾</span> <a class="tag" taget="_blank" href="/search/finereport/1.htm">finereport</a><a class="tag" taget="_blank" href="/search/%E5%85%AC%E5%BC%8F/1.htm">公式</a><a class="tag" taget="_blank" href="/search/%E6%80%BB%E7%BB%93/1.htm">总结</a> <div>FINEREPORT用到公式的地方非常多，单元格（以=开头的便被解析为公式），条件显示，数据字典，报表填报属性值定义，图表标题，轴定义，页眉页脚，甚至单元格的其他属性中的鼠标悬浮提示内容都可以写公式。简单的说下自己感觉的公式要注意的几个地方： 1.if语句语法刚接触感觉比较奇怪，if(条件式子,值1,值2)，if可以嵌套，if(条件式子1，值1，if(条件式子2，值2，值3)</div> </li> <li><a href="/article/829.htm" title="linux mysql 数据库乱码的解决办法" target="_blank">linux mysql 数据库乱码的解决办法</a> <span class="text-muted">墙头上一根草</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93%E4%B9%B1%E7%A0%81/1.htm">数据库乱码</a> <div>linux 上mysql数据库区分大小写的配置 lower_case_table_names=1 1-不区分大小写 0-区分大小写修改/etc/my.cnf 具体的修改内容如下: [client] default-character-set=utf8 [mysqld] datadir=/var/lib/mysql socket=/va</div> </li> <li><a href="/article/956.htm" title="我的spring学习笔记6-ApplicationContext实例化的参数兼容思想" target="_blank">我的spring学习笔记6-ApplicationContext实例化的参数兼容思想</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/Spring+3/1.htm">Spring 3</a> <div>ApplicationContext能读取多个Bean定义文件，方法是： ApplicationContext appContext = new ClassPathXmlApplicationContext（ new String[]｛“bean-config1.xml”，“bean-config2.xml”，“bean-config3.xml”，“bean-config4.xml</div> </li> <li><a href="/article/1083.htm" title="mysql 基准测试之sysbench" target="_blank">mysql 基准测试之sysbench</a> <span class="text-muted">annan211</span> <a class="tag" taget="_blank" href="/search/%E5%9F%BA%E5%87%86%E6%B5%8B%E8%AF%95/1.htm">基准测试</a><a class="tag" taget="_blank" href="/search/mysql%E5%9F%BA%E5%87%86%E6%B5%8B%E8%AF%95/1.htm">mysql基准测试</a><a class="tag" taget="_blank" href="/search/MySQL%E6%B5%8B%E8%AF%95/1.htm">MySQL测试</a><a class="tag" taget="_blank" href="/search/sysbench/1.htm">sysbench</a> <div>1 执行如下命令，安装sysbench-0.5： tar xzvf sysbench-0.5.tar.gz cd sysbench-0.5 chmod +x autogen.sh ./autogen.sh ./configure --with-mysql --with-mysql-includes=/usr/local/mysql</div> </li> <li><a href="/article/1210.htm" title="sql的复杂查询使用案列与技巧" target="_blank">sql的复杂查询使用案列与技巧</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/%E5%87%BD%E6%95%B0/1.htm">函数</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%88%86%E9%A1%B5/1.htm">数据分页</a><a class="tag" taget="_blank" href="/search/%E5%90%88%E5%B9%B6%E6%9F%A5%E8%AF%A2/1.htm">合并查询</a> <div> 本片博客使用的数据库表是oracle中的scott用户表; ------------------- 自然连接查询查询 smith 的上司(两种方法) &</div> </li> <li><a href="/article/1337.htm" title="深入学习Thread类" target="_blank">深入学习Thread类</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/thread/1.htm">thread</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">多线程</a><a class="tag" taget="_blank" href="/search/java%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">java多线程</a> <div>一．线程的名字下面来看一下Thread类的name属性，它的类型是String。它其实就是线程的名字。在Thread类中，有String getName()和void setName(String)两个方法用来设置和获取这个属性的值。同时，Thr</div> </li> <li><a href="/article/1464.htm" title="JSON串转换成Map以及如何转换到对应的数据类型" target="_blank">JSON串转换成Map以及如何转换到对应的数据类型</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/fastjson/1.htm">fastjson</a><a class="tag" taget="_blank" href="/search/net.sf.json/1.htm">net.sf.json</a> <div> 在实际开发中，难免会碰到JSON串转换成Map的情况，下面来看看这方面的实例。另外，由于fastjson只支持JDK1.5及以上版本，因此在JDK1.4的项目中可以采用net.sf.json来处理。一.fastjson实例 JsonUtil.java package com.study; impor</div> </li> <li><a href="/article/1591.htm" title="【RPC框架HttpInvoker一】HttpInvoker：Spring自带RPC框架" target="_blank">【RPC框架HttpInvoker一】HttpInvoker：Spring自带RPC框架</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>HttpInvoker是Spring原生的RPC调用框架，HttpInvoker同Burlap和Hessian一样，提供了一致的服务Exporter以及客户端的服务代理工厂Bean，这篇文章主要是复制粘贴了Hessian与Spring集成一文，【RPC框架Hessian四】Hessian与Spring集成在【RPC框架Hessian二】Hessian 对象序列化和反序列化一文中</div> </li> <li><a href="/article/1718.htm" title="【Mahout二】基于Mahout CBayes算法的20newsgroup的脚本分析" target="_blank">【Mahout二】基于Mahout CBayes算法的20newsgroup的脚本分析</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/Mahout/1.htm">Mahout</a> <div>#!/bin/bash # # Licensed to the Apache Software Foundation (ASF) under one or more # contributor license agreements. See the NOTICE file distributed with # this work for additional information re</div> </li> <li><a href="/article/1845.htm" title="nginx三种获取用户真实ip的方法" target="_blank">nginx三种获取用户真实ip的方法</a> <span class="text-muted">ronin47</span> <div>随着nginx的迅速崛起，越来越多公司将apache更换成nginx. 同时也越来越多人使用nginx作为负载均衡, 并且代理前面可能还加上了CDN加速，但是随之也遇到一个问题：nginx如何获取用户的真实IP地址,如果后端是apache,请跳转到<apache获取用户真实IP地址>，如果是后端真实服务器是nginx，那么继续往下看。实例环境：用户IP 120.22.11.11 </div> </li> <li><a href="/article/1972.htm" title="java-判断二叉树是不是平衡" target="_blank">java-判断二叉树是不是平衡</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>参考了 http://zhedahht.blog.163.com/blog/static/25411174201142733927831/ 但是用java来实现有一个问题。由于Java无法像C那样“传递参数的地址，函数返回时能得到参数的值”，唯有新建一个辅助类：AuxClass import ljn.help.*; public class BalancedBTree { </div> </li> <li><a href="/article/2099.htm" title="BeanUtils.copyProperties VS PropertyUtils.copyProperties" target="_blank">BeanUtils.copyProperties VS PropertyUtils.copyProperties</a> <span class="text-muted">诸葛不亮</span> <a class="tag" taget="_blank" href="/search/PropertyUtils/1.htm">PropertyUtils</a><a class="tag" taget="_blank" href="/search/BeanUtils/1.htm">BeanUtils</a> <div> BeanUtils.copyProperties VS PropertyUtils.copyProperties 作为两个bean属性copy的工具类，他们被广泛使用，同时也很容易误用，给人造成困然；比如：昨天发现同事在使用BeanUtils.copyProperties copy有integer类型属性的bean时，没有考虑到会将null转换为0，而后面的业</div> </li> <li><a href="/article/2226.htm" title="[金融与信息安全]最简单的数据结构最安全" target="_blank">[金融与信息安全]最简单的数据结构最安全</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a> <div> 现在最流行的数据库的数据存储文件都具有复杂的文件头格式，用操作系统的记事本软件是无法正常浏览的，这样的情况会有什么问题呢？从信息安全的角度来看，如果我们数据库系统仅仅把这种格式的数据文件做异地备份，如果相同版本的所有数据库管理系统都同时被攻击，那么</div> </li> <li><a href="/article/2353.htm" title="vi区段删除" target="_blank">vi区段删除</a> <span class="text-muted">Cwind</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/vi/1.htm">vi</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E6%AE%B5%E5%88%A0%E9%99%A4/1.htm">区段删除</a> <div>区段删除是编辑和分析一些冗长的配置文件或日志文件时比较常用的操作。简记下vi区段删除要点备忘。 vi概述引文中并未将末行模式单独列为一种模式。单不单列并不重要，能区分命令模式与末行模式即可。 vi区段删除步骤： 1. 在末行模式下使用:set nu显示行号非必须，随光标移动vi右下角也会显示行号，能够正确找到并记录删除开始行</div> </li> <li><a href="/article/2480.htm" title="清除tomcat缓存的方法总结" target="_blank">清除tomcat缓存的方法总结</a> <span class="text-muted">dashuaifu</span> <a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a><a class="tag" taget="_blank" href="/search/%E7%BC%93%E5%AD%98/1.htm">缓存</a> <div>用tomcat容器，大家可能会发现这样的问题，修改jsp文件后，但用IE打开依然是以前的Jsp的页面。出现这种现象的原因主要是tomcat缓存的原因。解决办法如下: 在jsp文件头加上 <meta http-equiv="Expires" content="0"> <meta http-equiv="kiben&qu</div> </li> <li><a href="/article/2607.htm" title="不要盲目的在项目中使用LESS CSS" target="_blank">不要盲目的在项目中使用LESS CSS</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/less/1.htm">less</a> <div>　如果你还不知道LESS CSS是什么东西，可以看一下这篇文章，是我一朋友写给新人看的《CSS——LESS》　　不可否认，LESS CSS是个强大的工具，它弥补了css没有变量、无法运算等一些“先天缺陷”，但它似乎给我一种错觉，就是为了功能而实现功能。　　比如它的引用功能 ? .rounded_corners{ </div> </li> <li><a href="/article/2734.htm" title="[入门]更上一层楼" target="_blank">[入门]更上一层楼</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/yii2/1.htm">yii2</a> <div>更上一层楼通篇阅读完整个“入门”部分，你就完成了一个完整 Yii 应用的创建。在此过程中你学到了如何实现一些常用功能，例如通过 HTML 表单从用户那获取数据，从数据库中获取数据并以分页形式显示。你还学到了如何通过 Gii 去自动生成代码。使用 Gii 生成代码把 Web 开发中多数繁杂的过程转化为仅仅填写几个表单就行。本章将介绍一些有助于更好使用 Yii 的资源： </div> </li> <li><a href="/article/2861.htm" title="Apache HttpClient使用详解" target="_blank">Apache HttpClient使用详解</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/httpclient/1.htm">httpclient</a><a class="tag" taget="_blank" href="/search/http%E5%8D%8F%E8%AE%AE/1.htm">http协议</a> <div>Http协议的重要性相信不用我多说了，HttpClient相比传统JDK自带的URLConnection，增加了易用性和灵活性（具体区别，日后我们再讨论），它不仅是客户端发送Http请求变得容易，而且也方便了开发人员测试接口（基于Http协议的），即提高了开发的效率，也方便提高代码的健壮性。因此熟练掌握HttpClient是很重要的必修内容，掌握HttpClient后，相信对于Http协议的了解会</div> </li> <li><a href="/article/2988.htm" title="zxing二维码扫描功能" target="_blank">zxing二维码扫描功能</a> <span class="text-muted">gundumw100</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/zxing/1.htm">zxing</a> <div>经常要用到二维码扫描功能现给出示例代码 import com.google.zxing.WriterException; import com.zxing.activity.CaptureActivity; import com.zxing.encoding.EncodingHandler; import android.app.Activity; import an</div> </li> <li><a href="/article/3115.htm" title="纯HTML+CSS带说明的黄色导航菜单" target="_blank">纯HTML+CSS带说明的黄色导航菜单</a> <span class="text-muted">ini</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/hovertree/1.htm">hovertree</a> <div>HoverTree带说明的CSS菜单:纯HTML+CSS结构链接带说明的黄色导航在线体验效果：http://hovertree.com/texiao/css/1.htm代码如下,保存到HTML文件可以看到效果： <!DOCTYPE html > <html > <head> <title>HoverTree</div> </li> <li><a href="/article/3242.htm" title="fastjson初始化对性能的影响" target="_blank">fastjson初始化对性能的影响</a> <span class="text-muted">kane_xie</span> <a class="tag" taget="_blank" href="/search/fastjson/1.htm">fastjson</a><a class="tag" taget="_blank" href="/search/%E5%BA%8F%E5%88%97%E5%8C%96/1.htm">序列化</a> <div>之前在项目中序列化是用thrift，性能一般，而且需要用编译器生成新的类，在序列化和反序列化的时候感觉很繁琐，因此想转到json阵营。对比了jackson，gson等框架之后，决定用fastjson，为什么呢，因为看名字感觉很快。。。网上的说法： fastjson 是一个性能很好的 Java 语言实现的 JSON 解析器和生成器，来自阿里巴巴的工程师开发。 </div> </li> <li><a href="/article/3369.htm" title="基于Mybatis封装的增删改查实现通用自动化sql" target="_blank">基于Mybatis封装的增删改查实现通用自动化sql</a> <span class="text-muted">mengqingyu</span> <a class="tag" taget="_blank" href="/search/DAO/1.htm">DAO</a> <div>1.基于map或javaBean的增删改查可实现不写dao接口和实现类以及xml，有效的提高开发速度。 2.支持自定义注解包括主键生成、列重复验证、列名、表名等 3.支持批量插入、批量更新、批量删除 <bean id="dynamicSqlSessionTemplate" class="com.mqy.mybatis.support.Dynamic</div> </li> <li><a href="/article/3496.htm" title="js控制input输入框的方法封装(数字，中文，字母，浮点数等)" target="_blank">js控制input输入框的方法封装(数字，中文，字母，浮点数等)</a> <span class="text-muted">qifeifei</span> <a class="tag" taget="_blank" href="/search/javascript+js/1.htm">javascript js</a> <div>在项目开发的时候，经常有一些输入框，控制输入的格式，而不是等输入好了再去检查格式，格式错了就报错，体验不好。 /** 数字，中文，字母,浮点数(+/-/.) 类型输入限制，只要在input标签上加上 jInput="number,chinese,alphabet,floating" 备注：floating属性只能单独用*/ funct</div> </li> <li><a href="/article/3623.htm" title="java 计时器应用" target="_blank">java 计时器应用</a> <span class="text-muted">tangqi609567707</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/timer/1.htm">timer</a> <div>mport java.util.TimerTask; import java.util.Calendar; public class MyTask extends TimerTask { private static final int </div> </li> <li><a href="/article/3750.htm" title="erlang输出调用栈信息" target="_blank">erlang输出调用栈信息</a> <span class="text-muted">wudixiaotie</span> <a class="tag" taget="_blank" href="/search/erlang/1.htm">erlang</a> <div>在erlang otp的开发中，如果调用第三方的应用，会有有些错误会不打印栈信息，因为有可能第三方应用会catch然后输出自己的错误信息，所以对排查bug有很大的阻碍，这样就要求我们自己打印调用的栈信息。用这个函数：erlang:process_display (self (), backtrace).需要注意这个函数只会输出到标准错误输出。也可以用这个函数：erlang:get_s</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类：</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.  </div> </div> </footer>  <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>