React.js学习笔记之表单详解

@(React学习)

诸如、</code>、<code><option></code> 这样的表单组件不同于其他组件，因为他们可以通过用户交互发生变化。这些组件提供的界面使响应用户交互的表单数据处理更加容易。</p> <h2>交互属性</h2> <p>表单组件支持几个受用户交互影响的属性：</p> <ul> <li><p>value，用于<code><input></code>,<code><textarea></code> 组件。</p></li> <li><p>checked，用于类型为<code>checkbox</code>或者<code>radio</code>的 <code><input></code>组件。</p></li> <li><p>selected，用于<code><option></code>组件。</p></li> </ul> <p>在 HTML 中<code><textarea></code>的值通过子节点设置；在 React 中则应该使用 value 代替。<br>表单组件可以通过<code>onChange</code>回调函数来监听组件变化。当用户做出以下交互时,<code>onChange</code>执行并通过浏览器做出响应：</p> <ul> <li><p><code><input></code>或 <code><textarea> </code>的 value 发生变化时。</p></li> <li><p><code><input></code>的 checked 状态改变时。</p></li> <li><p><code><option> </code>的 selected 状态改变时。</p></li> </ul> <p>和所有 DOM 事件一样，所有的 HTML 原生组件都支持 onChange 属性，而且可以用来监听冒泡的 change 事件.</p> <blockquote> <p>对于<code><input></code>和<code><textarea></code>，onChange应当被用于取代DOM内置的onInput事件处理</p> </blockquote> <h2>不可控组件和可控组件</h2> <h3>可控组件</h3> <p>设置了 value 的 <code><input></code> 是一个受限组件。对于受限的<code> <input></code>，渲染出来的 HTML 元素始终保持 value 属性的值。</p> <pre><code class="javascript"> render: function() { return <input type="text" value="Hello!"/>; }</code></pre> <p>上面的代码将渲染出一个值为 Hello! 的 input 元素。用户在渲染出来的元素里输入任何值都不起作用，因为 React 已经赋值为 Hello!。如果想响应更新用户输入的值，就得使用 onChange 事件</p> <pre><code class="javascript"> getInitialState: function() { return {value: 'Hello!'}; }, handleChange: function(event) { this.setState({value: event.target.value}); }, render: function() { var value = this.state.value; return <input type="text" value={value} onChange={this.handleChange} />; }</code></pre> <h4>Default Value</h4> <p>初始值是状态中的value。如果要取数据，可直接使用 var inputValue = this.state.value。</p> <pre><code class="javascript"> render: function() { return <input type="text" defaultValue={this.state.value}/>; }</code></pre> <blockquote> <p>一个可控组件并不保持自己的原始状态；组件的呈现完全基于属性。</p> </blockquote> <h4>实例</h4> <pre><code class="javascript">var Kekong = React.creatClass({ getInitialState:function(){ return { dada:'shuaige' } }, handleChange:function(e){ this.setState({ dada:e.target.value }); }, submitHandler:function(e){ e.preventDefault(); alert(this.state.dada); }, render:function(){ return <form onSubmit={this.submitHandler}> <input type="text" value={this.state.dada} onChange={this.handleChange} /> <button type="submit">speak</button> </form>; } }); ReactDOM.render(<Kekong />,document.body);</code></pre> <h3>不可控组件</h3> <p>没有设置value(或者设为null) 的<code><input></code>组件是一个不可控组件。这样的话，组件中的数据和state中的数据并不对应，可以说，组件的数据不可控。</p> <pre><code class="javascript"> render: function() { return <input type="text" />; }</code></pre> <p>上面的代码将渲染出一个空值的输入框，用户输入将立即反应到元素上。和受限元素一样，使用 onChange 事件可以监听值的变化。</p> <h4>Default Value</h4> <p>如果想给组件设置一个非空的初始值，可以使用 defaultValue 属性。数据在这里并没有存贮在状态中，而是写在input中。</p> <pre><code class="javascript"> render: function() { return <input type="text" defaultValue="Hello!" />; }</code></pre> <p>如果要拿到input中的value，需先拿到其DOM节点，然后获取其value值</p> <pre><code class="javascript">var inputValue = React.findDOMNode(this.refs.input).value</code></pre> <p>上面的代码渲染出来的元素和受限组件一样有一个初始值，但这个值用户可以改变并会反应到界面上。<br>同样，<code><input type="checkbox"></code>和<code><input type="radio"></code>支持defaultChecked属性，<code><select></code>支持设置defaultValue。</p> <blockquote> <p><code>defaultValue</code>和<code>defaultChecked</code>属性只能在初始的render函数中使用，如果你要在随后的render函数中更新value值，你需要使用可控组件。</p> </blockquote> <h4>实例</h4> <pre><code class="javascript">var UnKekong = React.creatClass({ submitHandler:function(e){ e.preventDefault(); var helloUnke = React.findDOMNode(this.refs.helloUnke).value; alert(helloUnke); }, render:function(){ return <form onsubmit={this.submitHandler}> <input ref="helloUnke" type="text" defaultValue="Dada shuaige" /> <button type="submit">speak</button> </form>; } }) React.render(<Unkekong />,document.body);</code></pre> <h3>Checkbox和Radio的潜在问题</h3> <p>注意，在试图改变正常处理Checkbox和Radio input时，React用一个click事件来代替change事件。大多数情况下，这种行为与预期相同，除了调用preventDefault时。preventDefault从视觉上阻止浏览器更新input，即使checked被触发。它可以在移除调用preventDefault与用setTimeout来切换checked中起作用。</p> <h3>Why use Controlled Components</h3> <p>组件可控的优点：</p> <ul> <li><p>符合React的数据流，单向数据流，从state流向render输出的结果。</p></li> <li><p>数据存贮在state中，便于使用。</p></li> <li><p>便于对数据进行处理</p></li> </ul> <h2>表单元素</h2> <ul> <li><p><code><label htmlFor="name">Name</label></code><br>要注意for是js关键字，要写成htmlFor。具体JSX语法在之间笔记中有介绍，传送门：React.js学习笔记之JSX解读。现在多数提示用input的placeholder属性替代。</p></li> <li><p><code><input type="" onChange={this.handleChange}/></code></p></li> <li><p><code><textarea onChange={this.handleChange}/></code></p></li> <li><p><code><select onChange={this.handleChange}><option></option></select></code></p></li> </ul> <h3>实例</h3> <p>可以去查看实例代码，传送门：React表单Demo</p> <pre><code class="javascript">var MyForm = React.createClass({ getInitialState:function(){ return { username:'', gender:'man', checked:true }; }, handleUsernameChange:function(e){ this.setState({ username:e.target.value }); }, handlerGenderChange:function(e){ this.setState({ gender:e.target.value }); }, handleCheckedChange:function(e){ this.setState({ checked:e.target.checked }); }, submitHandler:function (e) { e.preventDefault(); console.log(this.state); }, render:function () { return <form onSubmit={this.submitHandler}> <label htmlFor="username">请输入用户名</label> <input type="text" onChange={this.handleUsernameChange} value={this.state.username} id="username"/> <br/> <select onChange={this.handlerGenderChange} value={this.state.gender}> <option value="man">男</option> <option value="woman">女</option> </select> <br/> <label htmlFor="checkbox">大大是帅哥吗</label> <input type="checkbox" value="大大是帅哥" checked={this.state.checked} onChange={this.handleCheckedChange} id="checkbox"/> <button type="submit">提交</button> </form> } }); ReactDOM.render(<MyForm />,document.getElementById('reactDemo'));</code></pre> <h2>事件处理函数</h2> <blockquote> <p>onChange={this.handleChange}</p> </blockquote> <p>若有多个元素要运用事件处理函数，常规的方法是编写多个onChange事件。这么写的话会导致代码维护比较困难并且也非常冗余。更好的做法是把事件处理函数编写为一个。可以采用bind复用和name复用这两种方法。</p> <h3>bind复用</h3> <pre><code class="javascript">handleChange:function(name,event){ ...... } onChagne={this.handleChange.bind(this,'input')}</code></pre> <p>书写简单，但需要对<code>bind()</code>机制熟悉，性能相对要好。</p> <h4>实例</h4> <p>可以去查看实例代码，传送门：React表单Demo</p> <pre><code class="javascript">var MyForm = React.createClass({ getInitialState:function(){ return { username:'', gender:'man', checked:true }; }, handleChange:function(name,event){ var newState={}; newState[name]=name=="checked"?event.target.checked:event.target.value; this.setState(newState); }, submitHandler:function (e) { e.preventDefault(); console.log(this.state); }, render:function () { return <form onSubmit={this.submitHandler}> <label htmlFor="username">请输入用户名</label> <input type="text" onChange={this.handleChange.bind(this,"username")} value={this.state.username} id="username"/> <br/> <select onChange={this.handleChange.bind(this,"gender")} value={this.state.gender}> <option value="man">男</option> <option value="woman">女</option> </select> <br/> <label htmlFor="checkbox">大大是帅哥吗</label> <input type="checkbox" value="大大是帅哥" checked={this.state.checked} onChange={this.handleChange.bind(this,"checked")} id="checkbox"/> <button type="submit">提交</button> </form> } }); ReactDOM.render(<MyForm />,document.getElementById('reactDemo'));</code></pre> <h3>name复用</h3> <pre><code class="javascript">handleChange:function(event){ var name = event.target.name } onChange={this.handleChange}</code></pre> <p>相比Bind写法会少一些参数，在函数中需要读取表单的name值，需要添加name属性。</p> <h4>实例</h4> <p>可以去查看实例代码，传送门：React表单Demo</p> <pre><code class="javascript">var MyForm = React.createClass({ getInitialState:function(){ return { username:'', gender:'man', checked:true }; }, handleChange:function(event){ var newState={}; newState[event.target.name]=event.target.name=="checked"?event.target.checked:event.target.value; this.setState(newState); }, submitHandler:function (e) { e.preventDefault(); console.log(this.state); }, render:function () { return <form onSubmit={this.submitHandler}> <label htmlFor="username">请输入用户名</label> <input type="text" name="username" onChange={this.handleChange} value={this.state.username} id="username"/> <br/> <select name="gender" onChange={this.handleChange} value={this.state.gender}> <option value="man">男</option> <option value="woman">女</option> </select> <br/> <label htmlFor="checkbox">大大是帅哥吗</label> <input type="checkbox" value="大大是帅哥" checked={this.state.checked} onChange={this.handleChange} name="checked" id="checkbox"/> <button type="submit">提交</button> </form> } }); ReactDOM.render(<MyForm />,document.getElementById('reactDemo'));</code></pre> <h2>自定义表单组件</h2> <p>自定义表单组件能让我们更好的使用组件，让我们更好的开发网页。</p> <h3>why 自定义表单组件？</h3> <p>自定义表单组件的原因：</p> <ul> <li><p>内因：表单本身具备特殊性：样式统一、信息内聚、行为固定</p></li> <li><p>外因：本质上是组件的嵌套，组织和管理组件的一种方式</p></li> </ul> <h2>小结</h2> <p>本文主要简单介绍了表单组件的一些用法。</p> <h2>特别感谢</h2> <ul> <li><p>极客学院React.js系列课程</p></li> <li><p>React 入门实例教程 by 阮一峰</p></li> <li><p>React.js官方文档</p></li> </ul> </div> </div> </div> </div>  <div id="SOHUCS" sid="1176917077894705152"></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/39.htm" title="java Illegal overloaded getter method with ambiguous type for propert的解决" target="_blank">java Illegal overloaded getter method with ambiguous type for propert的解决</a> <span class="text-muted">zwllxs</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jdk/1.htm">jdk</a> <div>好久不来iteye,今天又来看看，哈哈,今天碰到在编码时，反射中会抛出 Illegal overloaded getter method with ambiguous type for propert这么个东东，从字面意思看，是反射在获取getter时迷惑了，然后回想起java在boolean值在生成getter时，分别有is和getter，也许我们的反射对象中就有is开头的方法迷惑了jdk，</div> </li> <li><a href="/article/166.htm" title="IT人应当知道的10个行业小内幕" target="_blank">IT人应当知道的10个行业小内幕</a> <span class="text-muted">beijingjava</span> <a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/%E4%BA%92%E8%81%94%E7%BD%91/1.htm">互联网</a> <div>10. 虽然IT业的薪酬比其他很多行业要好，但有公司因此视你为其“佣人”。　　尽管IT人士的薪水没有互联网泡沫之前要好，但和其他行业人士比较，IT人的薪资还算好点。在接下的几十年中，科技在商业和社会发展中所占分量会一直增加，所以我们完全有理由相信，IT专业人才的需求量也不会减少。　　然而，正因为IT人士的薪水普遍较高，所以有些公司认为给了你这么多钱，就把你看成是公司的“佣人”，拥有你的支配</div> </li> <li><a href="/article/293.htm" title="java 实现自定义链表" target="_blank">java 实现自定义链表</a> <span class="text-muted">CrazyMizzz</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a> <div>1.链表结构链表是链式的结构 2.链表的组成链表是由头节点，中间节点和尾节点组成节点是由两个部分组成： 1.数据域 2.引用域 3.链表的实现 &nbs</div> </li> <li><a href="/article/420.htm" title="web项目发布到服务器后图片过一会儿消失" target="_blank">web项目发布到服务器后图片过一会儿消失</a> <span class="text-muted">麦田的设计者</span> <a class="tag" taget="_blank" href="/search/struts2/1.htm">struts2</a><a class="tag" taget="_blank" href="/search/%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87/1.htm">上传图片</a><a class="tag" taget="_blank" href="/search/%E6%B0%B8%E4%B9%85%E4%BF%9D%E5%AD%98/1.htm">永久保存</a> <div> 作为一名学习了android和j2ee的程序员，我们必须要意识到，客服端和服务器端的交互是很有必要的，比如你用eclipse写了一个web工程，并且发布到了服务器（tomcat）上，这时你在webapps目录下看到了你发布的web工程，你可以打开电脑的浏览器输入http://localhost:8080/工程/路径访问里面的资源。但是，有时你会突然的发现之前用struts2上传的图片</div> </li> <li><a href="/article/547.htm" title="CodeIgniter框架Cart类 name 不能设置中文的解决方法" target="_blank">CodeIgniter框架Cart类 name 不能设置中文的解决方法</a> <span class="text-muted">IT独行者</span> <a class="tag" taget="_blank" href="/search/CodeIgniter/1.htm">CodeIgniter</a><a class="tag" taget="_blank" href="/search/Cart/1.htm">Cart</a><a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6%E3%80%80/1.htm">框架　</a> <div>今天试用了一下CodeIgniter的Cart类时遇到了个小问题，发现当name的值为中文时，就写入不了session。在这里特别提醒一下。在CI手册里也有说明，如下： $data = array( 'id' => 'sku_123ABC', 'qty' => 1, '</div> </li> <li><a href="/article/674.htm" title="linux回收站" target="_blank">linux回收站</a> <span class="text-muted">_wy_</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E5%9B%9E%E6%94%B6%E7%AB%99/1.htm">回收站</a> <div>今天一不小心在ubuntu下把一个文件移动到了回收站，我并不想删，手误了。我急忙到Nautilus下的回收站中准备恢复它，但是里面居然什么都没有。后来我发现这是由于我删文件的地方不在HOME所在的分区，而是在另一个独立的Linux分区下，这是我专门用于开发的分区。而我删除的东东在分区根目录下的.Trash-1000/file目录下，相关的删除信息（删除时间和文件所在</div> </li> <li><a href="/article/801.htm" title="jquery回到页面顶端" target="_blank">jquery回到页面顶端</a> <span class="text-muted">知了ing</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/css/1.htm">css</a> <div>html代码： <h1 id="anchor">页面标题</h1> <div id="container">页面内容</div> <p><a href="#anchor" class="topLink">回到顶端</a><</div> </li> <li><a href="/article/928.htm" title="B树、B-树、B+树、B*树" target="_blank">B树、B-树、B+树、B*树</a> <span class="text-muted">矮蛋蛋</span> <a class="tag" taget="_blank" href="/search/B%E6%A0%91/1.htm">B树</a> <div>原文地址： http://www.cnblogs.com/oldhorse/archive/2009/11/16/1604009.html B树即二叉搜索树： 1.所有非叶子结点至多拥有两个儿子（Left和Right）； &nb</div> </li> <li><a href="/article/1055.htm" title="数据库连接池" target="_blank">数据库连接池</a> <span class="text-muted">alafqq</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93%E8%BF%9E%E6%8E%A5%E6%B1%A0/1.htm">数据库连接池</a> <div>http://www.cnblogs.com/xdp-gacl/p/4002804.html @Anthor:孤傲苍狼数据库连接池用MySQLv5版本的数据库驱动没有问题，使用MySQLv6和Oracle的数据库驱动时候报如下错误： java.lang.ClassCastException: $Proxy0 cannot be cast to java.sql.Connec</div> </li> <li><a href="/article/1182.htm" title="java泛型" target="_blank">java泛型</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/java%E6%B3%9B%E5%9E%8B/1.htm">java泛型</a> <div>泛型在Java SE 1.5之前，没有泛型的情况的下，通过对类型Object的引用来实现参数的“任意化”，任意化的缺点就是要实行强制转换，这种强制转换可能会带来不安全的隐患泛型的特点：消除强制转换确保类型安全向后兼容简单泛型的定义：泛型：就是在类中将其模糊化，在创建对象的时候再具体定义 class fan</div> </li> <li><a href="/article/1309.htm" title="javascript闭包[两个小测试例子]" target="_blank">javascript闭包[两个小测试例子]</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a> <div>一.程序一 <script> var name = "The Window"; var Object_a = { 　　name : "My Object", 　　getNameFunc : function(){ var that = this; 　　　　return function(){ 　　　　</div> </li> <li><a href="/article/1436.htm" title="探索JUnit4扩展：假设机制（Assumption）" target="_blank">探索JUnit4扩展：假设机制（Assumption）</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/Assumption/1.htm">Assumption</a><a class="tag" taget="_blank" href="/search/JUnit/1.htm">JUnit</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/1.htm">单元测试</a> <div>一.假设机制（Assumption）概述理想情况下，写测试用例的开发人员可以明确的知道所有导致他们所写的测试用例不通过的地方，但是有的时候，这些导致测试用例不通过的地方并不是很容易的被发现，可能隐藏得很深，从而导致开发人员在写测试用例时很难预测到这些因素，而且往往这些因素并不是开发人员当初设计测试用例时真正目的，</div> </li> <li><a href="/article/1563.htm" title="【Gson四】范型POJO的反序列化" target="_blank">【Gson四】范型POJO的反序列化</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/POJO/1.htm">POJO</a> <div>在下面这个例子中，POJO(Data类)是一个范型类，在Tests中，指定范型类为PieceData，POJO初始化完成后，通过 String str = new Gson().toJson(data); 得到范型化的POJO序列化得到的JSON串，然后将这个JSON串反序列化为POJO import com.google.gson.Gson; import java.</div> </li> <li><a href="/article/1690.htm" title="【Spark八十五】Spark Streaming分析结果落地到MySQL" target="_blank">【Spark八十五】Spark Streaming分析结果落地到MySQL</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/Stream/1.htm">Stream</a> <div>几点总结： 1. DStream.foreachRDD是一个Output Operation，类似于RDD的action，会触发Job的提交。DStream.foreachRDD是数据落地很常用的方法 2. 获取MySQL Connection的操作应该放在foreachRDD的参数（是一个RDD[T]=>Unit的函数类型)，这样，当foreachRDD方法在每个Worker上执行时，</div> </li> <li><a href="/article/1817.htm" title="NGINX + LUA实现复杂的控制" target="_blank">NGINX + LUA实现复杂的控制</a> <span class="text-muted">ronin47</span> <a class="tag" taget="_blank" href="/search/nginx+lua/1.htm">nginx lua</a> <div>安装lua_nginx_module 模块 lua_nginx_module 可以一步步的安装，也可以直接用淘宝的OpenResty Centos和debian的安装就简单了。。这里说下freebsd的安装： fetch http://www.lua.org/ftp/lua-5.1.4.tar.gz tar zxvf lua-5.1.4.tar.gz cd lua-5.1.4 ma</div> </li> <li><a href="/article/1944.htm" title="java-递归判断数组是否升序" target="_blank">java-递归判断数组是否升序</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> public class IsAccendListRecursive { /*递归判断数组是否升序 * if a Integer array is ascending,return true * use recursion */ public static void main(String[] args){ IsAccendListRecursiv</div> </li> <li><a href="/article/2071.htm" title="Netty源码学习-DefaultChannelPipeline2" target="_blank">Netty源码学习-DefaultChannelPipeline2</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/netty/1.htm">netty</a> <div>Netty3的API http://docs.jboss.org/netty/3.2/api/org/jboss/netty/channel/ChannelPipeline.html 里面提到ChannelPipeline的一个“pitfall”：如果ChannelPipeline只有一个handler（假设为handlerA）且希望用另一handler（假设为handlerB）来</div> </li> <li><a href="/article/2198.htm" title="Java工具之JPS" target="_blank">Java工具之JPS</a> <span class="text-muted">chinrui</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>JPS使用熟悉Linux的朋友们都知道，Linux下有一个常用的命令叫做ps（Process Status)，是用来查看Linux环境下进程信息的。同样的，在Java Virtual Machine里面也提供了类似的工具供广大Java开发人员使用，它就是jps（Java Process Status)，它可以用来</div> </li> <li><a href="/article/2325.htm" title="window.print分页打印" target="_blank">window.print分页打印</a> <span class="text-muted">ctrain</span> <a class="tag" taget="_blank" href="/search/window/1.htm">window</a> <div> function init() { var tt = document.getElementById("tt"); var childNodes = tt.childNodes[0].childNodes; var level = 0; for (var i = 0; i < childNodes.length; i++) { </div> </li> <li><a href="/article/2452.htm" title="安装hadoop时执行jps命令Error occurred during initialization of VM" target="_blank">安装hadoop时执行jps命令Error occurred during initialization of VM</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/jdk/1.htm">jdk</a><a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a><a class="tag" taget="_blank" href="/search/jps/1.htm">jps</a> <div>在安装hadoop时，执行JPS出现下面错误 [slave16]root@192.168.11.10:/tmp/hsperfdata_hdfs# jps Error occurred during initialization of VM java.lang.Error: Properties init: Could not determine current working</div> </li> <li><a href="/article/2579.htm" title="PHP开发大型项目的一点经验" target="_blank">PHP开发大型项目的一点经验</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/%E9%87%8D%E6%9E%84/1.htm">重构</a> <div>一、变量最好是把所有的变量存储在一个数组中，这样在程序的开发中可以带来很多的方便，特别是当程序很大的时候。变量的命名就当适合自己的习惯，不管是用拼音还是英语，至少应当有一定的意义，以便适合记忆。变量的命名尽量规范化，不要与PHP中的关键字相冲突。二、函数 PHP自带了很多函数，这给我们程序的编写带来了很多的方便。当然，在大型程序中我们往往自己要定义许多个函数，几十</div> </li> <li><a href="/article/2706.htm" title="android笔记之--向网络发送GET/POST请求参数" target="_blank">android笔记之--向网络发送GET/POST请求参数</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>使用GET方法发送请求 private static boolean sendGETRequest (String path, Map<String, String> params) throws Exception{ //发送地http://192.168.100.91:8080/videoServi</div> </li> <li><a href="/article/2833.htm" title="linux复习笔记之bash shell (3) 通配符" target="_blank">linux复习笔记之bash shell (3) 通配符</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/linux+%E9%80%9A%E9%85%8D%E7%AC%A6/1.htm">linux 通配符</a><a class="tag" taget="_blank" href="/search/linux%E9%80%9A%E9%85%8D%E7%AC%A6/1.htm">linux通配符</a> <div>转载请出自出处： http://eksliang.iteye.com/blog/2104387 在bash的操作环境中有一个非常有用的功能，那就是通配符。下面列出一些常用的通配符，如下表所示符号意义 * 万用字符，代表0个到无穷个任意字符 ? 万用字符，代表一定有一个任意字符 [] 代表一定有一个在中括号内的字符。例如：[abcd]代表一定有一个字符，可能是a、b、c</div> </li> <li><a href="/article/2960.htm" title="Android关于短信加密" target="_blank">Android关于短信加密</a> <span class="text-muted">gqdy365</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>关于Android短信加密功能，我初步了解的如下（只在Android应用层试验）： 1、因为Android有短信收发接口，可以调用接口完成短信收发；发送过程：APP（基于短信应用修改）接受用户输入号码、内容——>APP对短信内容加密——>调用短信发送方法Sm</div> </li> <li><a href="/article/3087.htm" title="asp.net在网站根目录下创建文件夹" target="_blank">asp.net在网站根目录下创建文件夹</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/Web+Forms/1.htm">Web Forms</a> <div>假设要在asp.net网站的根目录下建立文件夹hovertree,C#代码如下： string m_keleyiFolderName = Server.MapPath("/hovertree"); if (Directory.Exists(m_keleyiFolderName)) { //文件夹已经存在 return; } else { try { D</div> </li> <li><a href="/article/3214.htm" title="一个合格的程序员应该读过哪些书" target="_blank">一个合格的程序员应该读过哪些书</a> <span class="text-muted">justjavac</span> <a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a><a class="tag" taget="_blank" href="/search/%E4%B9%A6%E7%B1%8D/1.htm">书籍</a> <div>编者按：2008年8月4日，StackOverflow 网友 Bert F 发帖提问：哪本最具影响力的书，是每个程序员都应该读的？ “如果能时光倒流，回到过去，作为一个开发人员，你可以告诉自己在职业生涯初期应该读一本，你会选择哪本书呢？我希望这个书单列表内容丰富，可以涵盖很多东西。” 很多程序员响应，他们在推荐时也写下自己的评语。以前就有国内网友介绍这个程序员书单，不过都是推荐数</div> </li> <li><a href="/article/3341.htm" title="单实例实践" target="_blank">单实例实践</a> <span class="text-muted">跑龙套_az</span> <a class="tag" taget="_blank" href="/search/%E5%8D%95%E4%BE%8B/1.htm">单例</a> <div> 1、内部类 public class Singleton { private static class SingletonHolder { public static Singleton singleton = new Singleton(); } public Singleton getRes</div> </li> <li><a href="/article/3468.htm" title="PO VO BEAN 理解" target="_blank">PO VO BEAN 理解</a> <span class="text-muted">q137681467</span> <a class="tag" taget="_blank" href="/search/VO/1.htm">VO</a><a class="tag" taget="_blank" href="/search/DTO/1.htm">DTO</a><a class="tag" taget="_blank" href="/search/po/1.htm">po</a> <div>PO：全称是 persistant object持久对象最形象的理解就是一个PO就是数据库中的一条记录。好处是可以把一条记录作为一个对象处理，可以方便的转为其它对象。 BO：全称是 business object:业务对象主要作用是把业务逻辑封装为一个对象。这个对</div> </li> <li><a href="/article/3595.htm" title="战胜惰性，暗自努力" target="_blank">战胜惰性，暗自努力</a> <span class="text-muted">金笛子</span> <a class="tag" taget="_blank" href="/search/%E5%8A%AA%E5%8A%9B/1.htm">努力</a> <div>偶然看到一句很贴近生活的话：“别人都在你看不到的地方暗自努力，在你看得到的地方，他们也和你一样显得吊儿郎当，和你一样会抱怨，而只有你自己相信这些都是真的，最后也只有你一人继续不思进取。”很多句子总在不经意中就会戳中一部分人的软肋，我想我们每个人的周围总是有那么些表现得“吊儿郎当”的存在，是否你就真的相信他们如此不思进取，而开始放松了对自己的要求随波逐流呢？我有个朋友是搞技术的，平时嘻嘻哈哈，以</div> </li> <li><a href="/article/3722.htm" title="NDK/JNI二维数组多维数组传递" target="_blank">NDK/JNI二维数组多维数组传递</a> <span class="text-muted">wenzongliang</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/jni/1.htm">jni</a><a class="tag" taget="_blank" href="/search/NDK/1.htm">NDK</a> <div>多维数组和对象数组一样处理，例如二维数组里的每个元素还是一个数组用jArray表示，直到数组变为一维的，且里面元素为基本类型，去获得一维数组指针。给大家提供个例子。已经测试通过。 Java_cn_wzl_FiveChessView_checkWin( JNIEnv* env,jobject thiz,jobjectArray qizidata) { jint i,j; int s</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类：</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.  </div> </div> </footer>  <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>