React的受控组件用法详解！

一、受控组件是什么？

用state来获取和设置输入元素值的组件，称之为受控组件。, </code> 和 <code><select></code> 等标签都可用 <code>value</code> 属性，来实现受控组件。</p> <hr> <h4>二、有哪些受控组件？</h4> <h5>1、input</h5> <h6>- 阻止表单提交</h6> <pre><code class="js">class NameForm extends React.Component { constructor(props) { super(props); this.state = { value: '' }; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(event) { this.setState({ value: event.target.value }); } handleSubmit(event) { alert('提交的名字: ' + this.state.value); event.preventDefault(); } render() { return ( <form onSubmit={this.handleSubmit}> <label> 名字: <input type="text" value={this.state.value} onChange={this.handleChange} /> </label> <input type="submit" value="提交" /> </form> ); } }</code></pre> <h6>- file类型input</h6> <pre><code class="js">// file类型的input，属性value是只读的，所以是非受控组件 <input type="file" /></code></pre> <h6>- 多个input</h6> <pre><code class="js">// 多个input时，设置下name属性，即可动态操作，无需硬编码 class Reservation extends React.Component { constructor(props) { super(props); this.state = { isGoing: true, numberOfGuests: 2 }; this.handleInputChange = this.handleInputChange.bind(this); } handleInputChange(event) { const target = event.target; const value = target.type === 'checkbox' ? target.checked : target.value; const name = target.name; this.setState({ [name]: value }); } render() { return ( <form> <label> 参与: <input name="isGoing" type="checkbox" checked={this.state.isGoing} onChange={this.handleInputChange} /> </label> <br /> <label> 来宾人数: <input name="numberOfGuests" type="number" value={this.state.numberOfGuests} onChange={this.handleInputChange} /> </label> </form> ); } }</code></pre> <hr> <h5>2、textarea</h5> <p>用value属性来设置textarea的文本内容：</p> <pre><code class="jsx">class EssayForm extends React.Component { constructor(props) { super(props); this.state = { value: '请撰写一篇关于你喜欢的 DOM 元素的文章.' }; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(event) { this.setState({ value: event.target.value }); } handleSubmit(event) { alert('提交的文章: ' + this.state.value); event.preventDefault(); } render() { return ( <form onSubmit={this.handleSubmit}> <label> 文章: <textarea value={this.state.value} onChange={this.handleChange} /> </label> <input type="submit" value="提交" /> </form> ); } }</code></pre> <hr> <h5>3、select</h5> <p>传统HTML中，用 <code>selected</code> 来设置选中项，而在React中使用 <code>value</code> 属性：</p> <pre><code class="js">// HTML中使用selected属性 < select > <option value="grapefruit">葡萄柚</option> <option value="lime">酸橙</option> <option selected value="coconut">椰子</option> <option value="mango">芒果</option> </select ></code></pre> <pre><code class="js">// React中使用value属性 class FlavorForm extends React.Component { constructor(props) { super(props); this.state = { value: 'coconut' }; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(event) { this.setState({ value: event.target.value }); } handleSubmit(event) { alert('你喜欢的风味是: ' + this.state.value); event.preventDefault(); } render() { return ( <form onSubmit={this.handleSubmit}> <label> 选择你喜欢的风味: <select value={this.state.value} onChange={this.handleChange}> <option value="grapefruit">葡萄柚</option> <option value="lime">酸橙</option> <option value="coconut">椰子</option> <option value="mango">芒果</option> </select> </label> <input type="submit" value="提交" /> </form> ); } }</code></pre> <pre><code class="js">// 传递数组给value属性，表示select标签，选中多个选项 <select multiple={true} value={['B', 'C']}></code></pre> <hr> <h5>参考文档</h5> <ul> <li><a href="https://link.segmentfault.com/?enc=Le1cSChedYMFJ42YokIDEg%3D%3D.Dyu3RwjwhIVr9P%2FFGUeKc1f6m1LLyfK5R3rhqb9790mCOX60PqeUe6WguEw54G84" rel="nofollow">React的受控组件用法详解！</a></li> </ul> </article> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1464477532710612992"></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"> <!-- 文章页-右侧1 动态广告位 --> <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> <!-- 文章页-右侧2 动态广告位 --> <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> <!-- 文章页-右侧3 动态广告位 --> <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/1946627074647191552.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%A4%A7%E6%95%B0%E6%8D%AE%E4%B8%8EAI%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">前端大数据与AI人工智能</a><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%E6%A1%86%E6%9E%B6/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性能优化、虚拟DOM、渲染优化、组件设计、代码分割、状态管理、性能分析工具摘要：本文深入探讨React.js应用开发中常见的性能优化误区，分析其背后的原理和影响，并提供切实可行的解决方案。文章将从React核心机制入手，剖析虚拟DOM工作原理，揭示不当优化策略可能带来的反效果，并给出基于最佳实践的优化方案。通过实际代码示例、性能对</div> </li> <li><a href="/article/1946470482282868736.htm" title="前端学习笔记：React.js中state和props的区别和联系" target="_blank">前端学习笔记：React.js中state和props的区别和联系</a> <span class="text-muted"></span> <div>文章目录1.`props`（属性）定义用途示例2.`state`（状态）定义用途示例3.核心区别4.常见使用场景props的场景state的场景5.交互模式父组件修改子组件状态子组件通知父组件6.最佳实践总结在React.js中，state和props是两个核心概念，用于管理组件的数据和数据流。它们的设计目的不同，但共同构成了React组件的状态管理系统。1.props（属性）定义外部传入的数据：</div> </li> <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/13.htm" title="github中多个平台共存" target="_blank">github中多个平台共存</a> <span class="text-muted">jackyrong</span> <a class="tag" taget="_blank" href="/search/github/1.htm">github</a> <div>在个人电脑上，如何分别链接比如oschina,github等库呢，一般教程之列的，默认 ssh链接一个托管的而已，下面讲解如何放两个文件 1） 设置用户名和邮件地址 $ git config --global user.name "xx" $ git config --global user.email "test@gmail.com"</div> </li> <li><a href="/article/140.htm" title="ip地址与整数的相互转换(javascript)" target="_blank">ip地址与整数的相互转换(javascript)</a> <span class="text-muted">alxw4616</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a> <div>//IP转成整型 function ip2int(ip){ var num = 0; ip = ip.split("."); num = Number(ip[0]) * 256 * 256 * 256 + Number(ip[1]) * 256 * 256 + Number(ip[2]) * 256 + Number(ip[3]); n</div> </li> <li><a href="/article/267.htm" title="读书笔记-jquey+数据库+css" target="_blank">读书笔记-jquey+数据库+css</a> <span class="text-muted">chengxuyuancsdn</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a> <div>1、grouping ,group by rollup, GROUP BY GROUPING SETS区别 2、$("#totalTable tbody>tr td:nth-child(" + i + ")").css({"width":tdWidth, "margin":"0px", &q</div> </li> <li><a href="/article/394.htm" title="javaSE javaEE javaME == API下载" target="_blank">javaSE javaEE javaME == API下载</a> <span class="text-muted">Array_06</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>oracle下载各种API文档： http://www.oracle.com/technetwork/java/embedded/javame/embed-me/documentation/javame-embedded-apis-2181154.html JavaSE文档： http://docs.oracle.com/javase/8/docs/api/ JavaEE文档： ht</div> </li> <li><a href="/article/521.htm" title="shiro入门学习" target="_blank">shiro入门学习</a> <span class="text-muted">cugfy</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a> <div>声明本文只适合初学者，本人也是刚接触而已，经过一段时间的研究小有收获，特来分享下希望和大家互相交流学习。 首先配置我们的web.xml代码如下，固定格式，记死就成 <filter>         <filter-name>shiroFilter</filter-name> &nbs</div> </li> <li><a href="/article/648.htm" title="Array添加删除方法" target="_blank">Array添加删除方法</a> <span class="text-muted">357029540</span> <a class="tag" taget="_blank" href="/search/js/1.htm">js</a> <div>     刚才做项目前台删除数组的固定下标值时，删除得不是很完整，所以在网上查了下，发现一个不错的方法，也提供给需要的同学。 //给数组添加删除             Array.prototype.del = function(n){ </div> </li> <li><a href="/article/775.htm" title="navigation bar 更改颜色" target="_blank">navigation bar 更改颜色</a> <span class="text-muted">张亚雄</span> <a class="tag" taget="_blank" href="/search/IO/1.htm">IO</a> <div>今天郁闷了一下午，就因为objective-c默认语言是英文，我写的中文全是一些乱七八糟的样子，到不是乱码，但是，前两个自字是粗体，后两个字正常体，这可郁闷死我了，问了问大牛，人家告诉我说更改一下字体就好啦，比如改成黑体，哇塞，茅塞顿开。       翻书看，发现，书上有介绍怎么更改表格中文字字体的，代码如下    </div> </li> <li><a href="/article/902.htm" title="unicode转换成中文" target="_blank">unicode转换成中文</a> <span class="text-muted">adminjun</span> <a class="tag" taget="_blank" href="/search/unicode/1.htm">unicode</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A0%81%E8%BD%AC%E6%8D%A2/1.htm">编码转换</a> <div>  在Java程序中总会出现\u6b22\u8fce\u63d0\u4ea4\u5fae\u535a\u641c\u7d22\u4f7f\u7528\u53cd\u9988\uff0c\u8bf7\u76f4\u63a5这个的字符，这是unicode编码，使用时有时候不会自动转换成中文就需要自己转换了使用下面的方法转换一下即可。 /** * unicode 转换成 中文 </div> </li> <li><a href="/article/1029.htm" title="一站式 Java Web 框架 firefly" target="_blank">一站式 Java Web 框架 firefly</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/Java+Web/1.htm">Java Web</a> <div>Firefly是一个高性能一站式Web框架。 涵盖了web开发的主要技术栈。 包含Template engine、IOC、MVC framework、HTTP Server、Common tools、Log、Json parser等模块。 firefly-2.0_07修复了模版压缩对javascript单行注释的影响，并新增了自定义错误页面功能。 更新日志： 增加自定义系统错误页面功能</div> </li> <li><a href="/article/1156.htm" title="设计模式——单例模式" target="_blank">设计模式——单例模式</a> <span class="text-muted">ayaoxinchao</span> <a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a> <div>定义          Java中单例模式定义：“一个类有且仅有一个实例，并且自行实例化向整个系统提供。”   分析          从定义中可以看出单例的要点有三个：一是某个类只能有一个实例；二是必须自行创建这个实例；三是必须自行向系统提供这个实例。   &nb</div> </li> <li><a href="/article/1283.htm" title="Javascript 多浏览器兼容性问题及解决方案" target="_blank">Javascript 多浏览器兼容性问题及解决方案</a> <span class="text-muted">BigBird2012</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a> <div>不论是网站应用还是学习js,大家很注重ie与firefox等浏览器的兼容性问题，毕竟这两中浏览器是占了绝大多数。 一、document.formName.item(”itemName”) 问题 问题说明：IE下，可以使用 document.formName.item(”itemName”) 或 document.formName.elements ["elementName&quo</div> </li> <li><a href="/article/1410.htm" title="JUnit-4.11使用报java.lang.NoClassDefFoundError: org/hamcrest/SelfDescribing错误" target="_blank">JUnit-4.11使用报java.lang.NoClassDefFoundError: org/hamcrest/SelfDescribing错误</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/junit4.11/1.htm">junit4.11</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/1.htm">单元测试</a> <div>        下载了最新的JUnit版本，是4.11，结果尝试使用发现总是报java.lang.NoClassDefFoundError: org/hamcrest/SelfDescribing这样的错误，上网查了一下，一般的解决方案是，换一个低一点的版本就好了。还有人说，是缺少hamcrest的包。去官网看了一下，如下发现：    </div> </li> <li><a href="/article/1537.htm" title="[Zookeeper学习笔记之二]Zookeeper部署脚本" target="_blank">[Zookeeper学习笔记之二]Zookeeper部署脚本</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/zookeeper/1.htm">zookeeper</a> <div>Zookeeper伪分布式安装脚本(此脚本在一台机器上创建Zookeeper三个进程，即创建具有三个节点的Zookeeper集群。这个脚本和zookeeper的tar包放在同一个目录下，脚本中指定的名字是zookeeper的3.4.6版本，需要根据实际情况修改)：   #!/bin/bash #!!!Change the name!!! #The zookeepe</div> </li> <li><a href="/article/1664.htm" title="【Spark八十】Spark RDD API二" target="_blank">【Spark八十】Spark RDD API二</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/spark/1.htm">spark</a> <div>coGroup package spark.examples.rddapi import org.apache.spark.{SparkConf, SparkContext} import org.apache.spark.SparkContext._ object CoGroupTest_05 { def main(args: Array[String]) { v</div> </li> <li><a href="/article/1791.htm" title="Linux中编译apache服务器modules文件夹缺少模块(.so)的问题" target="_blank">Linux中编译apache服务器modules文件夹缺少模块(.so)的问题</a> <span class="text-muted">ronin47</span> <a class="tag" taget="_blank" href="/search/modules/1.htm">modules</a> <div>在modules目录中只有httpd.exp，那些so文件呢？ 我尝试在fedora core 3中安装apache 2. 当我解压了apache 2.0.54后使用configure工具并且加入了 --enable-so 或者 --enable-modules=so (两个我都试过了) 去make并且make install了。我希望在/apache2/modules/目录里有各种模块，</div> </li> <li><a href="/article/1918.htm" title="Java基础-克隆" target="_blank">Java基础-克隆</a> <span class="text-muted">BrokenDreams</span> <a class="tag" taget="_blank" href="/search/java%E5%9F%BA%E7%A1%80/1.htm">java基础</a> <div>        Java中怎么拷贝一个对象呢？可以通过调用这个对象类型的构造器构造一个新对象，然后将要拷贝对象的属性设置到新对象里面。Java中也有另一种不通过构造器来拷贝对象的方式，这种方式称为 克隆。         Java提供了java.lang.</div> </li> <li><a href="/article/2045.htm" title="读《研磨设计模式》-代码笔记-适配器模式-Adapter" target="_blank">读《研磨设计模式》-代码笔记-适配器模式-Adapter</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a> <div>声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ package design.pattern; /* * 适配器模式解决的主要问题是，现有的方法接口与客户要求的方法接口不一致 * 可以这样想，我们要写这样一个类（Adapter）: * 1.这个类要符合客户的要求 ---> 那显然要</div> </li> <li><a href="/article/2172.htm" title="HDR图像PS教程集锦&心得" target="_blank">HDR图像PS教程集锦&心得</a> <span class="text-muted">cherishLC</span> <a class="tag" taget="_blank" href="/search/PS/1.htm">PS</a> <div>HDR是指高动态范围的图像，主要原理为提高图像的局部对比度。 软件有photomatix和nik hdr efex。 一、教程 叶明在知乎上的回答： http://www.zhihu.com/question/27418267/answer/37317792 大意是修完后直方图最好是等值直方图，方法是HDR软件调一遍，再结合不透明度和蒙版细调。 二、心得 1、去除阴影部分的</div> </li> <li><a href="/article/2299.htm" title="maven-3.3.3 mvn archetype 列表" target="_blank">maven-3.3.3 mvn archetype 列表</a> <span class="text-muted">crabdave</span> <a class="tag" taget="_blank" href="/search/ArcheType/1.htm">ArcheType</a> <div>maven-3.3.3 mvn archetype 列表 可以参考最新的：http://repo1.maven.org/maven2/archetype-catalog.xml   [INFO] Scanning for projects... [INFO]                 </div> </li> <li><a href="/article/2426.htm" title="linux shell 中文件编码查看及转换方法" target="_blank">linux shell 中文件编码查看及转换方法</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/shell/1.htm">shell</a><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E6%96%87%E4%B9%B1%E7%A0%81/1.htm">中文乱码</a><a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a><a class="tag" taget="_blank" href="/search/%E6%96%87%E4%BB%B6%E7%BC%96%E7%A0%81/1.htm">文件编码</a> <div>一、查看文件编码。     在打开文件的时候输入:set fileencoding     即可显示文件编码格式。 二、文件编码转换     1、在Vim中直接进行转换文件编码,比如将一个文件转换成utf-8格式       &</div> </li> <li><a href="/article/2553.htm" title="MySQL--binlog日志恢复数据" target="_blank">MySQL--binlog日志恢复数据</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/binlog/1.htm">binlog</a> <div> 恢复数据的重要命令如下 mysql> flush logs; 默认的日志是mysql-bin.000001，现在刷新了重新开启一个就多了一个mysql-bin.000002                  </div> </li> <li><a href="/article/2680.htm" title="数据库中数据表数据迁移方法" target="_blank">数据库中数据表数据迁移方法</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a> <div>刚开始想想好像挺麻烦的，后来找到一种方法了，就SQL中的 INSERT 语句，不过内容是现从另外的表中查出来的，其实就是 MySQL中INSERT INTO SELECT的使用   下面看看如何使用   语法：MySQL中INSERT INTO SELECT的使用 1. 语法介绍       有三张表a、b、c，现在需要从表b</div> </li> <li><a href="/article/2807.htm" title="Java反转字符串" target="_blank">Java反转字符串</a> <span class="text-muted">dyy_gusi</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%8F%8D%E8%BD%AC%E5%AD%97%E7%AC%A6%E4%B8%B2/1.htm">反转字符串</a> <div>       前几天看见一篇文章，说使用Java能用几种方式反转一个字符串。首先要明白什么叫反转字符串，就是将一个字符串到过来啦，比如"倒过来念的是小狗"反转过来就是”狗小是的念来过倒“。接下来就把自己能想到的所有方式记录下来了。 1、第一个念头就是直接使用String类的反转方法，对不起，这样是不行的，因为Stri</div> </li> <li><a href="/article/2934.htm" title="UI设计中我们为什么需要设计动效" target="_blank">UI设计中我们为什么需要设计动效</a> <span class="text-muted">gcq511120594</span> <a class="tag" taget="_blank" href="/search/UI/1.htm">UI</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>随着国际大品牌苹果和谷歌的引领，最近越来越多的国内公司开始关注动效设计了，越来越多的团队已经意识到动效在产品用户体验中的重要性了，更多的UI设计师们也开始投身动效设计领域。 但是说到底，我们到底为什么需要动效设计？或者说我们到底需要什么样的动效？做动效设计也有段时间了，于是尝试用一些案例，从产品本身出发来说说我所思考的动效设计。 一、加强体验舒适度 嗯，就是让用户更加爽更加爽的用</div> </li> <li><a href="/article/3061.htm" title="JBOSS服务部署端口冲突问题" target="_blank">JBOSS服务部署端口冲突问题</a> <span class="text-muted">HogwartsRow</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</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><a class="tag" taget="_blank" href="/search/jboss/1.htm">jboss</a><a class="tag" taget="_blank" href="/search/server/1.htm">server</a><a class="tag" taget="_blank" href="/search/EJB3/1.htm">EJB3</a> <div>服务端口冲突问题的解决方法，一般修改如下三个文件中的部分端口就可以了。   1、jboss5/server/default/conf/bindingservice.beans/META-INF/bindings-jboss-beans.xml   2、./server/default/deploy/jbossweb.sar/server.xml   3、.</div> </li> <li><a href="/article/3188.htm" title="第三章 Redis/SSDB+Twemproxy安装与使用" target="_blank">第三章 Redis/SSDB+Twemproxy安装与使用</a> <span class="text-muted">jinnianshilongnian</span> <a class="tag" taget="_blank" href="/search/ssdb/1.htm">ssdb</a><a class="tag" taget="_blank" href="/search/reids/1.htm">reids</a><a class="tag" taget="_blank" href="/search/twemproxy/1.htm">twemproxy</a> <div>目前对于互联网公司不使用Redis的很少，Redis不仅仅可以作为key-value缓存，而且提供了丰富的数据结果如set、list、map等，可以实现很多复杂的功能；但是Redis本身主要用作内存缓存，不适合做持久化存储，因此目前有如SSDB、ARDB等，还有如京东的JIMDB，它们都支持Redis协议，可以支持Redis客户端直接访问；而这些持久化存储大多数使用了如LevelDB、RocksD</div> </li> <li><a href="/article/3315.htm" title="ZooKeeper原理及使用 " target="_blank">ZooKeeper原理及使用 </a> <span class="text-muted">liyonghui160com</span> <div>           ZooKeeper是Hadoop Ecosystem中非常重要的组件，它的主要功能是为分布式系统提供一致性协调(Coordination)服务，与之对应的Google的类似服务叫Chubby。今天这篇文章分为三个部分来介绍ZooKeeper，第一部分介绍ZooKeeper的基本原理，第二部分介绍ZooKeeper</div> </li> <li><a href="/article/3442.htm" title="程序员解决问题的60个策略" target="_blank">程序员解决问题的60个策略</a> <span class="text-muted">pda158</span> <a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a><a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/1.htm">单元测试</a> <div>根本的指导方针 1. 首先写代码的时候最好不要有缺陷。最好的修复方法就是让 bug 胎死腹中。 良好的单元测试 强制数据库约束 使用输入验证框架 避免未实现的“else”条件 在应用到主程序之前知道如何在孤立的情况下使用   日志 2. print 语句。往往额外输出个一两行将有助于隔离问题。 3. 切换至详细的日志记录。详细的日</div> </li> <li><a href="/article/3569.htm" title="Create the Google Play Account" target="_blank">Create the Google Play Account</a> <span class="text-muted">sillycat</span> <a class="tag" taget="_blank" href="/search/Google/1.htm">Google</a> <div>Create the Google Play Account Having a Google account, pay 25$, then you get your google developer account. References: http://developer.android.com/distribute/googleplay/start.html https://p</div> </li> <li><a href="/article/3696.htm" title="JSP三大指令" target="_blank">JSP三大指令</a> <span class="text-muted">vikingwei</span> <a class="tag" taget="_blank" href="/search/jsp/1.htm">jsp</a> <div>JSP三大指令   一个jsp页面中，可以有0~N个指令的定义！ 1. page --> 最复杂：<%@page language="java" info="xxx"...%>   * pageEncoding和contentType：     > pageEncoding：它</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. <!-- <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>--> </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>