React从入门到精通系列之(9)表单处理

九、表单处理

HTML表单元素与React中的其他DOM元素有点不同，因为表单元素自然地保留一些内部状态。例如，这种采用纯HTML格式的表单接受单个name：


    
        Name:

此表单具有在用户提交表单时浏览到新页面的默认HTML表单行为。
如果你想在React中这个行为，它是可以工作的。但在大多数情况下，使用JavaScript函数处理表单的提交并访问用户在表单中输入的数据很方便。实现这一点的标准方法是使用称为“可控组件”的技术。

可控组件

在HTML中，诸如，</code>和<code><select></code>的表单元素通常保持它们自己的状态并且是基于用户输入来更新它的。在React中，可变state通常保存在组件的state属性中，并且仅使用<code>setState()</code>更新。</p> <p>我们可以通过使React state是<code>“真理的唯一来源”</code>来结合这两者。后续用户在该表单进行输入时依然受React组件控制。其值由React以这种方式控制的可输入表单元素被称为<code>“可控组件”</code>。</p> <p>例如，如果我们想让前面的示例日志在提交时记录下名称，我们可以将表单作为<code>可控组件</code>：</p> <pre><code class="javascript">import React from 'react'; import ReactDOM from 'react-dom'; class NameForm extends React.Component { constructor(props) { super(props); this.state = {value: ''}; this.change = this.change.bind(this); this.submit = this.submit.bind(this); } change(e) { this.setState({value: e.target.value}); } submit(e) { e.preventDefault(); console.log('A name was submitted: ', this.state.value); } render() { return ( <form onSubmit={this.submit} > <label> Name: <input type="text" value={this.state.value} onChange={this.change} /> </label> <input type="submit" value="Submit" /> </form> ) }; } ReactDOM.render( <NameForm/>, document.getElementById('root') );</code></pre> <p>因为<code>value</code>属性是在<code>form</code>元素上设置的，所以显示的值将总是为<code>this.state.value</code>，让React <code>state</code>成其<code>value</code>的为真正来源。由于<code>change</code>在每次击键时运行并更新React <code>state</code>，因此显示的值将随用户键入而更新。</p> <p>使用<code>受控组件</code>，使得直接修改或验证用户输入的时候，每个<code>state</code>变量都将具有关联的处理函数。例如，如果我们想强制执行<code>name全部用大写字母写</code>，我们可以写change为：</p> <pre><code class="javascript">change(e) { this.setState({value: e.target.value.toUpperCase()}); }</code></pre> <h3>textarea标签</h3> <p>在HTML中，<code><textarea></code>元素的子元素就是它的文本内容：</p> <pre><code class="javascript"><textarea> Hello there, my name is zhangyatao!

在React中，</code>改为使用<code>value</code>属性。这样，使用<code><textarea></code>的表单可以非常类似于使用单行输入的表单：</p> <pre><code class="javascript">class EssayForm extends React.Component { constructor(props) { super(props); this.state = {value: '请填写一个你喜欢的dom元素'}; this.change = this.change.bind(this); this.submit = this.submit.bind(this); } change(e) { this.setState({value: e.target.value}); } submit(e) { e.preventDefault(); console.log('有东西被提交了：', this.state.value); } render() { return ( <form onSubmit={this.submit}> <label> Name: <textarea value={this.state.value} onChange={this.change} /> </label> <input type="submit" value="Submit" /> </form> ); } }</code></pre> <p>请注意，<code>this.state.value</code>在构造函数中初始化，因此<code>textarea</code>默认显示其中的文本。</p> <h3>select标签</h3> <p>在HTML中，<code><select></code>创建一个下拉列表。例如，此HTML创建一个下拉列表：</p> <pre><code class="html"><select> <option value="fruit">fruit</option> <option value="lime">lime</option> <option selected value="coconut">coconut</option> <option value="mango">mango</option> </select></code></pre> <p>请注意，由于<code>selected</code>属性<code>coconut</code>选项默认被选中的。<br> 在React中在一般是在根<code>select</code>标签上使用<code>value</code>属性而不是使用<code>selected</code>属性。这在受控组件中很方便，因为您只需要在一个地方更新它。例如：</p> <pre><code class="javascript">import React from 'react'; import ReactDOM from 'react-dom'; class FlavorForm extends React.Component { constructor(props) { super(props); this.state = {value: 'coconut'}; this.change = this.change.bind(this); this.submit = this.submit.bind(this); } change(e) { this.setState({value: e.target.value}); } submit(e) { e.preventDefault(); console.log('你喜欢的是：', this.state.value); } render() { return ( <form onSubmit={this.submit}> <label> 请选择一个你喜欢的水果 <select value={this.state.value} onChange={this.change}> <option value="fruit">fruit</option> <option value="lime">lime</option> <option value="coconut">coconut</option> <option value="mango">mango</option> </select> </label> <input type="submit" value="submit"/> </form> ); } } ReactDOM.render( <FlavorForm/>, document.getElementById('root') );</code></pre> <p>总的来说，这使得<code><input type =“text”></code>，<code><textarea></code>和<code><select></code>都非常类似 - 它们都接受一个<code>value</code>属性，您可以使用它来实现<code>可控组件</code>。</p> <h3>可控组件的备选方案</h3> <p>使用受控组件有时可能很乏味，因为您每次都需要为数据更改去编写事件处理程序，并通过React组件管理所有输入状态。 <br>当您将已经存在的项目转换为React或将React应用程序与非React库集成时，这可能会变得特别烦人。<br>在这些情况下，您可能想要选择那些<code>不可控组件</code>(后续会有详细讲解)，一种用于实现输入表单的替代技术。</p> </div> </div> </div> </div>  <div id="SOHUCS" sid="1176975754357977088"></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/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/41.htm" title="html页面js获取参数值" target="_blank">html页面js获取参数值</a> <span class="text-muted">0624chenhong</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>1.js获取参数值js function GetQueryString(name) { var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); var r = windo</div> </li> <li><a href="/article/168.htm" title="MongoDB 在多线程高并发下的问题" target="_blank">MongoDB 在多线程高并发下的问题</a> <span class="text-muted">BigCat2013</span> <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a><a class="tag" taget="_blank" href="/search/DB/1.htm">DB</a><a class="tag" taget="_blank" href="/search/%E9%AB%98%E5%B9%B6%E5%8F%91/1.htm">高并发</a><a class="tag" taget="_blank" href="/search/%E9%87%8D%E5%A4%8D%E6%95%B0%E6%8D%AE/1.htm">重复数据</a> <div>最近项目用到 MongoDB , 主要是一些读取数据及改状态位的操作. 因为是结合了最近流行的 Storm进行大数据的分析处理，并将分析结果插入Vertica数据库，所以在多线程高并发的情境下, 会发现 Vertica 数据库中有部分重复的数据. 这到底是什么原因导致的呢？笔者开始也是一筹莫展，重复去看 MongoDB 的 API , 终于有了新发现： com.mongodb.DB 这个类有</div> </li> <li><a href="/article/295.htm" title="c++ 用类模版实现链表(c++语言程序设计第四版示例代码)" target="_blank">c++ 用类模版实现链表(c++语言程序设计第四版示例代码)</a> <span class="text-muted">CrazyMizzz</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a> <div>#include<iostream> #include<cassert> using namespace std; template<class T> class Node { private: Node<T> * next; public: T data; </div> </li> <li><a href="/article/422.htm" title="最近情况" target="_blank">最近情况</a> <span class="text-muted">麦田的设计者</span> <a class="tag" taget="_blank" href="/search/%E6%84%9F%E6%85%A8/1.htm">感慨</a><a class="tag" taget="_blank" href="/search/%E8%80%83%E8%AF%95/1.htm">考试</a><a class="tag" taget="_blank" href="/search/%E7%94%9F%E6%B4%BB/1.htm">生活</a> <div> 在五月黄梅天的岁月里，一年两次的软考又要开始了。到目前为止，我已经考了多达三次的软考，最后的结果就是通过了初级考试（程序员）。人啊，就是不满足，考了初级就希望考中级，于是，这学期我就报考了中级，明天就要考试。感觉机会不大，期待奇迹发生吧。这个学期忙于练车，写项目，反正最后是一团糟。后天还要考试科目二。这个星期真的是很艰难的一周，希望能快点度过。 </div> </li> <li><a href="/article/549.htm" title="linux系统中用pkill踢出在线登录用户" target="_blank">linux系统中用pkill踢出在线登录用户</a> <span class="text-muted">被触发</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>由于linux服务器允许多用户登录，公司很多人知道密码，工作造成一定的障碍所以需要有时踢出指定的用户 1/#who 查出当前有那些终端登录（用 w 命令更详细） # who root pts/0 2010-10-28 09:36 (192</div> </li> <li><a href="/article/676.htm" title="仿QQ聊天第二版" target="_blank">仿QQ聊天第二版</a> <span class="text-muted">肆无忌惮_</span> <a class="tag" taget="_blank" href="/search/qq/1.htm">qq</a> <div>在第一版之上的改进内容: 第一版链接: http://479001499.iteye.com/admin/blogs/2100893 用map存起来号码对应的聊天窗口对象,解决私聊的时候所有消息发到一个窗口的问题. 增加ViewInfo类,这个是信息预览的窗口,如果是自己的信息,则可以进行编辑. 信息修改后上传至服务器再告诉所有用户,自己的窗口</div> </li> <li><a href="/article/803.htm" title="java读取配置文件" target="_blank">java读取配置文件</a> <span class="text-muted">知了ing</span> <div>1，java读取.properties配置文件 InputStream in; try { in = test.class.getClassLoader().getResourceAsStream("config/ipnetOracle.properties");//配置文件的路径 Properties p = new Properties()</div> </li> <li><a href="/article/930.htm" title="__attribute__ 你知多少？" target="_blank">__attribute__ 你知多少？</a> <span class="text-muted">矮蛋蛋</span> <a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a><a class="tag" taget="_blank" href="/search/gcc/1.htm">gcc</a> <div>原文地址: http://www.cnblogs.com/astwish/p/3460618.html GNU C 的一大特色就是__attribute__ 机制。__attribute__ 可以设置函数属性（Function Attribute ）、变量属性（Variable Attribute ）和类型属性（Type Attribute ）。 __attribute__ 书写特征是：</div> </li> <li><a href="/article/1057.htm" title="jsoup使用笔记" target="_blank">jsoup使用笔记</a> <span class="text-muted">alleni123</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/JSoup/1.htm">JSoup</a> <div><dependency> <groupId>org.jsoup</groupId> <artifactId>jsoup</artifactId> <version>1.7.3</version> </dependency> 2014/08/28 今天遇到这种形式， </div> </li> <li><a href="/article/1184.htm" title="JAVA中的集合 Collectio 和Map的简单使用及方法" target="_blank">JAVA中的集合 Collectio 和Map的简单使用及方法</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/list/1.htm">list</a><a class="tag" taget="_blank" href="/search/map/1.htm">map</a><a class="tag" taget="_blank" href="/search/set/1.htm">set</a> <div> List ,set ,map的使用方法和区别 java容器类类库的用途是保存对象，并将其分为两个概念： Collection集合：一个独立的序列，这些序列都服从一条或多条规则;List必须按顺序保存元素，set不能重复元素；Queue按照排队规则来确定对象产生的顺序（通常与他们被插入的</div> </li> <li><a href="/article/1311.htm" title="杀LINUX的JOB进程" target="_blank">杀LINUX的JOB进程</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/unix/1.htm">unix</a> <div>今天发现数据库一个JOB一直在执行，都执行了好几个小时还在执行，所以想办法给删除掉系统环境： ORACLE 10G Linux操作系统操作步骤如下：第一步.查询出来那个job在运行，找个对应的SID字段 select * from dba_jobs_running--找到job对应的sid &n</div> </li> <li><a href="/article/1438.htm" title="Spring AOP详解" target="_blank">Spring AOP详解</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/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/AOP/1.htm">AOP</a> <div> 最近项目中遇到了以下几点需求，仔细思考之后，觉得采用AOP来解决。一方面是为了以更加灵活的方式来解决问题，另一方面是借此机会深入学习Spring AOP相关的内容。例如，以下需求不用AOP肯定也能解决，至于是否牵强附会，仁者见仁智者见智。 1.对部分函数的调用进行日志记录，用于观察特定问题在运行过程中的函数调用</div> </li> <li><a href="/article/1565.htm" title="[Gson六]Gson类型适配器(TypeAdapter)" target="_blank">[Gson六]Gson类型适配器(TypeAdapter)</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/Adapter/1.htm">Adapter</a> <div>TypeAdapter的使用动机 Gson在序列化和反序列化时，默认情况下，是按照POJO类的字段属性名和JSON串键进行一一映射匹配，然后把JSON串的键对应的值转换成POJO相同字段对应的值，反之亦然，在这个过程中有一个JSON串Key对应的Value和对象之间如何转换(序列化/反序列化)的问题。以Date为例，在序列化和反序列化时，Gson默认使用java.</div> </li> <li><a href="/article/1692.htm" title="【spark八十七】给定Driver Program，如何判断哪些代码在Driver运行，哪些代码在Worker上执行" target="_blank">【spark八十七】给定Driver Program，如何判断哪些代码在Driver运行，哪些代码在Worker上执行</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/driver/1.htm">driver</a> <div>Driver Program是用户编写的提交给Spark集群执行的application，它包含两部分作为驱动： Driver与Master、Worker协作完成application进程的启动、DAG划分、计算任务封装、计算任务分发到各个计算节点(Worker)、计算资源的分配等。计算逻辑本身，当计算任务在Worker执行时，执行计算逻辑完成application的计算任务 </div> </li> <li><a href="/article/1819.htm" title="nginx 经验总结" target="_blank">nginx 经验总结</a> <span class="text-muted">ronin47</span> <a class="tag" taget="_blank" href="/search/nginx+%E6%80%BB%E7%BB%93/1.htm">nginx 总结</a> <div>　　　深感nginx的强大，只学了皮毛，把学下的记录。　　　获取Header 信息，一般是以$http_XX（ＸＸ是小写）获取body,通过接口，再展开，根据Ｋ取Ｖ　　　获取uri,以$arg_XX &n</div> </li> <li><a href="/article/1946.htm" title="轩辕互动-1.求三个整数中第二大的数2.整型数组的平衡点" target="_blank">轩辕互动-1.求三个整数中第二大的数2.整型数组的平衡点</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E7%BB%84/1.htm">数组</a> <div> import java.util.ArrayList; import java.util.Arrays; import java.util.List; public class ExoWeb { public static void main(String[] args) { ExoWeb ew=new ExoWeb(); System.out.pri</div> </li> <li><a href="/article/2073.htm" title="Netty源码学习-Java-NIO-Reactor" target="_blank">Netty源码学习-Java-NIO-Reactor</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/%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">多线程</a><a class="tag" taget="_blank" href="/search/netty/1.htm">netty</a> <div>Netty里面采用了NIO-based Reactor Pattern 了解这个模式对学习Netty非常有帮助参考以下两篇文章： http://jeewanthad.blogspot.com/2013/02/reactor-pattern-explained-part-1.html http://gee.cs.oswego.edu/dl/cpjslides/nio.pdf </div> </li> <li><a href="/article/2200.htm" title="AOP通俗理解" target="_blank">AOP通俗理解</a> <span class="text-muted">cngolon</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/AOP/1.htm">AOP</a> <div>1.我所知道的aop 初看aop,上来就是一大堆术语，而且还有个拉风的名字，面向切面编程，都说是OOP的一种有益补充等等。一下子让你不知所措，心想着：怪不得很多人都和我说aop多难多难。当我看进去以后，我才发现：它就是一些java基础上的朴实无华的应用，包括ioc，包括许许多多这样的名词，都是万变不离其宗而已。 2.为什么用aop&nb</div> </li> <li><a href="/article/2327.htm" title="cursor variable 实例" target="_blank">cursor variable 实例</a> <span class="text-muted">ctrain</span> <a class="tag" taget="_blank" href="/search/variable/1.htm">variable</a> <div> create or replace procedure proc_test01 as type emp_row is record( empno emp.empno%type, ename emp.ename%type, job emp.job%type, mgr emp.mgr%type, hiberdate emp.hiredate%type, sal emp.sal%t</div> </li> <li><a href="/article/2454.htm" title="shell报bash: service: command not found解决方法" target="_blank">shell报bash: service: command not found解决方法</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/shell/1.htm">shell</a><a class="tag" taget="_blank" href="/search/service/1.htm">service</a><a class="tag" taget="_blank" href="/search/jps/1.htm">jps</a> <div>今天在执行一个脚本时，本来是想在脚本中启动hdfs和hive等程序，可以在执行到service hive-server start等启动服务的命令时会报错，最终解决方法记录一下：脚本报错如下： ./olap_quick_intall.sh: line 57: service: command not found ./olap_quick_intall.sh: line 59</div> </li> <li><a href="/article/2581.htm" title="40个迹象表明你还是PHP菜鸟" target="_blank">40个迹象表明你还是PHP菜鸟</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/1.htm">正则表达式</a><a class="tag" taget="_blank" href="/search/oop/1.htm">oop</a> <div>你是PHP菜鸟，如果你：1. 不会利用如phpDoc 这样的工具来恰当地注释你的代码2. 对优秀的集成开发环境如Zend Studio 或Eclipse PDT 视而不见3. 从未用过任何形式的版本控制系统，如Subclipse4. 不采用某种编码与命名标准，以及通用约定，不能在项目开发周期里贯彻落实5. 不使用统一开发方式6. 不转换（或）也不验证某些输入或SQL查询串（译注：参考PHP相关函</div> </li> <li><a href="/article/2708.htm" title="Android逐帧动画的实现" target="_blank">Android逐帧动画的实现</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>一、代码实现： private ImageView iv; private AnimationDrawable ad; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout</div> </li> <li><a href="/article/2835.htm" title="java远程调用linux的命令或者脚本" target="_blank">java远程调用linux的命令或者脚本</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/ganymed-ssh2/1.htm">ganymed-ssh2</a> <div>转载请出自出处： http://eksliang.iteye.com/blog/2105862 Java通过SSH2协议执行远程Shell脚本(ganymed-ssh2-build210.jar) 使用步骤如下： 1.导包官网下载: http://www.ganymed.ethz.ch/ssh2/ ma</div> </li> <li><a href="/article/2962.htm" title="adb端口被占用问题" target="_blank">adb端口被占用问题</a> <span class="text-muted">gqdy365</span> <a class="tag" taget="_blank" href="/search/adb/1.htm">adb</a> <div>最近重新安装的电脑，配置了新环境，老是出现： adb server is out of date. killing... ADB server didn't ACK * failed to start daemon * 百度了一下，说是端口被占用，我开个eclipse，然后打开cmd，就提示这个，很烦人。一个比较彻底的解决办法就是修改</div> </li> <li><a href="/article/3089.htm" title="ASP.NET使用FileUpload上传文件" target="_blank">ASP.NET使用FileUpload上传文件</a> <span class="text-muted">hvt</span> <a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a><a class="tag" taget="_blank" href="/search/C%23/1.htm">C#</a><a class="tag" taget="_blank" href="/search/hovertree/1.htm">hovertree</a><a class="tag" taget="_blank" href="/search/asp.net/1.htm">asp.net</a><a class="tag" taget="_blank" href="/search/webform/1.htm">webform</a> <div>前台代码： <asp:FileUpload ID="fuKeleyi" runat="server" /> <asp:Button ID="BtnUp" runat="server" onclick="BtnUp_Click" Text="上传" /></div> </li> <li><a href="/article/3216.htm" title="代码之谜（四）- 浮点数（从惊讶到思考）" target="_blank">代码之谜（四）- 浮点数（从惊讶到思考）</a> <span class="text-muted">justjavac</span> <a class="tag" taget="_blank" href="/search/%E6%B5%AE%E7%82%B9%E6%95%B0/1.htm">浮点数</a><a class="tag" taget="_blank" href="/search/%E7%B2%BE%E5%BA%A6/1.htm">精度</a><a class="tag" taget="_blank" href="/search/%E4%BB%A3%E7%A0%81%E4%B9%8B%E8%B0%9C/1.htm">代码之谜</a><a class="tag" taget="_blank" href="/search/IEEE/1.htm">IEEE</a> <div>在『代码之谜』系列的前几篇文章中，很多次出现了浮点数。浮点数在很多编程语言中被称为简单数据类型，其实，浮点数比起那些复杂数据类型（比如字符串）来说，一点都不简单。单单是说明 IEEE浮点数就可以写一本书了，我将用几篇博文来简单的说说我所理解的浮点数，算是抛砖引玉吧。一次面试记得多年前我招聘 Java 程序员时的一次关于浮点数、二分法、编码的面试，多年以后，他已经称为了一名很出色的</div> </li> <li><a href="/article/3343.htm" title="数据结构随记_1" target="_blank">数据结构随记_1</a> <span class="text-muted">lx.asymmetric</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>第一章 1.数据结构包括数据的逻辑结构、数据的物理/存储结构和数据的逻辑关系这三个方面的内容。 2.数据的存储结构可用四种基本的存储方法表示，它们分别是顺序存储、链式存储、索引存储和散列存储。 3.数据运算最常用的有五种，分别是查找/检索、排序、插入、删除、修改。 4.算法主要有以下五个特性：输入、输出、可行性、确定性和有穷性。 5.算法分析的</div> </li> <li><a href="/article/3470.htm" title="linux的会话和进程组" target="_blank">linux的会话和进程组</a> <span class="text-muted">网络接口</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>会话：一个或多个进程组。起于用户登录，终止于用户退出。此期间所有进程都属于这个会话期。会话首进程：调用setsid创建会话的进程1.规定组长进程不能调用setsid，因为调用setsid后，调用进程会成为新的进程组的组长进程.如何保证？先调用fork，然后终止父进程，此时由于子进程的进程组ID为父进程的进程组ID，而子进程的ID是重新分配的，所以保证子进程不会是进程组长，从而子进程可以调用se</div> </li> <li><a href="/article/3597.htm" title="二维数组元素的连续求解" target="_blank">二维数组元素的连续求解</a> <span class="text-muted">1140566087</span> <a class="tag" taget="_blank" href="/search/%E4%BA%8C%E7%BB%B4%E6%95%B0%E7%BB%84/1.htm">二维数组</a><a class="tag" taget="_blank" href="/search/ACM/1.htm">ACM</a> <div>import java.util.HashMap; public class Title { public static void main(String[] args){ f(); } // 二位数组的应用 //12、二维数组中，哪一行或哪一列的连续存放的0的个数最多，是几个0。注意，是“连续”。 public static void f(){ </div> </li> <li><a href="/article/3724.htm" title="也谈什么时候Java比C++快" target="_blank">也谈什么时候Java比C++快</a> <span class="text-muted">windshome</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a> <div> 刚打开iteye就看到这个标题“Java什么时候比C++快”，觉得很好笑。你要比，就比同等水平的基础上的相比，笨蛋写得C代码和C++代码，去和高手写的Java代码比效率，有什么意义呢？我是写密码算法的，深刻知道算法C和C++实现和Java实现之间的效率差，甚至也比对过C代码和汇编代码的效率差，计算机是个死的东西，再怎么优化，Java也就是和C</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>