【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/1938951662647439360.htm"
                           title="Python机器学习元学习库higher" target="_blank">Python机器学习元学习库higher</a>
                        <span class="text-muted">音程</span>
<a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%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><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>higher是一个用于元学习（Meta-Learning）和高阶导数（Higher-ordergradients）的Python库，专为PyTorch设计。它扩展了PyTorch的自动微分机制，使得在训练过程中可以动态地计算参数的梯度更新，并把这些更新过程纳入到更高阶的梯度计算中。一、主要用途higher主要用于以下场景：元学习（Meta-Learning）比如MAML（Model-Agnosti</div>
                    </li>
                    <li><a href="/article/1938940940920090624.htm"
                           title="Vivado使用误区与进阶【1.0】" target="_blank">Vivado使用误区与进阶【1.0】</a>
                        <span class="text-muted">BinaryStarXin</span>
<a class="tag" taget="_blank" href="/search/FPGA%E6%8A%80%E6%9C%AF%E6%B1%87%E6%80%BB%E5%88%86%E4%BA%AB4/1.htm">FPGA技术汇总分享4</a><a class="tag" taget="_blank" href="/search/FPGA%E6%8A%80%E6%9C%AF%E6%B1%87%E6%80%BB%E5%88%86%E4%BA%AB3/1.htm">FPGA技术汇总分享3</a><a class="tag" taget="_blank" href="/search/fpga%E5%BC%80%E5%8F%91/1.htm">fpga开发</a><a class="tag" taget="_blank" href="/search/%E7%A1%AC%E4%BB%B6%E5%B7%A5%E7%A8%8B/1.htm">硬件工程</a><a class="tag" taget="_blank" href="/search/dsp%E5%BC%80%E5%8F%91/1.htm">dsp开发</a><a class="tag" taget="_blank" href="/search/%E5%B5%8C%E5%85%A5%E5%BC%8F%E7%A1%AC%E4%BB%B6/1.htm">嵌入式硬件</a><a class="tag" taget="_blank" href="/search/Vivado/1.htm">Vivado</a><a class="tag" taget="_blank" href="/search/%E5%92%8C/1.htm">和</a><a class="tag" taget="_blank" href="/search/XDC/1.htm">XDC</a><a class="tag" taget="_blank" href="/search/Vivado/1.htm">Vivado</a><a class="tag" taget="_blank" href="/search/%E6%97%A5%E5%BF%97/1.htm">日志</a>
                        <div>UltraFAST™是Xilinx©在2013年底推出的一套设计方法学指导，旨在指引用户最大限度地利用现有资源，提升系统性能，降低风险，实现更快速且可预期的设计。面向Vivado®的UltraFAST方法学的主体是UG949文档，配合相应的Checklist，随Vivado版本同时更新，用户可以在Xilinx的主页上免费下载。目前，针对Vivado设计套件的UltraFAST中文版也已经上市，另外</div>
                    </li>
                    <li><a href="/article/1938930857570004992.htm"
                           title="基于STM32与ZigBee的智能指引车库系统设计" target="_blank">基于STM32与ZigBee的智能指引车库系统设计</a>
                        <span class="text-muted">科创工作室li</span>
<a class="tag" taget="_blank" href="/search/%E6%AF%95%E4%B8%9A%E8%AE%BE%E8%AE%A11/1.htm">毕业设计1</a><a class="tag" taget="_blank" href="/search/stm32/1.htm">stm32</a><a class="tag" taget="_blank" href="/search/%E5%B5%8C%E5%85%A5%E5%BC%8F%E7%A1%AC%E4%BB%B6/1.htm">嵌入式硬件</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E7%89%87%E6%9C%BA/1.htm">单片机</a>
                        <div>⭐资料具有原理图流程图PCB器件清单STM32与ZigBee的智能指引车库系统设计摘要：本文设计了一种基于STM32与ZigBee的智能指引车库系统。系统包含1台主机和3台从机，从机实时检测车位状况并发送给主机，主机显示3个车位的停车情况（满、无），并能简易引导车辆驶向空位，同时主机通过WiFi模块将数据上传至阿里云。该系统实现了车库车位的智能监测与引导，提高了车库管理的效率和便捷性。关键词：ST</div>
                    </li>
                    <li><a href="/article/1938908162694377472.htm"
                           title="基于 chat-uikit-react-native 实现一个 React Native 聊天 App" target="_blank">基于 chat-uikit-react-native 实现一个 React Native 聊天 App</a>
                        <span class="text-muted">qq_38405998</span>
<a class="tag" taget="_blank" href="/search/react/1.htm">react</a><a class="tag" taget="_blank" href="/search/native/1.htm">native</a><a class="tag" taget="_blank" href="/search/%E5%8D%B3%E6%97%B6%E9%80%9A%E4%BF%A1/1.htm">即时通信</a><a class="tag" taget="_blank" href="/search/typescript/1.htm">typescript</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/ios/1.htm">ios</a>
                        <div>一、前言本文分享了通过github源码快速实现一个聊天App。二、具体步骤Step1：配置开发环境如果您电脑没有ReactNative开发环境，请先按照ReactNative官网set-up-your-environment配置开发环境.Step2：下载源码Demo源码可前往github下载Step3：获取应用信息您需要前往腾讯云即时通讯官网创建并获取相关的应用信息，关于如何创建即时通信账号请点击</div>
                    </li>
                    <li><a href="/article/1938888240522129408.htm"
                           title="ref() 与 reactive()" target="_blank">ref() 与 reactive()</a>
                        <span class="text-muted">前端岳大宝</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6Vue/1.htm">前端框架Vue</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/vue.js/1.htm">vue.js</a>
                        <div>下面，我们来系统的梳理关于ref()与reactive()的基本知识点：一、响应式编程核心概念1.1什么是响应式编程？响应式编程是一种声明式编程范式，它使数据变化能够自动传播到依赖它的代码部分。在Vue中，响应式系统实现了：数据驱动视图：数据变化自动更新DOM依赖追踪：自动跟踪数据依赖关系高效更新：最小化不必要的DOM操作1.2Vue响应式系统演进版本响应式实现特点Vue2Object.defin</div>
                    </li>
                    <li><a href="/article/1938887106604625920.htm"
                           title="用 Python 开发文字冒险游戏：从零开始的教程" target="_blank">用 Python 开发文字冒险游戏：从零开始的教程</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/microsoft/1.htm">microsoft</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>文字冒险游戏(Text-basedAdventureGame)是一种经典的游戏类型，玩家通过输入文字指令与游戏世界互动。这种游戏不依赖复杂的图形界面，非常适合初学者学习编程逻辑和用户交互。在本篇博客中，我们将用Python开发一个简单的文字冒险游戏，体验游戏开发的乐趣。1.游戏设计思路游戏背景玩家醒来发现自己身处一个神秘的地下城，需要探索房间、收集物品、战胜敌人并找到出口。核心机制房间导航：玩家可</div>
                    </li>
                    <li><a href="/article/1938884707626315776.htm"
                           title="软件测试从业者必备的SQL知识" target="_blank">软件测试从业者必备的SQL知识</a>
                        <span class="text-muted">十二测试录</span>
<a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a>
                        <div>作为职场人，学一门技能是用来解决日常工作问题的，没必要从头到尾把这块知识弄透，没那么多时间。基于此，十二根据自己的经验，把软件测试从业者需要掌握的SQL知识，整理如下；只要跟着这个顺序，从头到尾执行即可。前置准备事项：1、在自己电脑上安装一个mysql数据库，文章见->虚拟机Centos下安装Mysql完整过程（图文详解）_虚拟机安装mysql-CSDN博客2、找一个mysql客户端链接工具：初学</div>
                    </li>
                    <li><a href="/article/1938883949338095616.htm"
                           title="初学翁凯老师的c语言后对其中一些问题的看法" target="_blank">初学翁凯老师的c语言后对其中一些问题的看法</a>
                        <span class="text-muted">Obltv</span>
<a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/%E5%88%9D%E5%AD%A6c%E8%AF%AD%E8%A8%80/1.htm">初学c语言</a><a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a>
                        <div>文章目录初学翁凯老师的c语言后对其中一些问题的看法一、一个课后的简单逻辑语法问题二、解答和一些思考1.**++i++--**2.**i++++**3.**a=b+=c++-d+--e/-f**问题初探原代码逻辑举例初次写博客的看法及感受初学翁凯老师的c语言后对其中一些问题的看法学习c语言已有数天，其中一些问题今日来看仍有研究价值，故记录探讨之一、一个课后的简单逻辑语法问题++i+±-i++++a=</div>
                    </li>
                    <li><a href="/article/1938880165245415424.htm"
                           title="Python的一点基础教程------文件读写" target="_blank">Python的一点基础教程------文件读写</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/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>最近在看大佬写的Python教程自学,但是感觉有点头痛,因为大佬讲了一些底层的结构和原理,但是又没那么详细,然后作为一个初学者自学的情况下,看的很费劲.看完就有感而发,想写一篇更基础的教程,教会大家怎么去用它,尽量少的去讲原理.但是当然,你也需要有一定的编程语言基础,了解基本的语法和函数等功能.正所谓师傅领进门,修行在个人,有时候我们学了一个东西,如果觉得很有趣,自然就会去了解关于它的更多信息,但</div>
                    </li>
                    <li><a href="/article/1938880038816509952.htm"
                           title="1.2 Python 的特点与优势" target="_blank">1.2 Python 的特点与优势</a>
                        <span class="text-muted">Utopia Reverie</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>1.语法简洁易读Python以简洁的语法著称，代码可读性强，减少了不必要的符号和冗余代码。例如，使用缩进来表示代码块，而非传统的大括号。这使得代码更易于理解和维护，尤其适合初学者。示例：python运行【#计算斐波那契数列的前10项n=10a,b=0,1for_inrange(n);print(a,end='')a,b=b,a+b#输出:0112358132134】2.开源与社区支持Python是</div>
                    </li>
                    <li><a href="/article/1938872854447714304.htm"
                           title="深入详解：决策树算法的概念、原理、实现与应用场景" target="_blank">深入详解：决策树算法的概念、原理、实现与应用场景</a>
                        <span class="text-muted">猿享天开</span>
<a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E5%86%B3%E7%AD%96%E6%A0%91/1.htm">决策树</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">机器学习</a>
                        <div>深入详解：决策树算法的概念、原理、实现与应用场景决策树（DecisionTree）是机器学习中一种直观且广泛应用的监督学习算法，适用于分类和回归任务。其树形结构易于理解，特别适合初学者。本文将从概念、原理、实现到应用场景，全面讲解决策树，并通过流程图和可视化示例增强理解，通俗易懂，帮助小白快速掌握决策树算法相关知识。1.决策树的概念1.1什么是决策树？决策树通过一系列条件判断（决策节点）将输入数据</div>
                    </li>
                    <li><a href="/article/1938855454511788032.htm"
                           title="Python实战：自动在知乎回答点赞并采集内容的高阶爬虫教程" target="_blank">Python实战：自动在知乎回答点赞并采集内容的高阶爬虫教程</a>
                        <span class="text-muted">Python爬虫项目</span>
<a class="tag" taget="_blank" href="/search/2025%E5%B9%B4%E7%88%AC%E8%99%AB%E5%AE%9E%E6%88%98%E9%A1%B9%E7%9B%AE/1.htm">2025年爬虫实战项目</a><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/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/okhttp/1.htm">okhttp</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a>
                        <div>✨写在前面：为什么做知乎自动化操作？知乎作为中国领先的知识问答平台，拥有大量结构化内容。对于研究舆情分析、情绪识别、用户画像，甚至产品舆情反馈采集的用户来说，如何自动获取知乎内容并进行交互行为（如点赞、回答），是一个非常实用的能力。本文将手把手带你用Python完成以下目标：✅自动登录知乎✅自动搜索某个关键词下的热门问题✅自动点赞高质量回答✅自动采集回答内容（文本、点赞数、评论数等）✅自动保存为本</div>
                    </li>
                    <li><a href="/article/1938823817522638848.htm"
                           title="Python编程：使用Opencv进行图像处理" target="_blank">Python编程：使用Opencv进行图像处理</a>
                        <span class="text-muted"></span>

                        <div>【参考】https://github.com/opencv/opencv/tree/4.x/samples/pythonPython使用OpenCV进行图像处理OpenCV(OpenSourceComputerVisionLibrary)是一个开源的计算机视觉和机器学习软件库。下面将从基础到高阶介绍如何使用Python中的OpenCV进行图像处理。一、安装首先需要安装OpenCV库：pipinst</div>
                    </li>
                    <li><a href="/article/1938794819073667072.htm"
                           title="构建四则运算解析器：字符串处理与计算逻辑实战" target="_blank">构建四则运算解析器：字符串处理与计算逻辑实战</a>
                        <span class="text-muted">大熊小清新</span>

                        <div>本文还有配套的精品资源，点击获取简介：四则运算解析器是将包含四则运算符号的字符串表达式转化为可执行计算的程序。它对编程初学者而言是理解编程逻辑和语法分析的基础。通过理解四则运算的优先级规则，实现输入处理、词法分析、语法分析和计算步骤，可以采用递归下降解析或堆栈解析等方法。本解析器的实现涉及字符串处理、数据结构的运用，有助于学习者掌握编程语言的底层工作方式，提升编程技能和问题解决能力。1.四则运算解</div>
                    </li>
                    <li><a href="/article/1938791789959901184.htm"
                           title="推荐使用ReactJS Cron：一款强大且灵活的定时任务编辑器" target="_blank">推荐使用ReactJS Cron：一款强大且灵活的定时任务编辑器</a>
                        <span class="text-muted"></span>

                        <div>推荐使用ReactJSCron：一款强大且灵活的定时任务编辑器react-js-cronAReactcroneditorbuiltwithantd项目地址:https://gitcode.com/gh_mirrors/re/react-js-cron项目简介ReactJSCron是一个基于React和AntDesign构建的高效能定时任务编辑组件。它提供了友好的用户界面，帮助开发者轻松创建和管理c</div>
                    </li>
                    <li><a href="/article/1938788009742757888.htm"
                           title="Redis网络通信模块深度解析：单线程Reactor到多线程IO的架构演进" target="_blank">Redis网络通信模块深度解析：单线程Reactor到多线程IO的架构演进</a>
                        <span class="text-muted"></span>

                        <div>一、核心架构：单线程Reactor模型Redis网络模块采用经典Reactor模式，核心流程如下：voidaeMain(aeEventLoop*eventLoop){while(!eventLoop->stop){//前置钩子（集群心跳/数据持久化）if(eventLoop->beforesleep)eventLoop->beforesleep(eventLoop);//事件分派：I/O复用+定时</div>
                    </li>
                    <li><a href="/article/1938784481305489408.htm"
                           title="vue3 实现文件上传" target="_blank">vue3 实现文件上传</a>
                        <span class="text-muted">编程（变成）小辣鸡</span>
<a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a>
                        <div>1、上传文件html上传文件        将文件拖到此处，或点击上传只支持pdf、doc、docx、png、jpg提交import{ref,reactive}from'vue'import{uploadImg}from'@/api/common.js';letuploadFile=ref(false);letfileList=ref([]);constupload=(val)=>{fileLis</div>
                    </li>
                    <li><a href="/article/1938777422228942848.htm"
                           title="vue3 使用 Univer Sheets 电子表格组件" target="_blank">vue3 使用 Univer Sheets 电子表格组件</a>
                        <span class="text-muted">小云小白</span>
<a class="tag" taget="_blank" href="/search/vue3/1.htm">vue3</a><a class="tag" taget="_blank" href="/search/excel/1.htm">excel</a><a class="tag" taget="_blank" href="/search/Univer/1.htm">Univer</a><a class="tag" taget="_blank" href="/search/Sheet/1.htm">Sheet</a>
                        <div>背景部门要进行在线数据填报：excel表格样式不限;因为要支持直接从excel直接粘贴，经筛选选择：UniverSheetsUniverSheets官网地址https://docs.univer.ai/zh-CN/guides/sheets1、安装和配置#安装核心包pnpmadd@univerjs/presets正常到这就可以了，但是我这边前台报react版本错误，所以去源码包看了一下版本，单独指</div>
                    </li>
                    <li><a href="/article/1938716156433068032.htm"
                           title="前端編譯 : Babel 基礎入門" target="_blank">前端編譯 : Babel 基礎入門</a>
                        <span class="text-muted">林cc</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/babel/1.htm">babel</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>前端編譯:Babel基礎入門前言正文什麼是Babel?Babel模塊介紹babel-cli從項目中運行BabelCLIbabel-registerbabel-nodebabel-core配置Babel.babelrcbabel-preset-es2015babel-preset-react執行Babel生成的代碼babel-polyfillbabel-runtimepresetsvsplugins</div>
                    </li>
                    <li><a href="/article/1938687428080496640.htm"
                           title="【ASP.NET Core】配置应用程序地址的N多种方法" target="_blank">【ASP.NET Core】配置应用程序地址的N多种方法</a>
                        <span class="text-muted">pythonxxoo</span>
<a class="tag" taget="_blank" href="/search/%E8%AE%A1%E7%AE%97%E6%9C%BA/1.htm">计算机</a><a class="tag" taget="_blank" href="/search/asp.net/1.htm">asp.net</a><a class="tag" taget="_blank" href="/search/flask/1.htm">flask</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E8%AE%A1%E7%AE%97%E6%9C%BA/1.htm">计算机</a>
                        <div>优质资源分享学习路线指引（点击解锁）知识定位人群定位Python实战微信订餐小程序进阶级本课程是pythonflask+微信小程序的完美结合，从项目搭建到腾讯云部署上线，打造一个全栈订餐系统。Python量化交易实战入门级手把手带你打造一个易扩展、更安全、效率更高的量化交易系统下面又到了老周误人子弟的时间，今天要误大伙的话题是：找找有多少种方法可以设置ASP.NETCore应用的地址，即URL。精</div>
                    </li>
                    <li><a href="/article/1938661593223065600.htm"
                           title="C#推箱子游戏源代码解析与实践指南" target="_blank">C#推箱子游戏源代码解析与实践指南</a>
                        <span class="text-muted">Boa波雅</span>

                        <div>本文还有配套的精品资源，点击获取简介：C#推箱子游戏是一个经典的益智游戏，适合编程初学者学习C#语言和游戏开发的基础知识。本篇文章将深入探讨使用C#语言开发推箱子游戏的源代码，涉及面向对象编程、图形用户界面(GUI)、事件驱动编程、数据结构与算法、状态管理、错误检查与边界条件、游戏逻辑以及调试技巧。通过学习本课程，初学者将能够掌握C#编程的基础和游戏逻辑的实现，并能够创建用户友好的界面。1.面向对</div>
                    </li>
                    <li><a href="/article/1938650623071285248.htm"
                           title="《高等数学》（同济大学·第7版）第七章 微分方程 第四节一阶线性微分方程" target="_blank">《高等数学》（同济大学·第7版）第七章 微分方程 第四节一阶线性微分方程</a>
                        <span class="text-muted">没有女朋友的程序员</span>
<a class="tag" taget="_blank" href="/search/%E9%AB%98%E7%AD%89%E6%95%B0%E5%AD%A6/1.htm">高等数学</a>
                        <div>好的，这是将您提供的高等数学教案内容中的LaTeX公式转换为纯文本格式后的版本：同学们好！今天我们学习《高等数学》第七章第四节“一阶线性微分方程”。这是一阶微分方程中最重要、应用最广泛的一类方程，掌握它的解法对后续学习（如微分方程的应用、高阶线性微分方程）至关重要。我会用最通俗的语言，结合大量例子，帮你彻底掌握“一阶线性微分方程”的定义、解法和核心思想。一、一阶线性微分方程的定义：长什么样？1.标</div>
                    </li>
                    <li><a href="/article/1938643440849973248.htm"
                           title="高等数学》（同济大学·第7版）第七章 微分方程 第五节可降阶的高阶微分方程" target="_blank">高等数学》（同济大学·第7版）第七章 微分方程 第五节可降阶的高阶微分方程</a>
                        <span class="text-muted">没有女朋友的程序员</span>
<a class="tag" taget="_blank" href="/search/%E9%AB%98%E7%AD%89%E6%95%B0%E5%AD%A6/1.htm">高等数学</a>
                        <div>好的，这是将您提供的高等数学第七章第五节教案内容中的LaTeX公式转换为纯文本格式后的版本：同学们好！今天我们学习《高等数学》第七章第五节“可降阶的高阶微分方程”。高阶微分方程（如二阶、三阶）直接求解困难，但许多方程可以通过“降阶”转化为低阶方程（如一阶方程）来求解。本节重点讲解三类可降阶的高阶微分方程，掌握它们的解法对后续学习至关重要。我会用最通俗的语言，结合大量例子，帮你彻底掌握。一、可降阶高</div>
                    </li>
                    <li><a href="/article/1938639911095693312.htm"
                           title="【机器学习】数学基础——张量（傻瓜篇）" target="_blank">【机器学习】数学基础——张量（傻瓜篇）</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%E3%80%90%E7%90%86%E8%AE%BA%E3%80%91/1.htm">深度学习【理论】</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%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>目录前言一、张量的定义1.标量（0维张量）2.向量（1维张量）3.矩阵（2维张量）4.高阶张量（≥3维张量）二、张量的数学表示2.1张量表示法示例三、张量的运算3.1常见张量运算四、张量在深度学习中的应用4.1PyTorch示例：张量在神经网络中的运用五、总结：张量的多维世界延伸阅读前言在机器学习、深度学习以及物理学中，张量是一个至关重要的概念。无论是在人工智能领域的神经网络中，还是在高等数学、物</div>
                    </li>
                    <li><a href="/article/1938605744584716288.htm"
                           title="EventBus之Reactor实战" target="_blank">EventBus之Reactor实战</a>
                        <span class="text-muted">太阳伞下的阿呆</span>
<a class="tag" taget="_blank" href="/search/reactor/1.htm">reactor</a><a class="tag" taget="_blank" href="/search/event/1.htm">event</a><a class="tag" taget="_blank" href="/search/bus/1.htm">bus</a><a class="tag" taget="_blank" href="/search/%E8%A7%82%E5%AF%9F%E8%80%85%E6%A8%A1%E5%BC%8F/1.htm">观察者模式</a>
                        <div>如果你想要使用一个轻量级的消息中间件，不需要分布式支持，那么可以选择RxJava或者Reactor，本文将讲述如何入门使用该框架，以及常用的一些功能生产者广播多消费者模式Sinks.Many:创建一个允许我们将数据推送到一个Flux的sink。我们使用Sinks.many().multicast().onBackpressureBuffer()来创建一个支持背压的多播Sink（广播模式）。Flux</div>
                    </li>
                    <li><a href="/article/1938603854480338944.htm"
                           title="publishOn and subscribeOn operators" target="_blank">publishOn and subscribeOn operators</a>
                        <span class="text-muted">lang20150928</span>
<a class="tag" taget="_blank" href="/search/reactor/1.htm">reactor</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                        <div>Reactor提供了两种在响应式链中切换执行上下文（或调度器）的方法：publishOn和subscribeOn。它们的核心作用是控制任务在哪个线程或线程池中执行，从而实现并发控制。理解它们的区别和使用方式是掌握Reactor并发模型的关键。1.subscribeOn的作用与特点作用：subscribeOn用于指定整个响应式链的订阅操作在哪个调度器（Scheduler）上执行。它会从源头开始，影响</div>
                    </li>
                    <li><a href="/article/1938603726788947968.htm"
                           title="BaseSubscriber" target="_blank">BaseSubscriber</a>
                        <span class="text-muted">lang20150928</span>
<a class="tag" taget="_blank" href="/search/reactor/1.htm">reactor</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>SampleSubscriber类继承自BaseSubscriber，这是Reactor框架中推荐用户自定义Subscriber的抽象类。理解这段话的关键在于以下几个方面：BaseSubscriber的作用BaseSubscriber是一个抽象类，它提供了许多可以重写的“钩子”（hook）方法，用于调整Subscriber的行为。例如，hookOnSubscribe、hookOnNext、hook</div>
                    </li>
                    <li><a href="/article/1938603727699111936.htm"
                           title="Reactor Schedulers" target="_blank">Reactor Schedulers</a>
                        <span class="text-muted">lang20150928</span>
<a class="tag" taget="_blank" href="/search/reactor/1.htm">reactor</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                        <div>Reactor是一个基于响应式编程的库，它提供了丰富的调度器（Schedulers）机制，用于管理异步操作的执行环境。Schedulers是Reactor中的核心组件之一，它们允许开发者灵活地控制操作符和订阅操作在哪个线程上执行，从而实现高效的并发编程。1.Schedulers的作用Schedulers是Reactor提供的调度器接口，用于定义任务的执行上下文。它们封装了线程管理和调度逻辑，使得开</div>
                    </li>
                    <li><a href="/article/1938603728177262592.htm"
                           title="Reactor boundedElastic" target="_blank">Reactor boundedElastic</a>
                        <span class="text-muted">lang20150928</span>
<a class="tag" taget="_blank" href="/search/reactor/1.htm">reactor</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                        <div>boundedElastic调度器专门用于处理无法避免的阻塞代码，而single和parallel调度器则不支持阻塞操作。因此，如果在single或parallel调度器上使用Reactor的阻塞API（如block()、blockFirst()、blockLast()）或通过toIterable()、toStream()进行迭代，会抛出IllegalStateException异常。自定义调度器</div>
                    </li>
                    <li><a href="/article/1938602466484482048.htm"
                           title="（12）自定义数据流（实战Docker事件推送的REST API）——响应式Spring的道法术器" target="_blank">（12）自定义数据流（实战Docker事件推送的REST API）——响应式Spring的道法术器</a>
                        <span class="text-muted">享学IT</span>
<a class="tag" taget="_blank" href="/search/%E3%80%90%E9%81%93%E6%B3%95%E6%9C%AF%E5%99%A8%E3%80%91%E5%93%8D%E5%BA%94%E5%BC%8FSpring/1.htm">【道法术器】响应式Spring</a><a class="tag" taget="_blank" href="/search/Reactor/1.htm">Reactor</a><a class="tag" taget="_blank" href="/search/%E5%93%8D%E5%BA%94%E5%BC%8F%E6%B5%81/1.htm">响应式流</a>
                        <div>本系列其他文章见：《响应式Spring的道法术器》。前情提要：响应式流|Reactor3快速上手|深入理解响应式流规范2.2自定义数据流这一小节介绍如何通过定义相应的事件（onNext、onError和onComplete）创建一个Flux或Mono。Reactor提供了generate、create、push和handle等方法，所有这些方法都使用sink（池）来生成数据流。sink，顾名思义，</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`
