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>  <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">  <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/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.  </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>