【React】初学高阶指引

A. 无障碍辅助功能

WAI-ARIA是一个为残疾人士等提供无障碍访问动态、可交互Web内容的技术规范。主要针对的是视觉缺陷，失聪，行动不便的残疾人以及假装残疾的测试人员。尤其像盲人，眼睛看不到，其浏览网页则需要借助辅助设备，如屏幕阅读器，屏幕阅读机可以大声朗读或者输出盲文。
在标签内使用aria-*属性【aria属性表】，它描述了元素的属性和状态。
通常与其配合使用的标签是role，它的值表示一个元素的实际意义和作用。
aria-*属性
JSX 支持所有 aria-* HTML 属性。虽然大多数 React 的 DOM 变量和属性命名都使用驼峰命名（camelCased），但 aria-* 应该像其在 HTML 中一样使用带连字符的命名法
A2. 语义化的HTML -- `React Fragments`

语义化的 HTML 是无障碍辅助功能网络应用的基础。利用多种 HTML 元素来强化您网站中的信息通常可以使您直接获得无障碍辅助功能。
MDN 的 HTML 元素参照（MDN HTML elements reference）
有时，语义化的 HTML 会被破坏。比如当在 JSX 中使用
元素来实现 React 代码功能的时候，又或是在使用列表（
）和 HTML
 时。 在这种情况下，我们应该使用 React Fragments 来组合各个组件。
 
   
     
    
   
  
    React.Fragment 
   
 
A3. 无障碍表单
所有的 HTML 表单控制，例如  和 </code> ，都需要被标注来实现无障碍辅助功能。我们需要提供屏幕朗读器以解释性标注。</p> 
 <p>以下资源向我们展示了如何写标注：</p> 
 <ul> 
  <li>W3C 向我们展示如何标注元素</li> 
  <li>WebAIM 向我们展示如何标注元素</li> 
  <li>Paciello Group 解释什么是无障碍名称</li> 
 </ul> 
 <p>尽管这些标准 HTML 实践可以被直接用在 React 中，请注意 <code>for</code> 在 JSX 中应该被写作 <code>htmlFor</code>：</p> 
 <pre><code><label htmlFor="namedInput">Name:</label>
<input id="namedInput" type="text" name="name"/>
</code></pre> 
 <p><strong>还有很多其他无障碍相关的知识点</strong>，本人暂时不准备深入了解无障碍这块相关知识点，所以本文就先不深入学习了。</p> 
 <hr> 
 <h3>B. Context</h3> 
 <blockquote> 
  <p>在一个典型的 <code>React</code> 应用中，数据是通过 <code>props</code> 属性自上而下（由父及子）进行传递的，但这种做法对于某些类型的属性而言是极其繁琐的（例如：地区偏好，<code>UI</code> 主题），这些属性是应用程序中许多组件都需要的。<code>Context</code> 提供了一种在<code>组件之间共享此类值</code>的方式，而不必显式地通过组件树的逐层传递 <code>props</code>。</p> 
 </blockquote> 
 <div class="image-package"> 
  <div class="image-container" style="max-width: 462px; max-height: 552px;"> 
   <div class="image-view">  
   </div> 
  </div> 
  <div class="image-caption">
    context 
  </div> 
 </div> 
 <h4>B.1请谨慎使用 <code>Context</code> </h4> 
 <p>会使得组件的复用性变差。<strong>如果你只是想避免层层传递一些属性，组件组合（component composition）有时候是一个比 context 更好的解决方案。</strong></p> 
 <div class="image-package"> 
  <div class="image-container" style="max-width: 502px; max-height: 393px;"> 
   <div class="image-view">  
   </div> 
  </div> 
  <div class="image-caption">
    组件组合 
  </div> 
 </div> 
 <h4>B.2 render props </h4> 
 <p>这种模式足够覆盖很多场景了，在这些场景下你需要将子组件和直接关联的父组件解耦。如果子组件需要在渲染前和父组件进行一些交流，你可以进一步使用 <strong>render props</strong>。</p> 
 <pre><code class="html"><DataProvider render={data => (
  <h1>Hello {data.target}</h1>
)}/>
</code></pre> 
 <p>用<code>render</code>渲染子组件，就不需要在主组件中写死。看案例：<br> </p> 
 <div class="image-package"> 
  <div class="image-container" style="max-width: 700px; max-height: 609px;"> 
   <div class="image-view">  
   </div> 
  </div> 
  <div class="image-caption">
    render 
  </div> 
 </div> 
 <p></p> 
 <p>重要的是要记住，<code>render prop</code> 是因为模式才被称为 <code>render prop</code> ，你<strong>不一定要用名为 <code>render</code> 的 <code>prop</code> 来使用这种模式</strong></p> 
 <div class="image-package"> 
  <div class="image-container" style="max-width: 417px; max-height: 316px;"> 
   <div class="image-view">  
   </div> 
  </div> 
  <div class="image-caption">
    render的简写 
  </div> 
 </div> 
 <p><strong><code>Render Props</code> 与 <code>React.PureComponent</code>（区别于<code>React.Component</code>） 一起使用时要小心</strong></p> 
 <div class="image-package"> 
  <div class="image-container" style="max-width: 420px; max-height: 466px;"> 
   <div class="image-view">  
   </div> 
  </div> 
  <div class="image-caption">
    PureComponent 
  </div> 
 </div> 
 <h4>B.3 Context API</h4> 
 <div class="image-package"> 
  <div class="image-container" style="max-width: 700px; max-height: 646px;"> 
   <div class="image-view">  
   </div> 
  </div> 
  <div class="image-caption">
    Context API 
  </div> 
 </div> 
 <p><strong>Class.contextType</strong>：挂载在 <code>class</code> 上的 <code>contextType</code> 属性会被重赋值为一个由 <code>React.createContext()</code> 创建的 <code>Context</code> 对象。这能让你使用 <code>this.context</code> 来消费最近 <code>Context</code> 上的那个值。你可以在任何生命周期中访问到它，包括 <code>render</code> 函数中。</p> 
 <pre><code class="js">class MyClass extends React.Component {
  componentDidMount() {
    let value = this.context;
    /* 在组件挂载完成后，使用 MyContext 组件的值来执行一些有副作用的操作 */
  }
  componentDidUpdate() {
    let value = this.context;
    /* ... */
  }
  componentWillUnmount() {
    let value = this.context;
    /* ... */
  }
  render() {
    let value = this.context;
    /* 基于 MyContext 组件的值进行渲染 */
  }
}
MyClass.contextType = MyContext;
</code></pre> 
 <p><strong>Context.displayName</strong>：<code>context</code> 对象接受一个名为 <code>displayName</code> 的 <code>property</code>，类型为字符串。<code>React DevTools</code> 使用该字符串来确定 <code>context</code> 要显示的内容：</p> 
 <pre><code class="js">const MyContext = React.createContext(/* some value */);
MyContext.displayName = 'MyDisplayName';
 // "MyDisplayName.Provider" 在 DevTools 中
<MyContext.Provider>
// "MyDisplayName.Consumer" 在 DevTools 中
<MyContext.Consumer> 
</code></pre> 
 <h4>B.4 消费多个 Context</h4> 
 <pre><code class="js">// Theme context，默认的 theme 是 “light” 值
const ThemeContext = React.createContext('light');

// 用户登录 context
const UserContext = React.createContext({
  name: 'Guest',
});

class App extends React.Component {
  render() {
    const {signedInUser, theme} = this.props;

    // 提供初始 context 值的 App 组件
    return (
      <ThemeContext.Provider value={theme}>
        <UserContext.Provider value={signedInUser}>
          <Layout />
        </UserContext.Provider>
      </ThemeContext.Provider>
    );
  }
}

function Layout() {
  return (
    <div>
      <Sidebar />
      <Content />
    </div>
  );
}

// 一个组件可能会消费多个 context
function Content() {
  return (
    <ThemeContext.Consumer>
      {theme => (
        <UserContext.Consumer>
          {user => (
            <ProfilePage user={user} theme={theme} />
          )}
        </UserContext.Consumer>
      )}
    </ThemeContext.Consumer>
  );
}
</code></pre> 
 <h3>C. 错误边界</h3> 
 <blockquote> 
  <p>部分<code>UI</code>的 <code>JavaScript</code> 错误不应该导致整个应用崩溃，为了解决这个问题，<code>React 16</code> 引入了一个新的概念 —— 错误边界。</p> 
 </blockquote> 
 <div class="image-package"> 
  <div class="image-container" style="max-width: 527px; max-height: 587px;"> 
   <div class="image-view">  
   </div> 
  </div> 
  <div class="image-caption">
    错误边界 
  </div> 
 </div> 
 <p>错误边界的工作方式类似于 <code>JavaScript 的 catch {}</code>，不过只有<code>React</code> <code>class</code> 组件才可以成为错误边界组件。你可以将它作为一个常规组件去使用：<br> <code><ErrorBoundary></code> <code><MyWidget /></code> <code></ErrorBoundary></code></p> 
 <h3>D. Refs转发</h3> 
 <div class="image-package"> 
  <div class="image-container" style="max-width: 509px; max-height: 268px;"> 
   <div class="image-view">  
   </div> 
  </div> 
  <div class="image-caption">
    image.png 
  </div> 
 </div> 
 <div class="image-package"> 
  <div class="image-container" style="max-width: 538px; max-height: 444px;"> 
   <div class="image-view">  
   </div> 
  </div> 
  <div class="image-caption">
    HOC相关转发 
  </div> 
 </div> 
 <p>非受控组件中也有<code>ref</code>相关内容：<br> </p> 
 <div class="image-package"> 
  <div class="image-container" style="max-width: 612px; max-height: 518px;"> 
   <div class="image-view">  
   </div> 
  </div> 
  <div class="image-caption">
    非受控组件 
  </div> 
 </div> 
 <p></p> 
 <h3>E. Fragments</h3> 
 <p>最开始<code>A2. 语义化的HTML</code>中已经提到了该知识点：</p> 
 <p>有时，语义化的 HTML 会被破坏。比如当在 JSX 中使用 <code><div></code> 元素来实现 React 代码功能的时候，又或是在使用列表（<code><ol></code>， <code><ul></code> 和 <code><dl></code>）和 HTML <code><table></code> 时。 在这种情况下，我们应该使用 <strong>React Fragments</strong> 来组合各个组件。</p> 
 <div class="image-package"> 
  <div class="image-container" style="max-width: 497px; max-height: 607px;"> 
   <div class="image-view">  
   </div> 
  </div> 
  <div class="image-caption">
    React.Fragment 
  </div> 
 </div> 
 <h3>F. 高阶组件<code>HOC</code> </h3> 
 <p>具体而言，高阶组件是<code>参数为组件</code>，<code>返回值为新组件</code>的函数。</p> 
 <pre><code class="js">const EnhancedComponent = 
  higherOrderComponent(WrappedComponent);
</code></pre> 
 <p><code>HOC</code> 在 <code>React 的第三方库</code>中很常见，例如 <code>Redux</code> 的 <code>connect</code> 和 <code>Relay</code> 的 <code>createFragmentContainer</code>。</p> 
 <p><code>HOC</code>一些相关内容这里就先不展开学习了，就稍微提下一些<strong>注意事项</strong>：</p> 
 <ul> 
  <li>①<strong>不要在 <code>render</code> 方法中使用 <code>HOC</code></strong> </li> 
 </ul> 
 <pre><code>render() {
  每次调用 render 函数都会创建一个新的 EnhancedComponent
  // EnhancedComponent1 !== EnhancedComponent2
  这将导致子树每次渲染都会进行卸载，和重新挂载的操作！
  const EnhancedComponent = enhance(MyComponent);
  return <EnhancedComponent />;
}
</code></pre> 
 <p>这不仅仅是性能问题 - 重新挂载组件会导致该组件及其所有子组件的状态丢失。</p> 
 <ul> 
  <li>② <strong>务必复制静态方法</strong><br> 有时在 <code>React</code> 组件上定义静态方法很有用。例如，<code>Relay</code> 容器暴露了一个静态方法 <code>getFragment</code> 以方便组合 <code>GraphQL</code> 片段。<br> 当你将 <code>HOC</code> 应用于组件时，原始组件将使用容器组件进行包装。这意味着<code>新组件没有原始组件的任何静态方法</code>。</li> 
  <li>③ <strong><code>Refs</code> 不会被传递</strong><br> 
   <div class="image-package"> 
    <div class="image-container" style="max-width: 538px; max-height: 444px;"> 
     <div class="image-view">  
     </div> 
    </div> 
    <div class="image-caption">
      HOC相关转发 
    </div> 
   </div> </li> 
 </ul> 
 <h3>G. Portals</h3> 
 <p><code>Portal</code> 提供了一种将<code>子节点</code>渲染到存在于<code>父组件以外的 DOM 节点</code>的优秀的方案。</p> 
 <pre><code>ReactDOM.createPortal(child, container)
</code></pre> 
 <p>第一个参数（<code>child</code>）是任何可渲染的 React 子元素，例如一个元素，字符串或 fragment。第二个参数（<code>container</code>）是一个 DOM 元素。</p> 
 <pre><code class="js">通常来讲，当你从组件的 render 方法返回一个元素时，
该元素将被挂载到 DOM 节点中离其最近的父节点：

render() {
  // React 挂载了一个新的 div，并且把子元素渲染其中
  return (
    <div>
      {this.props.children}
    </div>
  );
}

然而，有时候将子元素插入到 DOM 节点中的不同位置也是有好处的：

render() {
  // React 并*没有*创建一个新的 div。它只是把子元素渲染到 `domNode` 中。
  // `domNode` 是一个可以在任何位置的有效 DOM 节点。
  return ReactDOM.createPortal(
    this.props.children,
    domNode
  );
}
</code></pre> 
 <h3>H. 其他</h3> 
 <p>与第三方库协同、深入JSX、性能优化：这里就先不深入学习了，边用边掌握吧！当然，以上讲的各个知识点都需要通过实践来不断深入理解。</p> 
</article>
                            </div>
                        </div>
                    </div>
                    <!--PC和WAP自适应版-->
                    <div id="SOHUCS" sid="1711292817734709248"></div>
                    <script type="text/javascript" src="/views/front/js/chanyan.js"></script>
                    <!-- 文章页-底部 动态广告位 -->
                    <div class="youdao-fixed-ad" id="detail_ad_bottom"></div>
                </div>
                <div class="col-md-3">
                    <div class="row" id="ad">
                        <!-- 文章页-右侧1 动态广告位 -->
                        <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_1"> </div>
                        </div>
                        <!-- 文章页-右侧2 动态广告位 -->
                        <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_2"></div>
                        </div>
                        <!-- 文章页-右侧3 动态广告位 -->
                        <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_3"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(【React】初学高阶指引)</h4>
        <div id="paradigm-article-related">
            <div class="recommend-post mb30">
                <ul class="widget-links">
                    <li><a href="/article/1892600377589690368.htm"
                           title="鸿蒙初学者学习手册(HarmonyOSNext_API14)_组件截图（@ohos.arkui.componentSnapshot (组件截图) ）" target="_blank">鸿蒙初学者学习手册(HarmonyOSNext_API14)_组件截图（@ohos.arkui.componentSnapshot (组件截图) ）</a>
                        <span class="text-muted">余多多_zZ</span>
<a class="tag" taget="_blank" href="/search/harmonyos/1.htm">harmonyos</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BA/1.htm">华为</a><a class="tag" taget="_blank" href="/search/%E9%B8%BF%E8%92%99/1.htm">鸿蒙</a><a class="tag" taget="_blank" href="/search/%E9%B8%BF%E8%92%99%E7%B3%BB%E7%BB%9F/1.htm">鸿蒙系统</a>
                        <div>前言：这个模块可以截取组件的图片，无论组件是否已加载。截图只能拍到组件本身的大小区域。如果组件或其子组件画得超出了自己的区域，超出的部分不会出现在截图中。截图不会拍到与当前组件平级的（兄弟）组件。模块简介和注意：-XComponent场景建议：如果你正在开发一个视频播放器，应该直接从视频画面获取图片，而不是使用组件的截图功能。-组件截图注意事项：如果有一个按钮，但按钮周围有空白，截图时会显示这些空</div>
                    </li>
                    <li><a href="/article/1892509708212826112.htm"
                           title="「2024 年度技术精华盘点」IvorySQL & PostgreSQL 技术干货全解析！" target="_blank">「2024 年度技术精华盘点」IvorySQL & PostgreSQL 技术干货全解析！</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>
                        <div>2024年，IvorySQL公众号持续输出高质量技术内容，涵盖PostgreSQL核心技术解析和IvorySQL创新实践两大方向。无论您是数据库领域的初学者，还是经验丰富的开发者，这些干货文章都能为您带来新的启发与实用价值。现在，让我们一起回顾这些精彩内容，探索数据库技术的无限可能！PostgreSQL技术干货PostgreSQL16中的新增功能：双向逻辑复制想要在多主数据库间实现无缝同步？Pos</div>
                    </li>
                    <li><a href="/article/1892498835721220096.htm"
                           title="探索单片机世界的音乐之旅 —— 51单片机简易电子琴项目解析" target="_blank">探索单片机世界的音乐之旅 —— 51单片机简易电子琴项目解析</a>
                        <span class="text-muted">蔡松宽</span>

                        <div>探索单片机世界的音乐之旅——51单片机简易电子琴项目解析电子琴.rar项目地址:https://gitcode.com/open-source-toolkit/67c65项目概况：旋律与科技的融合在浩瀚的电子海洋里，51单片机始终是那座引领初学者进入嵌入式开发殿堂的桥梁。51单片机实战之简易电子琴项目，正是专为此而生的一盏明灯。它不仅是技术实践的绝佳示例，更是每一位电子爱好者发掘硬件音乐潜能的钥匙</div>
                    </li>
                    <li><a href="/article/1892474879861649408.htm"
                           title="探索 TypeScript Redux：构建大规模JavaScript应用的终极指南" target="_blank">探索 TypeScript Redux：构建大规模JavaScript应用的终极指南</a>
                        <span class="text-muted">柳旖岭</span>

                        <div>探索TypeScriptRedux：构建大规模JavaScript应用的终极指南去发现同类优质开源项目:https://gitcode.com/在当今快速发展的前端开发领域中，组合正确工具集来应对复杂性和扩展性挑战至关重要。今天，我们将深入了解一个令人兴奋的开源项目——TypeScriptRedux，它结合了TypeScript、JSPM、typings、React和Redux的强大功能，为开发者</div>
                    </li>
                    <li><a href="/article/1892466933626892288.htm"
                           title="DeepSeek如何重塑我的编程学习：计算机新生的AI实践" target="_blank">DeepSeek如何重塑我的编程学习：计算机新生的AI实践</a>
                        <span class="text-muted">EnigmaCoder</span>
<a class="tag" taget="_blank" href="/search/DeepSeek/1.htm">DeepSeek</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a>
                        <div>目录前言邂逅DeepSeek：从困惑到惊喜初学编程的困境DeepSeek的优势️DeepSeek在编程学习中的运用注释算法逐步分析调试帮助跨语言迁移学习AI时代学习方法论革新知识获取方式转变新型学习能力培养反思与展望反思展望总结前言大家好！我是EnigmaCoder，本文我将介绍我的AI编程学习之旅。春节期间，DeepSeek横空出世，迅速登顶热榜。它功能强大，精准答疑、高效创作，瞬间点燃大众热情</div>
                    </li>
                    <li><a href="/article/1892463022924951552.htm"
                           title="利用Beautiful Soup和Pandas进行网页数据抓取与清洗处理实战" target="_blank">利用Beautiful Soup和Pandas进行网页数据抓取与清洗处理实战</a>
                        <span class="text-muted">傻啦嘿哟</span>
<a class="tag" taget="_blank" href="/search/pandas/1.htm">pandas</a>
                        <div>目录一、准备工作二、抓取网页数据三、数据清洗四、数据处理五、保存数据六、完整代码示例七、总结在数据分析和机器学习的项目中，数据的获取、清洗和处理是非常关键的步骤。今天，我们将通过一个实战案例，演示如何利用Python中的BeautifulSoup库进行网页数据抓取，并使用Pandas库进行数据清洗和处理。这个案例不仅适合初学者，也能帮助有一定经验的朋友快速掌握这两个强大的工具。一、准备工作在开始之</div>
                    </li>
                    <li><a href="/article/1892431724265140224.htm"
                           title="React学习笔记（组件通信）_千峰教育 react" target="_blank">React学习笔记（组件通信）_千峰教育 react</a>
                        <span class="text-muted">m0_54846402</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/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a>
                        <div>reduxprinciple-+//定义一个dispatch的方法，接收到动作之后，自动调用constdispatch=(action)=>{changeState(action)renderCount(countState)}```创建createStore方法Reduxprinciple02reduxprinciple-+//定义一个方法，用于集中管理state和dispatchconstcr</div>
                    </li>
                    <li><a href="/article/1892427427007754240.htm"
                           title="PSINS工具箱函数介绍——ggnss（ggpsvars+gbdvars+gglovars）" target="_blank">PSINS工具箱函数介绍——ggnss（ggpsvars+gbdvars+gglovars）</a>
                        <span class="text-muted">MATLAB卡尔曼</span>
<a class="tag" taget="_blank" href="/search/PSINS%E5%87%BD%E6%95%B0/1.htm">PSINS函数</a><a class="tag" taget="_blank" href="/search/matlab/1.htm">matlab</a><a class="tag" taget="_blank" href="/search/PSINS/1.htm">PSINS</a>
                        <div>文章目录关于工具箱工具箱概述学习路径指南GNSS参数初始化函数`ggnss`函数功能参数体系结构典型应用场景系统参数初始化操作指南执行流程运行结果解析函数源码深度解析代码架构扩展开发建议关于工具箱kfinit是kf的参数初始化函数，用于初始化滤波参数本文所述的代码需要基于PSINS工具箱，工具箱的讲解：PSINS初学指导：https://blog.csdn.net/callmeup/article</div>
                    </li>
                    <li><a href="/article/1892404728181092352.htm"
                           title="React 渲染 Flash 接口数据" target="_blank">React 渲染 Flash 接口数据</a>
                        <span class="text-muted">ox0080</span>
<a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/%E5%8C%97%E6%BC%82%2B%E6%BB%B4%E6%BB%B4%E5%87%BA%E8%A1%8C/1.htm">北漂+滴滴出行</a><a class="tag" taget="_blank" href="/search/VIP/1.htm">VIP</a><a class="tag" taget="_blank" href="/search/%E6%BF%80%E5%8A%B1/1.htm">激励</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</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>1.后端Python代码使用Flask创建多个接口，每个接口返回不同的数据，并使用自定义装饰器来绑定路由。代码：#app.pyfromflaskimportFlask,jsonifyapp=Flask(__name__)defapi_route(route,methods=['GET']):"""自定义装饰器，用于将函数与HTTP路由绑定"""defdecorator(func):app.rout</div>
                    </li>
                    <li><a href="/article/1892398803407925248.htm"
                           title="部署前端项目2" target="_blank">部署前端项目2</a>
                        <span class="text-muted">augenstern416</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>前端项目的部署是将开发完成的前端代码发布到服务器或云平台，使其能够通过互联网访问。以下是前端项目部署的常见步骤和工具：1.准备工作在部署之前，确保项目已经完成以下步骤：代码优化：压缩JavaScript、CSS和图片文件，减少文件体积。环境配置：区分开发环境和生产环境（如API地址、环境变量等）。测试：确保项目在本地测试通过，没有明显Bug。2.部署流程1.构建项目大多数前端项目（如React、V</div>
                    </li>
                    <li><a href="/article/1892306631119663104.htm"
                           title="vue中nextTick函数和react类似实现" target="_blank">vue中nextTick函数和react类似实现</a>
                        <span class="text-muted">向画</span>
<a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</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>Vue3基本用法：import{nextTick}from'vue';//全局调用nextTick(()=>{//在下一个DOM更新循环后执行的代码});//在组件内部调用setup(){asyncfunctionhandleUpdate(){//修改数据...awaitnextTick();//在数据引发的DOM更新完成后执行的代码}}nextTick函数现在作为vue包的一个导出成员，需要显式</div>
                    </li>
                    <li><a href="/article/1892301947768205312.htm"
                           title="江科大51单片机学习笔记（1）" target="_blank">江科大51单片机学习笔记（1）</a>
                        <span class="text-muted">悠闲漫步者</span>
<a class="tag" taget="_blank" href="/search/51%E5%8D%95%E7%89%87%E6%9C%BA/1.htm">51单片机</a><a class="tag" taget="_blank" href="/search/51%E5%8D%95%E7%89%87%E6%9C%BA/1.htm">51单片机</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a>
                        <div>点亮一个LEDLED介绍中文名：发光二极管外文名：LightEmittingDiode简称：LED用途：照明、广告灯、指引灯、屏幕。如果想让LED发光，需要让发光二极管两端产生电位差。LED模块中串并联电阻是为了保护电路（限流）电阻的运算(上图电阻中所标注)：102(1010^2=1000=1K)473(4710^3=47000=47K)1001(100*10^1=1000=1K)VCC：电源正极</div>
                    </li>
                    <li><a href="/article/1892267275638075392.htm"
                           title="electron学习笔记" target="_blank">electron学习笔记</a>
                        <span class="text-muted">weixin_46452138</span>
<a class="tag" taget="_blank" href="/search/electron/1.htm">electron</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
                        <div>electron个人学习笔记一、electron简单了解Electron是一个跨平台的、基于Web前端技术的桌面GUI应用程序开发框架。可以使用HTML、CSS来绘制界面和控制布局，使用JavaScript来控制用户行为和业务逻辑，使用Node.js来通信、处理音频视频等，几乎所有的Web前端技术和框架（jQuery、Vue、React、Angular等）都可以应用到桌面GUI开发中。二、开发前基</div>
                    </li>
                    <li><a href="/article/1892256807733227520.htm"
                           title="React——setState 是同步还是异步问题" target="_blank">React——setState 是同步还是异步问题</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>这篇是为了了解清楚setState的更新机制，有人理解setState方法是异步的，但这个是错误的！！setState方法是异步的嘛？//从这里我们可以看到，打印出来是1，会以为setState是异步的this.state={count:1}this.setState({count:this.state.count+1})console.log(this.state.count)//1我们试下看，</div>
                    </li>
                    <li><a href="/article/1892243459931172864.htm"
                           title="本地运行 DeepSeek-R1 的成本究竟多高？" target="_blank">本地运行 DeepSeek-R1 的成本究竟多高？</a>
                        <span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AFjavascript/1.htm">前端javascript</a>
                        <div>ReactHook深入浅出CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读本地运行DeepSeek-R1的成本究竟多高？DeepSeek让人们对大规模生成式模型的追求更进一步，甚至有人想在本地跑下规模高达671B参数的版本。但要在家里开这种“巨无霸”，可不是闹着玩的：光是推理就对硬件提出了非常高的要求。这篇文章将大致拆解一下，如果真想在个人电脑上运行DeepSeek-R1，可能需</div>
                    </li>
                    <li><a href="/article/1892243458681270272.htm"
                           title="构建 Next.js 应用时的安全保障与风险防范措施" target="_blank">构建 Next.js 应用时的安全保障与风险防范措施</a>
                        <span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AFjavascript/1.htm">前端javascript</a>
                        <div>ReactHook深入浅出CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读在Web应用开发过程中，确保应用的安全性至关重要，这不仅能保护用户数据，还能防止应用本身遭受各种安全攻击。Next.js作为一款备受欢迎的React框架，内置了许多安全功能和推荐做法，但开发者仍需清楚地了解潜在的安全隐患，并采取合适的防范策略。一、Next.js安全问题概述尽管Next.js为构建安全应用提</div>
                    </li>
                    <li><a href="/article/1892218070261362688.htm"
                           title="一文说透网络安全专业的就业方向" target="_blank">一文说透网络安全专业的就业方向</a>
                        <span class="text-muted">系统架构师M</span>
<a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/1.htm">网络安全</a><a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a>
                        <div>前言：近年来，随着国家对网络安全战略地位的高度重视和“云、大、物、移、智”等新兴信息技术的高速发展，我国对网络安全人才的需求也是越来越大。根据相关数据显示，该行业的缺口已经高达50万至100万人，这远远无法满足市场的需求。因此，网络安全成为了最近几年的热门专业，目前已经有近200所院校开设了网络安全相关专业。那么，对于有志于从事该行业的小白们，网络安全专业需要掌握哪些技能呢？初学者对于个人发展的选</div>
                    </li>
                    <li><a href="/article/1892206348846821376.htm"
                           title="从零到入门：人工智能学习路径全解析" target="_blank">从零到入门：人工智能学习路径全解析</a>
                        <span class="text-muted">这题有点难度</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%AD%A6%E4%B9%A0/1.htm">学习</a>
                        <div>一、打破迷雾：重新认识人工智能人工智能（AI）早已不再是科幻电影中的专属概念，而是渗透到我们生活的方方面面。从手机里的语音助手到电商平台的推荐系统，从自动驾驶到医疗影像分析，AI技术正在重塑人类社会的运行方式。对于初学者而言，建立正确的认知框架至关重要：1.技术图谱解析：机器学习（ML）：AI的核心驱动力，使计算机具备从数据中学习的能力深度学习（DL）：基于神经网络的进阶技术，擅长处理图像、语音等</div>
                    </li>
                    <li><a href="/article/1892183773232033792.htm"
                           title="redux、react-redux、redux-thunk、redux-saga对比" target="_blank">redux、react-redux、redux-thunk、redux-saga对比</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/redux/1.htm">redux</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>reduxredux工作流程示意图actions函数形式，返回action对象，通常具有type属性。负责指令的生成，页面通过store.dispatch(action)向store发送数据修改的请求。reducers一个纯函数，接收两个参数(previousState,action)第一个表示修改之前的state的值，action是上一步页面通过store.dispatch(action)向st</div>
                    </li>
                    <li><a href="/article/1892181126793981952.htm"
                           title="React学习笔记04" target="_blank">React学习笔记04</a>
                        <span class="text-muted">充气大锤</span>
<a class="tag" taget="_blank" href="/search/React%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/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%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>一、理解组件通信组件通信就是组件间的数据传递，根据组件嵌套关系的不同，有不同的通信方法。在Vue中组件通信是我们组件间传递数据的一种最常用的方法，我们在Vue中使用props来实现父传子，用$emit实现子传父，在React中如何实现呢？1.1、父传子：1、父组件传递数据：在子组件标签身上绑定属性2、子组件接收数据：props的参数functionSon(props){return{props.n</div>
                    </li>
                    <li><a href="/article/1892145699160649728.htm"
                           title="【网络安全 | 开发】全网最详细Go笔记（3w字总结）" target="_blank">【网络安全 | 开发】全网最详细Go笔记（3w字总结）</a>
                        <span class="text-muted">秋说</span>
<a class="tag" taget="_blank" href="/search/go/1.htm">go</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/1.htm">网络安全</a>
                        <div>写在前面鉴于全网Go语言知识点的总结分散难懂、良莠不齐，为了避免初学者少走弯路，更好更快地掌握Go知识，博主特地对其总结分享。文章目录写在前面Go语言概念语言特色Go语言用途Go语言环境安装Go语言基础组成GO语言基础语法Go标记行分隔符字符串连接空格格式化字符串Go语言数据类型Go语言变量局部变量和全局变量Go语言常量Go语言运算符Go语言条件语句Go语言循环语句Go语言函数Go语言数组Go语言</div>
                    </li>
                    <li><a href="/article/1892121230220259328.htm"
                           title="观望=没有！" target="_blank">观望=没有！</a>
                        <span class="text-muted">郭顺发_</span>
<a class="tag" taget="_blank" href="/search/%E5%8D%9A%E5%AE%A2/1.htm">博客</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a>
                        <div>“兄弟，Java现在学还有前途吗？”“前端是不是饱和了？”——每天打开私信，这类问题能占大半。我的回复永远只有一句：“如果你非要等我说‘行’才敢行动，那答案已经不重要了。”#技术人总在纠结“能不能”一直在等权威认证有人私信问“学Java还能找到工作吗”，自己却从来没打开过招聘网站——实际上，2024年Java岗位仍占后端需求的百分之四五十。考虑技术风向新手在Vue/React/Svelte之间反复</div>
                    </li>
                    <li><a href="/article/1892119210797101056.htm"
                           title=".NET 6应用程序适配国产银河麒麟V10系统随记" target="_blank">.NET 6应用程序适配国产银河麒麟V10系统随记</a>
                        <span class="text-muted">虚幻私塾</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a><a class="tag" taget="_blank" href="/search/%E8%AE%A1%E7%AE%97%E6%9C%BA/1.htm">计算机</a>
                        <div>优质资源分享学习路线指引（点击解锁）知识定位人群定位Python实战微信订餐小程序进阶级本课程是pythonflask+微信小程序的完美结合，从项目搭建到腾讯云部署上线，打造一个全栈订餐系统。Python量化交易实战入门级手把手带你打造一个易扩展、更安全、效率更高的量化交易系统最近想在麒麟系统上运行.NET6程序，经过一番折腾最终完成了，简单记录一下。目标系统:CPU:aarch64架构（ARM6</div>
                    </li>
                    <li><a href="/article/1892077700139511808.htm"
                           title="RxJava 和Kotlin协程（Coroutines）" target="_blank">RxJava 和Kotlin协程（Coroutines）</a>
                        <span class="text-muted">Marblog</span>
<a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/Android/1.htm">Android</a><a class="tag" taget="_blank" href="/search/rxjava/1.htm">rxjava</a><a class="tag" taget="_blank" href="/search/kotlin/1.htm">kotlin</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a>
                        <div>RxJava和协程（Coroutines）都是处理异步编程和并发任务的强大工具，但它们的设计理念、使用方式和应用场景有所不同。以下是它们之间的主要区别：1.设计理念与核心概念RxJava：基于响应式流：RxJava是基于反应式编程（ReactiveProgramming）理念的库，它主要用于处理异步数据流和事件流。RxJava提供了丰富的操作符来对数据流进行组合、变换、过滤、错误处理等操作。数据流</div>
                    </li>
                    <li><a href="/article/1892071394234134528.htm"
                           title="linux第八章 git连接本地仓库和gitee" target="_blank">linux第八章 git连接本地仓库和gitee</a>
                        <span class="text-muted">ᰔᩚ. 一怀明月ꦿ</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/git/1.htm">git</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a>
                        <div>博主主页：@ᰔᩚ.一怀明月ꦿ❤️‍专栏系列：线性代数，C初学者入门训练，题解C，C的使用文章，「初学」C++，linux座右铭：“不要等到什么都没有了，才下定决心去做”大家觉不错的话，就恳求大家点点关注，点点小爱心，指点指点目录gitgit的作用git的知识点linux上远程链接gitee第一步：linux中安装git第二步：新建git目录第三步：链接仓库1）在gitee中找到仓库的HTTPS2）</div>
                    </li>
                    <li><a href="/article/1892065588717613056.htm"
                           title="Python 爬虫功能介绍" target="_blank">Python 爬虫功能介绍</a>
                        <span class="text-muted">chengxuyuan1213_</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E7%88%AC%E8%99%AB/1.htm">网络爬虫</a>
                        <div>在当今互联网信息爆炸的时代，数据的获取与分析成为了各行各业不可或缺的一部分。Python，作为一种简洁、易读且功能强大的编程语言，凭借其丰富的库和框架，在数据抓取（即网络爬虫）领域展现了极大的优势。本文旨在介绍Python爬虫的基础功能，帮助初学者快速入门，理解爬虫的基本工作原理及常用技术。一、什么是网络爬虫网络爬虫（WebCrawler），又称网络蜘蛛（WebSpider）或网络机器人（WebR</div>
                    </li>
                    <li><a href="/article/1892043269215416320.htm"
                           title="符号学习初学代码——从开普勒第三定律到万有引力定律" target="_blank">符号学习初学代码——从开普勒第三定律到万有引力定律</a>
                        <span class="text-muted">Merci美滋滋</span>
<a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">机器学习</a>
                        <div>备注PINN——physicsinformedneuralnetworkSR——symbolicregression代码详细分析见评论区链接一、SR_testimportnumpyasnpT=np.array([0.241,0.615,1,1.881,11.862]).reshape(-1,1)R=np.array([0.381,0.723,1,1.524,5.023]).reshape(-1,1</div>
                    </li>
                    <li><a href="/article/1892032558619750400.htm"
                           title="轻松上手：2025年无服务器架构教程" target="_blank">轻松上手：2025年无服务器架构教程</a>
                        <span class="text-muted">zxzy_org</span>
<a class="tag" taget="_blank" href="/search/serverless/1.htm">serverless</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/%E4%BA%91%E5%8E%9F%E7%94%9F/1.htm">云原生</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a>
                        <div>无服务器架构（ServerlessArchitecture）已经成为2025年云计算领域的重要趋势之一。与传统服务器架构不同，无服务器架构让开发者专注于代码本身，而无需管理底层的服务器硬件或操作系统。这种架构的核心理念是按需计算，用户仅需为实际使用的资源付费。对于初学者来说，无服务器架构的主要优势在于它的易用性和高效性。首先，开发者无需担心服务器的部署和运维工作，这大大减少了学习曲线。以AWSLa</div>
                    </li>
                    <li><a href="/article/1892030920723066880.htm"
                           title="高阶C语言|文件操作——你不知道的文件小秘密" target="_blank">高阶C语言|文件操作——你不知道的文件小秘密</a>
                        <span class="text-muted">我想吃余</span>
<a class="tag" taget="_blank" href="/search/C%E8%AF%AD%E8%A8%80%E7%AF%87/1.htm">C语言篇</a><a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                        <div>欢迎讨论：在阅读过程中有任何疑问，欢迎在评论区留言，我们一起交流学习！点赞、收藏与分享：如果你觉得这篇文章对你有帮助，记得点赞、收藏，并分享给更多对C语言感兴趣的朋友文章目录文件，究竟是什么鬼？文件指针——你的文件“朋友”文件打开的那些“门道”常用的顺序输入输出函数——让你有条不紊的使用文件流的含义——数据的“大马路”fseek和ftell——让你随意“跳跃”文件rewind——倒带重放，穿越回文</div>
                    </li>
                    <li><a href="/article/1892019823433543680.htm"
                           title="2025年前端工程师职业发展的系统性应聘规划" target="_blank">2025年前端工程师职业发展的系统性应聘规划</a>
                        <span class="text-muted">IT木昜</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>2025年前端工程师职业发展的系统性应聘规划，结合技术趋势、企业需求和竞争力提升策略，分为技术栈学习、项目实战、求职策略三部分：一、2025年前端技术趋势与核心技能1.必学技术栈（基础+进阶）层级技术方向具体技能基础核心语言-HTML6新特性（预测）、CSS容器查询、TypeScript5.0+主流框架React22+（ServerComponents）、Vue4.0（VaporMode）、Sve</div>
                    </li>
                                <li><a href="/article/37.htm"
                                       title="ASM系列五 利用TreeApi 解析生成Class" target="_blank">ASM系列五 利用TreeApi 解析生成Class</a>
                                    <span class="text-muted">lijingyao8206</span>
<a class="tag" taget="_blank" href="/search/ASM/1.htm">ASM</a><a class="tag" taget="_blank" href="/search/%E5%AD%97%E8%8A%82%E7%A0%81%E5%8A%A8%E6%80%81%E7%94%9F%E6%88%90/1.htm">字节码动态生成</a><a class="tag" taget="_blank" href="/search/ClassNode/1.htm">ClassNode</a><a class="tag" taget="_blank" href="/search/TreeAPI/1.htm">TreeAPI</a>
                                    <div>   前面CoreApi的介绍部分基本涵盖了ASMCore包下面的主要API及功能，其中还有一部分关于MetaData的解析和生成就不再赘述。这篇开始介绍ASM另一部分主要的Api。TreeApi。这一部分源码是关联的asm-tree-5.0.4的版本。 
         在介绍前，先要知道一点， Tree工程的接口基本可以完</div>
                                </li>
                                <li><a href="/article/164.htm"
                                       title="链表树——复合数据结构应用实例" target="_blank">链表树——复合数据结构应用实例</a>
                                    <span class="text-muted">bardo</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/%E6%A0%91%E5%9E%8B%E7%BB%93%E6%9E%84/1.htm">树型结构</a><a class="tag" taget="_blank" href="/search/%E8%A1%A8%E7%BB%93%E6%9E%84%E8%AE%BE%E8%AE%A1/1.htm">表结构设计</a><a class="tag" taget="_blank" href="/search/%E9%93%BE%E8%A1%A8/1.htm">链表</a><a class="tag" taget="_blank" href="/search/%E8%8F%9C%E5%8D%95%E6%8E%92%E5%BA%8F/1.htm">菜单排序</a>
                                    <div>我们清楚：数据库设计中，表结构设计的好坏，直接影响程序的复杂度。所以，本文就无限级分类（目录）树与链表的复合在表设计中的应用进行探讨。当然，什么是树，什么是链表，这里不作介绍。有兴趣可以去看相关的教材。 
需求简介： 
经常遇到这样的需求，我们希望能将保存在数据库中的树结构能够按确定的顺序读出来。比如，多级菜单、组织结构、商品分类。更具体的，我们希望某个二级菜单在这一级别中就是第一个。虽然它是最后</div>
                                </li>
                                <li><a href="/article/291.htm"
                                       title="为啥要用位运算代替取模呢" target="_blank">为啥要用位运算代替取模呢</a>
                                    <span class="text-muted">chenchao051</span>
<a class="tag" taget="_blank" href="/search/%E4%BD%8D%E8%BF%90%E7%AE%97/1.htm">位运算</a><a class="tag" taget="_blank" href="/search/%E5%93%88%E5%B8%8C/1.htm">哈希</a><a class="tag" taget="_blank" href="/search/%E6%B1%87%E7%BC%96/1.htm">汇编</a>
                                    <div>  
  在hash中查找key的时候，经常会发现用&取代%，先看两段代码吧， 
  
  JDK6中的HashMap中的indexFor方法： 
    /**
     * Returns index for hash code h.
     */
    static int indexFor(int h, int length) {
</div>
                                </li>
                                <li><a href="/article/418.htm"
                                       title="最近的情况" target="_blank">最近的情况</a>
                                    <span class="text-muted">麦田的设计者</span>
<a class="tag" taget="_blank" href="/search/%E7%94%9F%E6%B4%BB/1.htm">生活</a><a class="tag" taget="_blank" href="/search/%E6%84%9F%E6%82%9F/1.htm">感悟</a><a class="tag" taget="_blank" href="/search/%E8%AE%A1%E5%88%92/1.htm">计划</a><a class="tag" taget="_blank" href="/search/%E8%BD%AF%E8%80%83/1.htm">软考</a><a class="tag" taget="_blank" href="/search/%E6%83%B3/1.htm">想</a>
                                    <div>      今天是2015年4月27号 
     整理一下最近的思绪以及要完成的任务 
            1、最近在驾校科目二练车，每周四天，练三周。其实做什么都要用心，追求合理的途径解决。为</div>
                                </li>
                                <li><a href="/article/545.htm"
                                       title="PHP去掉字符串中最后一个字符的方法" target="_blank">PHP去掉字符串中最后一个字符的方法</a>
                                    <span class="text-muted">IT独行者</span>
<a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/%E5%AD%97%E7%AC%A6%E4%B8%B2/1.htm">字符串</a>
                                    <div>今天在PHP项目开发中遇到一个需求，去掉字符串中的最后一个字符 原字符串1,2,3,4,5,6, 去掉最后一个字符","，最终结果为1,2,3,4,5,6 代码如下： 
$str = "1,2,3,4,5,6,";
$newstr = substr($str,0,strlen($str)-1);
echo $newstr; </div>
                                </li>
                                <li><a href="/article/672.htm"
                                       title="hadoop在linux上单机安装过程" target="_blank">hadoop在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/hadoop/1.htm">hadoop</a>
                                    <div>1、安装JDK 
    jdk版本最好是1.6以上，可以使用执行命令java -version查看当前JAVA版本号，如果报命令不存在或版本比较低，则需要安装一个高版本的JDK，并在/etc/profile的文件末尾，根据本机JDK实际的安装位置加上以下几行： 
   export JAVA_HOME=/usr/java/jdk1.7.0_25  </div>
                                </li>
                                <li><a href="/article/799.htm"
                                       title="JAVA进阶----分布式事务的一种简单处理方法" target="_blank">JAVA进阶----分布式事务的一种简单处理方法</a>
                                    <span class="text-muted">无量</span>
<a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%B3%BB%E7%BB%9F%E4%BA%A4%E4%BA%92/1.htm">多系统交互</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E5%B8%83%E5%BC%8F/1.htm">分布式</a><a class="tag" taget="_blank" href="/search/%E4%BA%8B%E5%8A%A1/1.htm">事务</a>
                                    <div>每个方法都是原子操作： 
 
提供第三方服务的系统，要同时提供执行方法和对应的回滚方法 
 
A系统调用B,C,D系统完成分布式事务 
 
 
=========执行开始======== 
A.aa(); 
 
try { 
 B.bb(); 
} catch(Exception e) { 
 A.rollbackAa(); 
} 
 
try { 
 C.cc(); 
} catch(Excep</div>
                                </li>
                                <li><a href="/article/926.htm"
                                       title="安墨移动广 告：移动DSP厚积薄发 引领未来广 告业发展命脉" target="_blank">安墨移动广 告：移动DSP厚积薄发 引领未来广 告业发展命脉</a>
                                    <span class="text-muted">矮蛋蛋</span>
<a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a><a class="tag" taget="_blank" href="/search/%E4%BA%92%E8%81%94%E7%BD%91/1.htm">互联网</a>
                                    <div>　　“谁掌握了强大的DSP技术，谁将引领未来的广 告行业发展命脉。”2014年，移动广 告行业的热点非移动DSP莫属。各个圈子都在纷纷谈论，认为移动DSP是行业突破点，一时间许多移动广 告联盟风起云涌，竞相推出专属移动DSP产品。 
 
　　到底什么是移动DSP呢? 
 
　　DSP(Demand-SidePlatform)，就是需求方平台，为解决广 告主投放的各种需求，真正实现人群定位的精准广 </div>
                                </li>
                                <li><a href="/article/1053.htm"
                                       title="myelipse设置" target="_blank">myelipse设置</a>
                                    <span class="text-muted">alafqq</span>
<a class="tag" taget="_blank" href="/search/IP/1.htm">IP</a>
                                    <div>  在一个项目的完整的生命周期中，其维护费用，往往是其开发费用的数倍。因此项目的可维护性、可复用性是衡量一个项目好坏的关键。而注释则是可维护性中必不可少的一环。 
 
 
 
注释模板导入步骤  
 
 
 
安装方法： 
打开eclipse/myeclipse 
选择 window-->Preferences-->JAVA-->Code-->Code </div>
                                </li>
                                <li><a href="/article/1180.htm"
                                       title="java数组" target="_blank">java数组</a>
                                    <span class="text-muted">百合不是茶</span>
<a class="tag" taget="_blank" href="/search/java%E6%95%B0%E7%BB%84/1.htm">java数组</a>
                                    <div>java数组的   声明  创建  初始化；   java支持C语言 
   
  
数组中的每个数都有唯一的一个下标 
  一维数组的定义   声明：  int[] a = new int[3];声明数组中有三个数int[3]    
int[] a 中有三个数，下标从0开始，可以同过for来遍历数组中的数

</div>
                                </li>
                                <li><a href="/article/1307.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>
                                    <div>利用javascript读取表单数据，可以利用以下三种方法获取： 
1、通过表单ID属性：var a = document.getElementByIdx_x_x("id"); 
2、通过表单名称属性：var b = document.getElementsByName("name"); 
3、直接通过表单名字获取：var c = form.content.</div>
                                </li>
                                <li><a href="/article/1434.htm"
                                       title="探索JUnit4扩展：使用Theory" target="_blank">探索JUnit4扩展：使用Theory</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/JUnit/1.htm">JUnit</a><a class="tag" taget="_blank" href="/search/Theory/1.htm">Theory</a>
                                    <div>理论机制（Theory） 
一.为什么要引用理论机制（Theory） 
        当今软件开发中，测试驱动开发（TDD — Test-driven development）越发流行。为什么 TDD 会如此流行呢？因为它确实拥有很多优点，它允许开发人员通过简单的例子来指定和表明他们代码的行为意图。 
TDD 的优点： 
    &nb</div>
                                </li>
                                <li><a href="/article/1561.htm"
                                       title="[Spring Data Mongo一]Spring Mongo Template操作MongoDB" target="_blank">[Spring Data Mongo一]Spring Mongo Template操作MongoDB</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/template/1.htm">template</a>
                                    <div>什么是Spring Data Mongo 
Spring Data MongoDB项目对访问MongoDB的Java客户端API进行了封装，这种封装类似于Spring封装Hibernate和JDBC而提供的HibernateTemplate和JDBCTemplate，主要能力包括 
1. 封装客户端跟MongoDB的链接管理 
2. 文档-对象映射，通过注解:@Document(collectio</div>
                                </li>
                                <li><a href="/article/1688.htm"
                                       title="【Kafka八】Zookeeper上关于Kafka的配置信息" target="_blank">【Kafka八】Zookeeper上关于Kafka的配置信息</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/zookeeper/1.htm">zookeeper</a>
                                    <div>问题： 
1. Kafka的哪些信息记录在Zookeeper中 2. Consumer Group消费的每个Partition的Offset信息存放在什么位置 
3. Topic的每个Partition存放在哪个Broker上的信息存放在哪里 
4. Producer跟Zookeeper究竟有没有关系？没有关系！！！ 
  
//consumers、config、brokers、cont</div>
                                </li>
                                <li><a href="/article/1815.htm"
                                       title="java OOM内存异常的四种类型及异常与解决方案" target="_blank">java OOM内存异常的四种类型及异常与解决方案</a>
                                    <span class="text-muted">ronin47</span>
<a class="tag" taget="_blank" href="/search/java+OOM+%E5%86%85%E5%AD%98%E5%BC%82%E5%B8%B8/1.htm">java OOM 内存异常</a>
                                    <div>      　OOM异常的四种类型： 
　　　 
　　一：　StackOverflowError ：通常因为递归函数引起（死递归，递归太深）。-Xss 128k 一般够用。 
  
  　  二：　out Of memory: PermGen Space：通常是动态类大多，比如web 服务器自动更新部署时引起。-Xmx</div>
                                </li>
                                <li><a href="/article/1942.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>20120422更新： 
对链表中部分节点进行反转操作，这些节点相隔k个： 
0->1->2->3->4->5->6->7->8->9 
k=2 
8->1->6->3->4->5->2->7->0->9 
注意1 3 5 7 9 位置是不变的。 
解法： 
将链表拆成两部分： 
a.0-&</div>
                                </li>
                                <li><a href="/article/2069.htm"
                                       title="Netty源码学习-DelimiterBasedFrameDecoder" target="_blank">Netty源码学习-DelimiterBasedFrameDecoder</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> 看DelimiterBasedFrameDecoder的API，有举例： 
 接收到的ChannelBuffer如下： 
 
 +--------------+
 | ABC\nDEF\r\n |
 +--------------+ 
 经过DelimiterBasedFrameDecoder(Delimiters.lineDelimiter())之后，得到： 
 
 +-----+----</div>
                                </li>
                                <li><a href="/article/2196.htm"
                                       title="linux的一些命令 -查看cc攻击-网口ip统计等" target="_blank">linux的一些命令 -查看cc攻击-网口ip统计等</a>
                                    <span class="text-muted">hotsunshine</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a>
                                    <div>Linux判断CC攻击命令详解 
2011年12月23日 ⁄ 安全 ⁄ 暂无评论 
查看所有80端口的连接数 
 
 
netstat -nat|grep -i '80'|wc -l
对连接的IP按连接数量进行排序

netstat -ntu | awk '{print $5}' | cut -d: -f1 | sort | uniq -c | sort -n
查看TCP连接状态

n</div>
                                </li>
                                <li><a href="/article/2323.htm"
                                       title="Spring获取SessionFactory" target="_blank">Spring获取SessionFactory</a>
                                    <span class="text-muted">ctrain</span>
<a class="tag" taget="_blank" href="/search/sessionFactory/1.htm">sessionFactory</a>
                                    <div>
String sql = "select sysdate from dual";
		
WebApplicationContext wac = ContextLoader.getCurrentWebApplicationContext(); 
String[] names = wac.getBeanDefinitionNames();
for(int i=0; i&</div>
                                </li>
                                <li><a href="/article/2450.htm"
                                       title="Hive几种导出数据方式" target="_blank">Hive几种导出数据方式</a>
                                    <span class="text-muted">daizj</span>
<a class="tag" taget="_blank" href="/search/hive/1.htm">hive</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%AF%BC%E5%87%BA/1.htm">数据导出</a>
                                    <div>Hive几种导出数据方式 
     
1.拷贝文件 
  
如果数据文件恰好是用户需要的格式，那么只需要拷贝文件或文件夹就可以。 
hadoop fs –cp source_path target_path 
  
2.导出到本地文件系统 
  
--不能使用insert into local directory来导出数据，会报错 
--只能使用</div>
                                </li>
                                <li><a href="/article/2577.htm"
                                       title="编程之美" target="_blank">编程之美</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><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 手册。希望下面的代码，会更有利于对递归以及静态变量的理解 
  
header("Content-type: text/plain");
function static_function () {
    static $i = 0;
    if ($i++ < 1</div>
                                </li>
                                <li><a href="/article/2704.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>转自：http://www.2cto.com/kf/201401/272336.html 
我们不管在开发一个项目或者使用别人的项目，都有用户登录功能，为了让用户的体验效果更好，我们通常会做一个功能，叫做保存用户，这样做的目地就是为了让用户下一次再使用该程序不会重新输入用户名和密码，这里我使用3种方式来存储用户名和密码 
1、通过普通 的txt文本存储 
2、通过properties属性文件进行存</div>
                                </li>
                                <li><a href="/article/2831.htm"
                                       title="Oracle 复习笔记之同义词" target="_blank">Oracle 复习笔记之同义词</a>
                                    <span class="text-muted">eksliang</span>
<a class="tag" taget="_blank" href="/search/Oracle+%E5%90%8C%E4%B9%89%E8%AF%8D/1.htm">Oracle 同义词</a><a class="tag" taget="_blank" href="/search/Oracle+synonym/1.htm">Oracle synonym</a>
                                    <div>转载请出自出处：http://eksliang.iteye.com/blog/2098861 
1.什么是同义词 
      同义词是现有模式对象的一个别名。 
      概念性的东西，什么是模式呢？创建一个用户，就相应的创建了 一个模式。模式是指数据库对象，是对用户所创建的数据对象的总称。模式对象包括表、视图、索引、同义词、序列、过</div>
                                </li>
                                <li><a href="/article/2958.htm"
                                       title="Ajax案例" target="_blank">Ajax案例</a>
                                    <span class="text-muted">gongmeitao</span>
<a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a><a class="tag" taget="_blank" href="/search/jsp/1.htm">jsp</a>
                                    <div>数据库采用Sql Server2005 
项目名称为:Ajax_Demo 
1.com.demo.conn包 
package com.demo.conn; 
import java.sql.Connection;import java.sql.DriverManager;import java.sql.SQLException; 
//获取数据库连接的类public class DBConnec</div>
                                </li>
                                <li><a href="/article/3085.htm"
                                       title="ASP.NET中Request.RawUrl、Request.Url的区别" target="_blank">ASP.NET中Request.RawUrl、Request.Url的区别</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/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/C%23/1.htm">C#</a><a class="tag" taget="_blank" href="/search/asp.net/1.htm">asp.net</a><a class="tag" taget="_blank" href="/search/hovertree/1.htm">hovertree</a>
                                    <div>  
如果访问的地址是：http://h.keleyi.com/guestbook/addmessage.aspx?key=hovertree%3C&n=myslider#zonemenu那么Request.Url.ToString() 的值是：http://h.keleyi.com/guestbook/addmessage.aspx?key=hovertree<&</div>
                                </li>
                                <li><a href="/article/3212.htm"
                                       title="SVG 教程 （七）SVG 实例，SVG 参考手册" target="_blank">SVG 教程 （七）SVG 实例，SVG 参考手册</a>
                                    <span class="text-muted">天梯梦</span>
<a class="tag" taget="_blank" href="/search/svg/1.htm">svg</a>
                                    <div>SVG 实例   在线实例 
下面的例子是把SVG代码直接嵌入到HTML代码中。 
谷歌Chrome，火狐，Internet Explorer9，和Safari都支持。 
注意：下面的例子将不会在Opera运行，即使Opera支持SVG - 它也不支持SVG在HTML代码中直接使用。    SVG 实例 
SVG基本形状 
一个圆 
矩形 
不透明矩形 
一个矩形不透明2 
一个带圆角矩</div>
                                </li>
                                <li><a href="/article/3339.htm"
                                       title="事务管理" target="_blank">事务管理</a>
                                    <span class="text-muted">luyulong</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/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/%E4%BA%8B%E5%8A%A1/1.htm">事务</a>
                                    <div>事物管理 
 
spring事物的好处 
 
为不同的事物API提供了一致的编程模型 
支持声明式事务管理 
提供比大多数事务API更简单更易于使用的编程式事务管理API 
整合spring的各种数据访问抽象 
 
TransactionDefinition 
定义了事务策略 
 
int getIsolationLevel()得到当前事务的隔离级别 
 
READ_COMMITTED </div>
                                </li>
                                <li><a href="/article/3466.htm"
                                       title="基础数据结构和算法十一：Red-black binary search tree" target="_blank">基础数据结构和算法十一：Red-black binary search tree</a>
                                    <span class="text-muted">sunwinner</span>
<a class="tag" taget="_blank" href="/search/Algorithm/1.htm">Algorithm</a><a class="tag" taget="_blank" href="/search/Red-black/1.htm">Red-black</a>
                                    <div>  
The insertion algorithm for 2-3 trees just described is not difficult to understand; now, we will see that it is also not difficult to implement. We will consider a simple representation known</div>
                                </li>
                                <li><a href="/article/3593.htm"
                                       title="centos同步时间" target="_blank">centos同步时间</a>
                                    <span class="text-muted">stunizhengjia</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E9%9B%86%E7%BE%A4%E5%90%8C%E6%AD%A5%E6%97%B6%E9%97%B4/1.htm">集群同步时间</a>
                                    <div>做了集群，时间的同步就显得非常必要了。 以下是查到的如何做时间同步。 在CentOS 5不再区分客户端和服务器，只要配置了NTP，它就会提供NTP服务。 1)确认已经ntp程序包： # yum install ntp 2)配置时间源（默认就行，不需要修改） # vi /etc/ntp.conf server pool.ntp.o</div>
                                </li>
                                <li><a href="/article/3720.htm"
                                       title="ITeye 9月技术图书有奖试读获奖名单公布" target="_blank">ITeye 9月技术图书有奖试读获奖名单公布</a>
                                    <span class="text-muted">ITeye管理员</span>
<a class="tag" taget="_blank" href="/search/ITeye/1.htm">ITeye</a>
                                    <div>ITeye携手博文视点举办的9月技术图书有奖试读活动已圆满结束，非常感谢广大用户对本次活动的关注与参与。 9月试读活动回顾：http://webmaster.iteye.com/blog/2118112本次技术图书试读活动的优秀奖获奖名单及相应作品如下（优秀文章有很多，但名额有限，没获奖并不代表不优秀）：  
  
  
《NFC：Arduino、Andro</div>
                                </li>
                </ul>
            </div>
        </div>
    </div>

<div>
    <div class="container">
        <div class="indexes">
            <strong>按字母分类：</strong>
            <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a
                href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a
                href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a
                href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a
                href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a
                href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a
                href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a
                href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a
                href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a>
        </div>
    </div>
</div>
<footer id="footer" class="mb30 mt30">
    <div class="container">
        <div class="footBglm">
            <a target="_blank" href="/">首页</a> -
            <a target="_blank" href="/custom/about.htm">关于我们</a> -
            <a target="_blank" href="/search/Java/1.htm">站内搜索</a> -
            <a target="_blank" href="/sitemap.txt">Sitemap</a> -
            <a target="_blank" href="/custom/delete.htm">侵权投诉</a>
        </div>
        <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.
<!--            <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>-->
        </div>
    </div>
</footer>
<!-- 代码高亮 -->
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script>
<link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/>
<script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script>





</body>

</html>
【React】初学高阶指引

A. 无障碍辅助功能

A2. 语义化的HTML -- React Fragments

A3. 无障碍表单

A2. 语义化的HTML -- `React Fragments`
