【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/1835511912843014144.htm"
                           title="理解Gunicorn：Python WSGI服务器的基石" target="_blank">理解Gunicorn：Python WSGI服务器的基石</a>
                        <span class="text-muted">范范0825</span>
<a class="tag" taget="_blank" href="/search/ipython/1.htm">ipython</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a>
                        <div>理解Gunicorn：PythonWSGI服务器的基石介绍Gunicorn，全称GreenUnicorn，是一个为PythonWSGI（WebServerGatewayInterface）应用设计的高效、轻量级HTTP服务器。作为PythonWeb应用部署的常用工具，Gunicorn以其高性能和易用性著称。本文将介绍Gunicorn的基本概念、安装和配置，帮助初学者快速上手。1.什么是Gunico</div>
                    </li>
                    <li><a href="/article/1835495770502033408.htm"
                           title="Day17笔记-高阶函数" target="_blank">Day17笔记-高阶函数</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/%E7%AC%94%E8%AE%B0/1.htm">笔记</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><a class="tag" taget="_blank" href="/search/pycharm/1.htm">pycharm</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90/1.htm">数据分析</a>
                        <div>高阶函数【重点掌握】函数的本质：函数是一个变量，函数名是一个变量名，一个函数可以作为另一个函数的参数或返回值使用如果A函数作为B函数的参数，B函数调用完成之后，会得到一个结果，则B函数被称为高阶函数常用的高阶函数：map(),reduce(),filter(),sorted()1.map()map(func,iterable)，返回值是一个iterator【容器，迭代器】func:函数iterab</div>
                    </li>
                    <li><a href="/article/1835492740536823808.htm"
                           title="node.js学习" target="_blank">node.js学习</a>
                        <span class="text-muted">小猿L</span>
<a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.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/vim/1.htm">vim</a>
                        <div>node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行</div>
                    </li>
                    <li><a href="/article/1835479645701632000.htm"
                           title="道阻且长，行则将至" target="_blank">道阻且长，行则将至</a>
                        <span class="text-muted">sweet橘子</span>

                        <div>本文参与书香澜梦主题征文“行”文章原创首发，文责自负。我们每一个人都应该有属于自己的愿望或者是理想，人一但有了理想也就算是有了方向，它就会像灯塔一样指引我们前进的方向，哪怕是再远大的理想，如果坚持，那么我相信它就一定有收获。屈原是我最喜欢的一个浪漫主义的诗人，他曾今说过：“路漫漫其修远兮，吾将上下而求索。”人生的道路很长，但是为了实现自己的理想抱负我愿意付出我毕生的精力，只专注这一件事，因为“道阻</div>
                    </li>
                    <li><a href="/article/1835454568192897024.htm"
                           title="2018-12-22 《金刚经修心课：不焦虑的活法》摘录" target="_blank">2018-12-22 《金刚经修心课：不焦虑的活法》摘录</a>
                        <span class="text-muted">Cintia1004</span>

                        <div>不为外界干扰的神奇力量如果你即将开始阅读金刚经，请试着把你的心空下来，把你各种习惯性的想法放在一边，以一种敞开的心态去阅读它。在敞开的阅读里，你会慢慢领悟到，金刚经没有任何结论，只是一种启迪，一种指引，指引你彻底地自我解放，从一切的成见里解放出来。你会惊奇地发现，金刚经……你都能够获得一种不为外界干扰的平静的力量。当这种力量充满你的日常生活，你会不害怕失败，……没有得到的时候，想要得到；已经得到的</div>
                    </li>
                    <li><a href="/article/1835448111909138432.htm"
                           title="react-intl——react国际化使用方案" target="_blank">react-intl——react国际化使用方案</a>
                        <span class="text-muted">苹果酱0567</span>
<a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB%E4%B8%8E%E8%A7%A3%E6%9E%90/1.htm">面试题汇总与解析</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><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E9%97%B4%E4%BB%B6/1.htm">中间件</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a>
                        <div>国际化介绍i18n：internationalization国家化简称，首字母+首尾字母间隔的字母个数+尾字母，类似的还有k8s(Kubernetes)React-intl是React中最受欢迎的库。使用步骤安装#usenpmnpminstallreact-intl-D#useyarn项目入口文件配置//index.tsximportReactfrom"react";importReactDOMf</div>
                    </li>
                    <li><a href="/article/1835443569968640000.htm"
                           title="Spring MVC 全面指南：从入门到精通的详细解析" target="_blank">Spring MVC 全面指南：从入门到精通的详细解析</a>
                        <span class="text-muted">一杯梅子酱</span>
<a class="tag" taget="_blank" href="/search/%E6%8A%80%E6%9C%AF%E6%A0%88%E5%AD%A6%E4%B9%A0/1.htm">技术栈学习</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                        <div>引言：SpringMVC，作为Spring框架的一个重要模块，为构建Web应用提供了强大的功能和灵活性。无论是初学者还是有一定经验的开发者，掌握SpringMVC都将显著提升你的Web开发技能。本文旨在为初学者提供一个全面且易于理解的学习路径，通过详细的知识点分析和实际案例，帮助你快速上手SpringMVC，让学习过程既深刻又高效。一、SpringMVC简介1.1什么是SpringMVC？Spri</div>
                    </li>
                    <li><a href="/article/1835422770016645120.htm"
                           title="《 C++ 修炼全景指南：四 》揭秘 C++ List 容器背后的实现原理，带你构建自己的双向链表" target="_blank">《 C++ 修炼全景指南：四 》揭秘 C++ List 容器背后的实现原理，带你构建自己的双向链表</a>
                        <span class="text-muted">Lenyiin</span>
<a class="tag" taget="_blank" href="/search/%E6%8A%80%E6%9C%AF%E6%8C%87%E5%8D%97/1.htm">技术指南</a><a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a><a class="tag" taget="_blank" href="/search/%E4%BF%AE%E7%82%BC%E5%85%A8%E6%99%AF%E6%8C%87%E5%8D%97/1.htm">修炼全景指南</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a><a class="tag" taget="_blank" href="/search/list/1.htm">list</a><a class="tag" taget="_blank" href="/search/%E9%93%BE%E8%A1%A8/1.htm">链表</a><a class="tag" taget="_blank" href="/search/stl/1.htm">stl</a>
                        <div>本篇博客，我们将详细讲解如何从头实现一个功能齐全且强大的C++List容器，并深入到各个细节。这篇博客将包括每一步的代码实现、解释以及扩展功能的探讨，目标是让初学者也能轻松理解。一、简介1.1、背景介绍在C++中，std::list是一个基于双向链表的容器，允许高效的插入和删除操作，适用于频繁插入和删除操作的场景。与动态数组不同，list允许常数时间内的插入和删除操作，支持双向遍历。这篇文章将详细</div>
                    </li>
                    <li><a href="/article/1835411044768509952.htm"
                           title="字节二面" target="_blank">字节二面</a>
                        <span class="text-muted">Redstone Monstrosity</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a>
                        <div>1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文</div>
                    </li>
                    <li><a href="/article/1835409210855223296.htm"
                           title="2021-12-11" target="_blank">2021-12-11</a>
                        <span class="text-muted">人生导演</span>

                        <div>今天读到佛学书籍的一段话：初学者很难直接体验到无我，但可以经常提醒自己：一切事物都是无我的。不断强化这个观念，也会相当有帮助。比如生病了我们一般会说：“我不舒服！我很痛！我很惨！”这时候如果我们提醒自己：没有我，只是这个肉体的某些部分、某些功能出了问题，不舒服、疼痛也只是一时的感受，而感受随时在变化。仅仅是知道没有一个实存的我在生病、在受苦。然后把“一切事物都是无我的”这句话，记到笔记上，并且朗读</div>
                    </li>
                    <li><a href="/article/1835398064727224320.htm"
                           title="前端代码上传文件" target="_blank">前端代码上传文件</a>
                        <span class="text-muted">余生逆风飞翔</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i</div>
                    </li>
                    <li><a href="/article/1835397685729914880.htm"
                           title="【高阶数据结构】并查集" target="_blank">【高阶数据结构】并查集</a>
                        <span class="text-muted">椿融雪</span>
<a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E4%B8%8E%E7%AE%97%E6%B3%95/1.htm">数据结构与算法</a><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/%E5%B9%B6%E6%9F%A5%E9%9B%86/1.htm">并查集</a>
                        <div>文章目录一、并查集原理二、并查集实现三、并查集应用一、并查集原理在一些应用问题中，需要将n个不同的元素划分成一些不相交的集合。开始时，每个元素自成一个单元素集合，然后按一定的规律将归于同一组元素的集合合并。在此过程中要反复用到查询某一个元素归属于那个集合的运算。适合于描述这类问题的抽象数据类型称为并查集(union-findset)。比如：某公司今年校招全国总共招生10人，西安招4人，成都招3人，</div>
                    </li>
                    <li><a href="/article/1835316432188043264.htm"
                           title="学习宣传贯彻党的二十大精神 担当起新时代的历史使命" target="_blank">学习宣传贯彻党的二十大精神 担当起新时代的历史使命</a>
                        <span class="text-muted">机械迷城</span>

                        <div>习近平总书记在党的二十大报告中强调：“全党同志务必不忘初心、牢记使命，务必谦虚谨慎、艰苦奋斗，务必敢于斗争、善于斗争，坚定历史自信，增强历史主动，谱写新时代中国特色社会主义更加绚丽的华章。”我们要始终沿着习近平总书记和党中央指引的方向奋勇前行，确保二十大的部署、党中央的要求、总书记的嘱托落地生根、结出硕果，用新的伟大奋斗创造新的伟业。在这次的报告中，习近平总书记再次强调，江山就是人民，人民就是江山</div>
                    </li>
                    <li><a href="/article/1835306109607440384.htm"
                           title="财富自由之路读书笔记2" target="_blank">财富自由之路读书笔记2</a>
                        <span class="text-muted">Elaine_a963</span>

                        <div>继续财富自由读书笔记，今天就第十-二十三章进行归纳总结思考。这本书可以说是边学边练的武功秘籍。秘籍一：注意力。先从认知上刷新，先前谈到价值的重要性及单位价值提升的必要性。这里就引出了：“注意力”是在任何地方“挖掘”价值的最基本工具。那么，要自如运用注意力，就得练习。这里李老师给的无他，就是基本功训练扎实-坐享。秘籍二：活在未来。再一次颠覆认知，大众的思维是活在当下，而这里指引我们要活在未来。用正确</div>
                    </li>
                    <li><a href="/article/1835250021260423168.htm"
                           title="练就理论联系实际的真功夫" target="_blank">练就理论联系实际的真功夫</a>
                        <span class="text-muted">TBC</span>

                        <div>理论联系实际是中国共产党的三大作风之一，理论从实际中来，要到实际中去。理论不是唯一的真理，理论要在现实中接受实践的检验，才能更好地指导实践，理论脱离实际就会变成一种僵硬的教条，茶杯硬套锅盖，风马牛不相及。理论从实际中来，并接受实践的检验。理论是一种经验总结，是我们的指导手册，引导我们的方向盘，它能指引我们在贯彻落实工作中少走弯路。理论是前人阶段性工作的经验总结，它使得我们能站在“巨人的肩膀”上更为</div>
                    </li>
                    <li><a href="/article/1835229467124002816.htm"
                           title="SpringSecurity初学总结" target="_blank">SpringSecurity初学总结</a>
                        <span class="text-muted">weixin_66442229</span>
<a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a>
                        <div>springSecurity安全框架基于Java的安全框架主要有:SpringSecurity和Shiro介绍基础概念安全框架是对用户访问权限的控制,保证应用的安全性。其主要的工作是用户认证和用户授权|鉴权主要应用于Spring的企业应用系统,提供声明式的安全访问控制解决方案。它提供了一组可以在Spring应用上下文中配置的Bean能很好的结合Spring的DI依赖注入和AOP面向切面编程功能应用</div>
                    </li>
                    <li><a href="/article/1835212835098030080.htm"
                           title="STM32——看门狗通俗解析" target="_blank">STM32——看门狗通俗解析</a>
                        <span class="text-muted">百里与司空</span>
<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><a class="tag" taget="_blank" href="/search/%E9%97%A8%E6%8E%A7%E5%BE%AA%E7%8E%AF%E5%8D%95%E5%85%83/1.htm">门控循环单元</a>
                        <div>笔者在学习看门狗的视频后，对看门狗仍然是一知半解，后面在实际应用中发现它是一个很好用的检测或者调试工具。所以总结一下笔者作为初学小白对看门狗的理解。主函数初始化阶段、循环阶段和复位众所周知，程序的运行一般是这样的：程序在进入循环阶段之前，会在初始化阶段将每个寄存器或者某些变量赋值。初始化阶段的代码执行一次后，就不再执行了。而循环阶段的代码会执行很多次，一直循环反复的执行下去。这时，如果进行了复位，</div>
                    </li>
                    <li><a href="/article/1835212226282221568.htm"
                           title="抖音开始怎么吸粉（可以试试这几种办法）" target="_blank">抖音开始怎么吸粉（可以试试这几种办法）</a>
                        <span class="text-muted">配音新手圈</span>

                        <div>如何在抖音短视频平台上快速积累人气和粉丝，抖音短视频平台已成为“我们媒体”和全媒体矩阵，是客户获取、推广和收入的重要平台之一。兼职副业推荐公众号，配音新手圈，声优配音圈，新配音兼职圈，配音就业圈，鼎音副业，有声新手圈，每天更新各种远程工作与在线兼职，职位包括：写手、程序开发、剪辑、设计、翻译、配音、无门槛、插画、翻译、等等。。。每日更新兼职。但对于初学者来说，如何在抖音上建立自己的品牌，积累粉丝，</div>
                    </li>
                    <li><a href="/article/1835182498179543040.htm"
                           title="【读书清单】打破自我的标签（2）" target="_blank">【读书清单】打破自我的标签（2）</a>
                        <span class="text-muted">咿呀作语</span>

                        <div>001顽固有利有弊，利在思想行为高度集中，不受他人干扰。弊在固执、自以为是，不愿接受变化。002顽固的原因，一是天生性格使然。二是后天见识少，经历少，容易在自己的小世界里自大。003顽固＋贵人指引＝好结果，因为脑子思想集中，认定的就学，一旦遇到认同的贵人，容易出成绩。顽固＋自己摸索＝一再失败。如果没有遇到贵人指点，自己随性摸索，不撞南墙不回头，误把顽固当理性，易钻牛角尖。004所以不要老是呆在自己</div>
                    </li>
                    <li><a href="/article/1835165010037403648.htm"
                           title="学单片机怎么在3-5个月内找到工作？" target="_blank">学单片机怎么在3-5个月内找到工作？</a>
                        <span class="text-muted">无际单片机编程</span>
<a class="tag" taget="_blank" href="/search/%E5%8D%95%E7%89%87%E6%9C%BA/1.htm">单片机</a><a class="tag" taget="_blank" href="/search/%E5%B5%8C%E5%85%A5%E5%BC%8F%E5%BC%80%E5%8F%91/1.htm">嵌入式开发</a><a class="tag" taget="_blank" href="/search/%E7%89%A9%E8%81%94%E7%BD%91/1.htm">物联网</a><a class="tag" taget="_blank" href="/search/stm32/1.htm">stm32</a><a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a>
                        <div>每个初学者，都如履薄冰，10几年前，我自学单片机时，也一样。想通过学习，找一份体面点的工作，又害怕辛辛苦苦学出来，找不到工作。好在，当初执行力，还算可以，自学java没成功，后面自学单片机，成功入行了。转眼间，毕业到现在有13年了，马上也到了奔4的年纪。这13年一直在跟单片机打交道，打过工，创过业，对行业，对企业，都有一定的认知，坚持看完这篇内容，相信能帮你少走几个月弯路。有些老铁，加了我很久，时</div>
                    </li>
                    <li><a href="/article/1835133874892533760.htm"
                           title="前端使用react-intl-universal进行国际化" target="_blank">前端使用react-intl-universal进行国际化</a>
                        <span class="text-muted">Stephy_Yy</span>
<a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/%E8%B0%83%E7%A0%94/1.htm">调研</a><a class="tag" taget="_blank" href="/search/reactjs/1.htm">reactjs</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
                        <div>一、国际化/i18n目前国际化，就是开发者写对象，一个key关联若干语种的翻译。相比于浏览器自带的翻译功能，语义更加准确。“国际化”的简称：i18n（其来源是英文单词internationalization的首末字符i和n，18为中间的字符数）二、react项目国际化react-intl是业界最受欢迎的软件包之一：React-intl是雅虎的语言国际化开源项目FormatJS的一部分，通过其提供的</div>
                    </li>
                    <li><a href="/article/1835123776463925248.htm"
                           title="什么是 PHP? 为什么用 PHP? 谁在用 PHP?" target="_blank">什么是 PHP? 为什么用 PHP? 谁在用 PHP?</a>
                        <span class="text-muted">m0_37438181</span>
<a class="tag" taget="_blank" href="/search/%E6%B0%B8%E8%BF%9C%E5%AD%A6%E4%B9%A0/1.htm">永远学习</a><a class="tag" taget="_blank" href="/search/php/1.htm">php</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>一、什么是PHP？PHP（HypertextPreprocessor，超文本预处理器）是一种广泛应用于Web开发的通用开源脚本语言。PHP主要用于服务器端编程，可以嵌入HTML中，与数据库进行交互，生成动态网页内容。它具有以下特点：简单易学：语法相对简单，容易上手，对于初学者来说是一个不错的选择。跨平台性：可以在多种操作系统上运行，如Windows、Linux、Unix等。丰富的函数库：提供了大量</div>
                    </li>
                    <li><a href="/article/1835101722159181824.htm"
                           title="VUE实现大小缩放轮播图" target="_blank">VUE实现大小缩放轮播图</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/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
                        <div>效果图import{ref,computed,reactive,watch,onMounted}from'vue';exportdefault{props:{/***轮播数据来源*/source:{type:Array,default:()=>[{img:require('@/assets/imgs/test/1.png')},{img:require('@/assets/imgs/test/1.</div>
                    </li>
                    <li><a href="/article/1835089183857799168.htm"
                           title="react里的index.js是怎么跟index.html结合起来的?" target="_blank">react里的index.js是怎么跟index.html结合起来的?</a>
                        <span class="text-muted">SherrinfordL</span>

                        <div>image.pngcreate-react-app把webpack、babel等配置都封装到了依赖项目react-script中，所以你无法直观的看到这些配置。你可以在项目下运行npmruneject，被隐藏的配置文件就会暴露到项目根路径下。把请求转发到index.html原因是，你执行npmrunstart时，启动的webpack-dev-server，会加载react-script项目conf</div>
                    </li>
                    <li><a href="/article/1835085841114951680.htm"
                           title="Taro实现微信小程序自定义拍照截图识别" target="_blank">Taro实现微信小程序自定义拍照截图识别</a>
                        <span class="text-muted">书边事.</span>
<a class="tag" taget="_blank" href="/search/taro/1.htm">taro</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a>
                        <div>效果图：代码：>请对准框内拍摄题目重新拍照文件处理中...开始识别definePageConfig({navigationStyle:"custom",navigationBarTitleText:"",//启用页面分享//enableShareAppMessage:true,//启动朋友圈分享//enableShareTimeline:true});import{reactive,toRefs,</div>
                    </li>
                    <li><a href="/article/1835053432449363968.htm"
                           title="（小白入门）Windows环境下搭建React Native Android开发环境" target="_blank">（小白入门）Windows环境下搭建React Native Android开发环境</a>
                        <span class="text-muted">码农老黑</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/React/1.htm">React</a><a class="tag" taget="_blank" href="/search/Native/1.htm">Native</a><a class="tag" taget="_blank" href="/search/%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91/1.htm">移动开发</a><a class="tag" taget="_blank" href="/search/Android/1.htm">Android</a><a class="tag" taget="_blank" href="/search/studio/1.htm">studio</a>
                        <div>ReactNative(简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的UI框架React在原生移动应用平台的衍生产物，目前支持iOS和Android两大平台。RN的环境搭建在RN的中文社区有所介绍，但是对于小白来说还是有些太过简略了。RN中文社区详见参考，本文不涉及的问题也许在其中能够有所解答。ReactNative思想底层引擎是JavaSc</div>
                    </li>
                    <li><a href="/article/1835005151736328192.htm"
                           title="mysql数据库配置环境变量" target="_blank">mysql数据库配置环境变量</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/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a>
                        <div>mysql数据库配置环境变量这是我最初学习时记录下来的笔记，有些简陋！1.下载最新版mysql软件，将mysql安装到系统目录中，记录当前安装目录；如安装mysql到C:/programfiles/mysql目录下2.打开win7系统——计算机——系统属性3.点击环境变量，进入环境变量设置菜单4.选中系统变量中的“path”，在path值开头处输入：C:\programfiles\mysql\bi</div>
                    </li>
                    <li><a href="/article/1834981191825059840.htm"
                           title="Python 初学者入门必知： Anaconda是什么？有什么作用？怎么使用？" target="_blank">Python 初学者入门必知： Anaconda是什么？有什么作用？怎么使用？</a>
                        <span class="text-muted">懒大王爱吃狼</span>
<a class="tag" taget="_blank" href="/search/Python%E5%9F%BA%E7%A1%80/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><a class="tag" taget="_blank" href="/search/python%E5%9F%BA%E7%A1%80/1.htm">python基础</a><a class="tag" taget="_blank" href="/search/python%E5%AD%A6%E4%B9%A0/1.htm">python学习</a><a class="tag" taget="_blank" href="/search/anaconda/1.htm">anaconda</a><a class="tag" taget="_blank" href="/search/anaconda%E5%AE%89%E8%A3%85/1.htm">anaconda安装</a><a class="tag" taget="_blank" href="/search/python%E6%95%99%E7%A8%8B/1.htm">python教程</a>
                        <div>初学者在学习Python时，经常看到的一个名字是Anaconda。究竟什么是Anaconda，为什么它如此受欢迎？在这篇文章中，我们将探讨Anaconda，了解Anaconda的从安装到使用的。Anaconda是一个免费开源的Python和R编程发行版，包含上千个适用于数据科学和机器学习的包。同时，配备了Spyder和Jupyternotebook等工具，初学者可以使用它们来学习Python，使用</div>
                    </li>
                    <li><a href="/article/1834965176286277632.htm"
                           title="react中如何获取并使用usestate声明的变量的值" target="_blank">react中如何获取并使用usestate声明的变量的值</a>
                        <span class="text-muted">小华0000</span>
<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>1.函数式更新当需要根据当前状态来更新状态时，可以使用函数式更新。setState（在类组件中）和setCount（在useState中）都可以接受一个函数作为参数，这个函数接收当前的状态作为参数，并返回新的状态。functionExampleComponent(){const[count,setCount]=useState(0);//使用函数式更新functionhandleClick(){s</div>
                    </li>
                    <li><a href="/article/1834963412711469056.htm"
                           title="【Vue3源码实现】Ref isRef unRef proxyRefs实现" target="_blank">【Vue3源码实现】Ref isRef unRef proxyRefs实现</a>
                        <span class="text-muted">ZhaiMou</span>
<a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><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/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/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>
                        <div>前言在上篇文章中我们了解了响应式原理，并在最后实现了reactive。上文链接Vue3响应式原理实现与track和trigger依赖收集和触发依赖在我们的日常业务中，我们有可能需要将一个基础数据类型的值也转换成响应式的，而reactive只能代理对象，我们需要对基础数据类型的值也进行读写操作的拦截，但Proxy无法实现对基础数据类型值读写操作的拦截。所以Vue设计了Ref,以及相关api本篇文章实</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`
