学习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/1943853592725221376.htm" title="GPT实操——利用GPT创建一个应用" target="_blank">GPT实操——利用GPT创建一个应用</a> <span class="text-muted">狗木马</span> <a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/1.htm">深度学习</a><a class="tag" taget="_blank" href="/search/gpt-3/1.htm">gpt-3</a><a class="tag" taget="_blank" href="/search/gpt/1.htm">gpt</a> <div>功能描述信息查询：用户可以询问各种问题，如天气、新闻、股票等，机器人会返回相关信息。任务执行：用户可以要求机器人执行一些简单的任务，如设置提醒、发送邮件等。情感支持：机器人可以与用户进行情感交流，提供安慰和支持。个性化设置：用户可以自定义机器人的回复风格和偏好。技术栈前端：React.js后端：Node.js+Express数据库：MongoDB自然语言处理：OpenAIGPT-3API其他工具：</div> </li> <li><a href="/article/1942755346590265344.htm" title="React.js 组件间数据传递的常见问题及解决方案" target="_blank">React.js 组件间数据传递的常见问题及解决方案</a> <span class="text-muted">JJCTO袁龙</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/%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组件间数据传递的常见问题及解决方案在React.js开发中，组件间的数据传递是构建复杂用户界面的基础。然而，开发者在实现组件间数据传递时可能会遇到各种问题，导致数据无法正确传递或更新。本文将探讨这些问题的常见原因，并提供相应的解决方案。一、React.js组件间数据传递的常见问题（一）数据传递不正确父组件传递给子组件的props可能未正确接收或使用，导致子组件无法正确显示数据。（二</div> </li> <li><a href="/article/1942395689258512384.htm" title="React.js 错误解析：React.Children.only 预期仅接收单个 React 元素子节点" target="_blank">React.js 错误解析：React.Children.only 预期仅接收单个 React 元素子节点</a> <span class="text-muted">JJCTO袁龙</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/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>React.js错误解析：React.Children.only预期仅接收单个React元素子节点在React.js开发中，React.Children.only是一个非常有用的工具，用于确保组件仅接收单个子元素。然而，开发者可能会遇到一个令人困惑的错误：React.Children.onlyexpectedtoreceiveasingleReactelementchild。这个错误表明传递给Re</div> </li> <li><a href="/article/1942010364761796608.htm" title="React.js在前端移动端开发中的应用" target="_blank">React.js在前端移动端开发中的应用</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/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/ai/1.htm">ai</a> <div>React.js在前端移动端开发中的应用关键词：React.js、移动端开发、跨平台、组件化、性能优化、ReactNative、PWA摘要：本文将深入探讨React.js在移动端开发中的应用场景和技术实现。从React的核心特性出发，分析其在移动端的优势，详细介绍ReactNative的工作原理，并通过实际案例展示如何构建高性能的移动应用。文章还将对比不同移动端开发方案，提供性能优化建议，并展望R</div> </li> <li><a href="/article/1941656160352399360.htm" title="React应用中的受保护路由与Flux架构" target="_blank">React应用中的受保护路由与Flux架构</a> <span class="text-muted">息相吹</span> <a class="tag" taget="_blank" href="/search/%E5%8F%97%E4%BF%9D%E6%8A%A4%E8%B7%AF%E7%94%B1/1.htm">受保护路由</a><a class="tag" taget="_blank" href="/search/%E9%87%8D%E5%AE%9A%E5%90%91%E6%9C%BA%E5%88%B6/1.htm">重定向机制</a><a class="tag" taget="_blank" href="/search/Flux%E6%9E%B6%E6%9E%84/1.htm">Flux架构</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E5%90%91%E6%95%B0%E6%8D%AE%E6%B5%81/1.htm">单向数据流</a><a class="tag" taget="_blank" href="/search/Backbone%E6%A8%A1%E5%9E%8B/1.htm">Backbone模型</a> <div>背景简介React.js因其组件化和声明式的编程范式受到了前端开发者的广泛喜爱。然而，对于大型应用来说，仅仅依赖React.js是不够的，特别是在状态管理和数据流方面。本文将结合书籍内容，探讨如何在React应用中实现受保护路由和如何采用Flux架构简化应用的状态管理。受保护路由的实现与重定向机制在React应用中，受保护路由是一种常见的需求，它确保未经授权的用户无法访问需要认证的页面。例如，如果</div> </li> <li><a href="/article/1941425970774863872.htm" title="轻量级、无依赖、响应式粒子背景动画库——tsparticles、@tsparticles/engine、@tsparticles/react" target="_blank">轻量级、无依赖、响应式粒子背景动画库——tsparticles、@tsparticles/engine、@tsparticles/react</a> <span class="text-muted"></span> <div>项目简介tsparticles-demo是一个基于React和tsparticles的可视化粒子特效演示项目，旨在为开发者和设计师提供丰富、炫酷的粒子动画效果参考。项目支持多种粒子特效切换，界面美观，交互友好，适合用于网页背景、登录页、展示页等多种场景。无依赖项（*），浏览器直接可用，且兼容React.js、Vue.js（2.x和3.x）、Angular、Svelte、jQuery、Preact、</div> </li> <li><a href="/article/1940270870127767552.htm" title="前端 React.js 项目的性能优化的成功案例分析" target="_blank">前端 React.js 项目的性能优化的成功案例分析</a> <span class="text-muted">前端视界</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E8%89%BA%E5%8C%A0%E9%A6%86/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/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">性能优化</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a> <div>前端React.js项目的性能优化的成功案例分析关键词：React.js性能优化、代码拆分与懒加载、虚拟列表与长列表优化、Webpack深度调优、Fiber架构实践、SSR与SSG落地、React.memo与useCallback最佳实践摘要：本文通过三个真实企业级React项目的性能优化案例，系统解析从性能瓶颈诊断到优化策略落地的完整流程。结合React核心原理（如Fiber架构、虚拟DOMdi</div> </li> <li><a href="/article/1937971240853630976.htm" title="React.js前端开发中的性能优化的常见挑战与解决思路" target="_blank">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%E5%AE%9E%E6%88%98/1.htm">前端开发实战</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">性能优化</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>React.js前端开发中的性能优化的常见挑战与解决思路关键词：React性能优化、虚拟DOM、重新渲染、代码分割、内存管理摘要：本文深入探讨React应用开发中常见的性能瓶颈及其解决方案。从虚拟DOM原理到Fiber架构演进，从组件渲染机制到内存泄漏预防，通过算法解析、数学模型验证和实战案例，系统性地构建React应用性能优化知识体系。本文还将提供可落地的性能检测工具链和最佳实践方案。文章目录R</div> </li> <li><a href="/article/1933142080968781824.htm" title="前端 React.js 组件复用与封装技巧" target="_blank">前端 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%E5%AE%9E%E6%88%98/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/ai/1.htm">ai</a> <div>前端React.js组件复用与封装技巧关键词：React.js、组件复用、组件封装、前端开发、代码复用性摘要：本文围绕前端React.js组件复用与封装技巧展开深入探讨。在当今前端开发中，高效的组件复用和封装能够显著提升开发效率、降低维护成本。文章首先介绍了相关背景知识，包括目的、预期读者等；接着详细阐述核心概念，剖析组件复用与封装的原理和架构；然后讲解核心算法原理并给出Python示例；再介绍相</div> </li> <li><a href="/article/1932382965552181248.htm" title="前端React.js与GraphQL的集成应用" target="_blank">前端React.js与GraphQL的集成应用</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%E5%AE%9E%E6%88%98/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/graphql/1.htm">graphql</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a> <div>前端React.js与GraphQL的集成应用关键词：React.js、GraphQL、集成应用、前端开发、数据交互摘要：本文深入探讨了前端React.js与GraphQL的集成应用。首先介绍了相关背景知识，包括React.js和GraphQL的概念、目的和适用范围，以及预期读者和文档结构。接着详细阐述了核心概念，如React.js的组件化和GraphQL的查询语言特性，通过文本示意图和Merma</div> </li> <li><a href="/article/1931871509282877440.htm" title="新手如何选择前端框架？" target="_blank">新手如何选择前端框架？</a> <span class="text-muted">XI锐真的烦</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>下面是比较流行的前端框架Vue.js和React.js的全面横向对比，从多个维度帮你了解它们的异同与适用场景：框架概况对比维度Vue.jsReact.js初始发布2014年，由尤雨溪（EvanYou）开发2013年，由Meta（Facebook）开发当前版本Vue3.x（CompositionAPI支持）React18.x（支持concurrent模式）类型渐进式框架（可独立使用或组合）UI库（关</div> </li> <li><a href="/article/1931274044447977472.htm" title="前端jQuery与React.js的对比分析" target="_blank">前端jQuery与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%E5%AE%9E%E6%88%98/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/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a> <div>前端jQuery与React.js的对比分析关键词：前端开发、jQuery、React.js、对比分析、DOM操作、组件化摘要：本文旨在对前端开发中广泛使用的jQuery和React.js进行全面的对比分析。首先介绍jQuery和React.js的背景知识，包括它们的目的、适用读者群体等。接着深入探讨两者的核心概念、架构及联系，详细阐述核心算法原理和具体操作步骤，结合数学模型和公式进行说明。通过项</div> </li> <li><a href="/article/1931051159917752320.htm" title="前端必知！React.js 入门全攻略" target="_blank">前端必知！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%E5%AE%9E%E6%88%98/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/ai/1.htm">ai</a> <div>前端必知！React.js入门全攻略关键词：React.js、前端开发、组件化、虚拟DOM、状态管理、Hooks、JSX摘要：本文是一份全面的React.js入门指南，从基础概念到高级应用，系统性地介绍了React的核心原理和最佳实践。我们将深入探讨虚拟DOM、组件化开发、状态管理、Hooks等关键概念，并通过实际代码示例展示如何构建现代化的React应用。无论你是刚入门的前端开发者，还是希望系统</div> </li> <li><a href="/article/1930791953176260608.htm" title="React.js 与 Apollo Server：全栈 GraphQL" target="_blank">React.js 与 Apollo Server：全栈 GraphQL</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/graphql/1.htm">graphql</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a> <div>React.js与ApolloServer：全栈GraphQL关键词：React.js、ApolloServer、GraphQL、全栈开发、前端与后端交互摘要：本文将带领大家走进全栈GraphQL的世界，详细介绍React.js和ApolloServer的结合使用。从核心概念的解释到具体的算法原理、操作步骤，再到项目实战案例和实际应用场景，全方位剖析这一技术组合。让大家了解如何利用React.js</div> </li> <li><a href="/article/1930396358519353344.htm" title="React.js 与 Alpine.js 对比教程：现代前端开发的两大选择" target="_blank">React.js 与 Alpine.js 对比教程：现代前端开发的两大选择</a> <span class="text-muted">王小玗</span> <a class="tag" taget="_blank" href="/search/javscript/1.htm">javscript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</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><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>React.js与Alpine.js对比教程：现代前端开发的两大选择React.js和Alpine.js代表了现代前端开发的两种不同哲学和适用场景。本教程将全面介绍这两个框架的核心概念、使用方法和适用场景，帮助开发者根据项目需求做出明智选择。第一部分：React.js深度教程1.React.js简介与核心概念React.js是由Facebook开发并开源的JavaScript库，用于构建用户界面。</div> </li> <li><a href="/article/1929378322152747008.htm" title="《大模型项目实战》：从0到1，打造属于你的多领域智能AI Chat应用，非常详细收藏这一篇就够了！" target="_blank">《大模型项目实战》：从0到1，打造属于你的多领域智能AI Chat应用，非常详细收藏这一篇就够了！</a> <span class="text-muted">AGI大模型学习</span> <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%A8%A1%E5%9E%8B%E9%A1%B9%E7%9B%AE/1.htm">大模型项目</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%A8%A1%E5%9E%8B%E5%AE%9E%E6%88%98/1.htm">大模型实战</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%A8%A1%E5%9E%8B/1.htm">大模型</a><a class="tag" taget="_blank" href="/search/AI%E5%A4%A7%E6%A8%A1%E5%9E%8B/1.htm">AI大模型</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%A8%A1%E5%9E%8B%E5%AD%A6%E4%B9%A0/1.htm">大模型学习</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%A8%A1%E5%9E%8B%E5%85%A5%E9%97%A8/1.htm">大模型入门</a> <div>目标基于大语言模型的Chat应用，是一种利用自然语言处理技术来进行对话交互的智能应用。大语言模型通过大量数据的学习和训练，能够理解自然语言表达的语义，具备智能对话的能力。当用户向Chat应用提出问题时，Chat应用就会利用其学习到的知识和自然语言处理技术来理解用户的意图，然后推理生成相应的答案。我们的目标是使用React.js开发一个通用的Chat应用程序，提供对话Web界面，调用ChatGLM3</div> </li> <li><a href="/article/1929168142928506880.htm" title="前端React.js与CSS的完美结合" target="_blank">前端React.js与CSS的完美结合</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%E5%AE%9E%E6%88%98/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/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a> <div>前端React.js与CSS的完美结合关键词：React.js、CSS-in-JS、StyledComponents、CSSModules、组件化样式、性能优化、设计系统摘要：本文深入探讨React.js与现代CSS技术的结合方式，从传统的CSS方法到最前沿的CSS-in-JS解决方案。我们将分析各种样式方案的优缺点，展示如何构建可维护、高性能的React组件样式系统，并通过实际案例演示最佳实践。</div> </li> <li><a href="/article/1928523503217209344.htm" title="使用 React PDF 构建 React.js PDF 查看器的指南" target="_blank">使用 React PDF 构建 React.js PDF 查看器的指南</a> <span class="text-muted">ComPDFKit</span> <a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90PDF%E5%BA%93/1.htm">开源PDF库</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/pdf/1.htm">pdf</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>在本文中，我们将重点介绍在React.js中制作PDF查看器的最受欢迎的开源库。具体来说，我们将利用著名的开源库react-pdf的功能，指导您完成创建React.jsPDF查看器的过程。通过本教程，您将在第一部分学习如何使用React-PDF在React.js应用程序中实现功能齐全的PDF查看器。在第二部分中，我们将重点介绍如何集成ComPDF以提供更多PDF功能，从而进一步增强用户的文档处理体</div> </li> <li><a href="/article/1925492131963662336.htm" title="React.js 中组件可复用性设计不足的问题及解决方法" target="_blank">React.js 中组件可复用性设计不足的问题及解决方法</a> <span class="text-muted">JJCTO袁龙</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/%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中组件可复用性设计不足的问题及解决方法在React.js开发中，组件的可复用性是提高开发效率和代码质量的关键。然而，开发者有时可能会忽视组件的可复用性设计，导致代码重复、难以维护和扩展。本文将探讨这些问题的常见原因，并提供相应的解决方法。一、React.js中组件可复用性设计不足的常见问题（一）组件功能过于单一如果组件功能过于单一，可能会导致代码重复，难以复用。错误示例：const</div> </li> <li><a href="/article/1925492132466978816.htm" title="React.js 中错误使用 `ref` 转发的问题及解决方法" target="_blank">React.js 中错误使用 `ref` 转发的问题及解决方法</a> <span class="text-muted">JJCTO袁龙</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/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>React.js中错误使用ref转发的问题及解决方法在React.js开发中，ref是一个强大的工具，用于直接访问DOM元素或在组件之间共享数据。ref转发（React.forwardRef）允许你将一个ref通过组件传递给子组件。然而，开发者有时可能会错误地使用ref转发，导致无法正确访问目标元素或组件。本文将探讨这些问题的常见原因，并提供相应的解决方法。一、React.js中错误使用ref转发</div> </li> <li><a href="/article/1925125909543710720.htm" title="前端 React.js 性能优化的最佳时间点" target="_blank">前端 React.js 性能优化的最佳时间点</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/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">性能优化</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a> <div>前端React.js性能优化的最佳时间点关键词：前端开发、React.js、性能优化、最佳时间点、渲染性能摘要：本文聚焦于前端React.js性能优化的最佳时间点。首先介绍了在前端开发中React.js性能优化的重要性及背景信息，接着深入剖析了React.js性能优化所涉及的核心概念与联系，阐述了相关算法原理和操作步骤，并结合数学模型和公式进行说明。通过项目实战展示了代码案例及详细解释，探讨了Re</div> </li> <li><a href="/article/1920741499541188608.htm" title="React.js 中组件重复调用 `useEffect` 的问题及解决方法" target="_blank">React.js 中组件重复调用 `useEffect` 的问题及解决方法</a> <span class="text-muted">JJCTO袁龙</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/%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中组件重复调用useEffect的问题及解决方法在React.js开发中，useEffect是一个非常重要的Hook，用于处理组件的副作用（如数据获取、订阅或手动更改DOM等）。然而，开发者在使用useEffect时可能会不小心导致组件重复调用useEffect，从而引发性能问题或错误行为。本文将探讨这些问题的常见原因，并提供相应的解决方法。一、React.js中组件重复调用use</div> </li> <li><a href="/article/1914909748675801088.htm" title="掌握 React.js 前端开发的生命周期方法" target="_blank">掌握 React.js 前端开发的生命周期方法</a> <span class="text-muted">前端视界</span> <a class="tag" taget="_blank" href="/search/CS/1.htm">CS</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><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/ai/1.htm">ai</a> <div>掌握React.js前端开发的生命周期方法关键词：React.js、生命周期方法、前端开发、组件、挂载、更新、卸载摘要：本文深入探讨了React.js前端开发中的生命周期方法。首先介绍了学习React.js生命周期方法的背景信息，包括目的、预期读者等。接着详细阐述了核心概念，通过文本示意图和Mermaid流程图展示其原理和架构。然后对核心算法原理进行讲解，并给出Python源代码示例。同时，介绍了</div> </li> <li><a href="/article/1913157172250865664.htm" title="React 19马上来了，你准备好了吗？" target="_blank">React 19马上来了，你准备好了吗？</a> <span class="text-muted">Baoing_</span> <a class="tag" taget="_blank" href="/search/React.js/1.htm">React.js</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/%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>React19是React.js的一次重大更新，带来了许多令人激动的新特性和改进。在这篇文章中，我们将深入探讨这些新特性，并提供一些代码示例，以帮助您更好地理解它们。全新编译器功能其中React19核心功能之一是全新的React编译器，它引入了许多令人激动的新功能，使开发人员能够更轻松地编写和维护他们的代码。一、即时反馈在React19中，编译器引入了即时反馈功能，这意味着当您编辑代码时，您将立即</div> </li> <li><a href="/article/1908035824017010688.htm" title="在 .NET 8 中使用自定义令牌身份验证掌握 SignalR Hub 安全性" target="_blank">在 .NET 8 中使用自定义令牌身份验证掌握 SignalR Hub 安全性</a> <span class="text-muted">csdn_aspnet</span> <a class="tag" taget="_blank" href="/search/.Net8.0/1.htm">.Net8.0</a><a class="tag" taget="_blank" href="/search/.Net8/1.htm">.Net8</a><a class="tag" taget="_blank" href="/search/SignalR/1.htm">SignalR</a> <div>最近在练习做一个Web开发项目，需要使用WebSockets传输数据，实现实时通信。这是一个React.js项目，后端是.NET。虽然MSDN提供了出色的顶级文档，但它通常缺少高级用例所需的低级细节。一种这样的场景是使用自定义令牌对SignalRHub进行身份验证。是的，自定义令牌，而不是JWT或默认Bearer令牌。本文探讨如何实现这一点。最后，您将拥有一个需要身份验证并使用自定义令牌的Sign</div> </li> <li><a href="/article/1907297236769894400.htm" title="前端开发必备：HTML、CSS、JavaScript 基础与 Vue.js、React.js、Angular.js 等热门框架，还有 Uniapp 小程序实战攻略" target="_blank">前端开发必备：HTML、CSS、JavaScript 基础与 Vue.js、React.js、Angular.js 等热门框架，还有 Uniapp 小程序实战攻略</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/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</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> <div>在当今数字化时代，前端开发对于构建用户与数字产品交互界面起着至关重要的作用。一个美观、易用且性能良好的前端界面能够极大地提升用户体验，为产品的成功奠定坚实基础。一、前端开发的重要性随着互联网的不断发展，用户对数字产品的界面要求越来越高。前端开发不仅要实现美观的设计，还要保证良好的用户交互和高效的性能。无论是网页、移动应用还是桌面软件，前端开发都是用户与产品直接接触的部分，其重要性不言而喻。二、前端</div> </li> <li><a href="/article/1905561558444994560.htm" title="React.js 中不当使用生命周期方法的问题及解决方案" target="_blank">React.js 中不当使用生命周期方法的问题及解决方案</a> <span class="text-muted">JJCTO袁龙</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/%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中不当使用生命周期方法的问题及解决方案在React.js开发中，生命周期方法是组件从创建到销毁过程中各个阶段的钩子函数。正确使用这些方法对于优化性能、避免内存泄漏和确保组件行为正确至关重要。然而，开发者在使用生命周期方法时可能会遇到一些问题，导致应用出现异常或性能问题。本文将探讨这些问题的常见原因，并提供相应的解决方案。一、React.js生命周期方法的常见问题（一）使用废弃的生命</div> </li> <li><a href="/article/1902867511427264512.htm" title="从 0 到 1 搭建一个 Web 应用项目：详细步骤与踩坑记录" target="_blank">从 0 到 1 搭建一个 Web 应用项目：详细步骤与踩坑记录</a> <span class="text-muted">算法探索者</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>一、引言在当今数字化时代，Web应用无处不在。对于开发者而言，掌握从0到1搭建Web应用项目的技能至关重要。本指南将带你逐步完成一个简单Web应用项目的搭建，分享技术选型思路以及在过程中遇到的问题和解决方案，助力你开启Web开发之旅。二、技术选型（一）前端框架：选择React.js。它具有高效的虚拟DOM机制，能够快速更新页面，提升用户体验。同时，React生态系统丰富，有大量现成的组件库和工具可</div> </li> <li><a href="/article/1902659669063692288.htm" title="《React开发实践：掌握Redux与Hooks应用》——开启你的前端进阶之旅" target="_blank">《React开发实践：掌握Redux与Hooks应用》——开启你的前端进阶之旅</a> <span class="text-muted">JJCTO袁龙</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/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>文章标题《React开发实践：掌握Redux与Hooks应用》——开启你的前端进阶之旅在前端开发的浪潮中，React.js已经成为开发者们不可或缺的利器。它以其高效、灵活的特性，成为构建现代Web应用的首选框架之一。然而，随着项目复杂度的增加，如何更好地管理状态、优化性能、提升代码可维护性，成为每个开发者必须面对的挑战。幸运的是，我最近出版的《React开发实践：掌握Redux与Hooks应用》这</div> </li> <li><a href="/article/1900302462774996992.htm" title="Python, Springboot 开发基于人类指令生成机器人3D可视化动态模型app" target="_blank">Python, Springboot 开发基于人类指令生成机器人3D可视化动态模型app</a> <span class="text-muted">Geeker-2025</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a> <div>开发一个基于人类指令生成机器人3D可视化动态模型的APP是一个复杂且多层次的项目，涉及前端和后端的多个技术栈。以下是一个高层次的设计概述，涵盖主要的技术栈和功能模块，并提供使用Python和SpringBoot进行联合开发的示例。##技术栈概述###前端-**框架**：React.js或Vue.js（用于构建用户界面）-**3D可视化**：Three.js或React-Three-Fiber（用于</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>