React Context源码是怎么实现的呢

目前来看 Context 是一个非常强大但是很多时候不会直接使用的 api。大多数项目不会直接使用 createContext 然后向下面传递数据,而是采用第三方库(react-redux)。

想想项目中是不是经常会用到 @connect(...)(Comp) 以及

什么是 Context

Context 提供了一个无需为每层组件手动添加 props,就能在组件树间进行数据传递的方法。

一个顶层数据,想要传递到某些深层组件,通过 props 逐层传递将会非常繁琐,使用 Context 可避免显式地通过组件树逐层传递 props

Context 使用示例

import React, { Component, createContext, useConText } from 'react'
const ColorContext = createContext(null)
const { Provider, Consumer } = ColorContext

console.log('ColorContext', ColorContext)
console.log('Provider', Provider)
console.log('Consumer', Consumer)

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      color: 'red',
      background: 'cyan',
    }
  }
  render() {
    return {this.props.children}
  }
}
function Article({ children }) {
  return (
    
      

Context

hello world

{children}
) } function Paragraph({ color, background }) { return (
text
) } function TestContext() { return (
{state => }
) } export default TestContext

页面呈现出的效果

打印 ColorContextProviderConsumer

createContext

// createContext 可以让我们实现状态管理
// 还能够解决传递 Props drilling 的问题
// 假如一个子组件需要父组件的一个属性,但是中间间隔了好几层,这就会出现开发和维护的一个成本。这时候就可以通过这个 API 来解决
function createContext(defaultValue, calculateChangedBits) {
  var context = {
    ?typeof: REACT_CONTEXT_TYPE,
    _calculateChangedBits: calculateChangedBits,
    // As a workaround to support multiple concurrent renderers, we categorize
    // some renderers as primary and others as secondary. We only expect
    // there to be two concurrent renderers at most: React Native (primary) and
    // Fabric (secondary); React DOM (primary) and React ART (secondary).
    // Secondary renderers store their context values on separate fields.
    // 以下两个属性是为了适配多平台
    _currentValue: defaultValue,
    _currentValue2: defaultValue,
    // Used to track how many concurrent renderers this context currently
    // supports within in a single renderer. Such as parallel server rendering.
    _threadCount: 0,
    // These are circular
    Provider: null,
    Consumer: null
  };

  // 以下的代码很简单,就是在 context 上挂载 Provider 和 Consumer,让外部去使用
  context.Provider = {
    ?typeof: REACT_PROVIDER_TYPE,
    _context: context
  };

  var Consumer = {
    ?typeof: REACT_CONTEXT_TYPE,
    _context: context,
    _calculateChangedBits: context._calculateChangedBits
  };

  context.Consumer = Consumer;
  context._currentRenderer = null;
  context._currentRenderer2 = null;
  return context;
}

react 包里面仅仅是生成了几个对象,比较简单,接下来看看它发挥作用的地方。

Consumer children 的匿名函数里面打 debugger。

查看调用栈

主要是 newChildren = render(newValue);newChildrenConsumerchildren 被调用之后的返回值,render 就是 childrennewValue 是从 Provider value 属性的赋值。

newProps

newValue

接下来看 readContext 的实现

相关参考视频讲解:进入学习

let lastContextDependency: ContextDependency | null = null;
let currentlyRenderingFiber: Fiber | null = null;
// 在 prepareToReadContext 函数
currentlyRenderingFiber = workInProgress;


export function readContext(
  context: ReactContext,
  observedBits: void | number | boolean,
): T {
    let contextItem = {
      context: ((context: any): ReactContext),
      observedBits: resolvedObservedBits,
      next: null,
    };

    if (lastContextDependency === null) {
      // This is the first dependency for this component. Create a new list.
      lastContextDependency = contextItem;
      currentlyRenderingFiber.contextDependencies = {
        first: contextItem,
        expirationTime: NoWork,
      };
    } else {
      // Append a new context item.
      lastContextDependency = lastContextDependency.next = contextItem;
    }
  }

  // isPrimaryRenderer 为 true,定义的就是 true
  // 实际就是一直会返回  context._currentValue
  return isPrimaryRenderer ? context._currentValue : context._currentValue2;
}

跳过中间,最后一句 return context._currentValue,而

就把顶层传下来的 context 的值取到了

context 为什么从上层可以一直往下面传这点现在还没有看懂,后面熟悉跨组件传递的实现之后再写一篇文章解释,囧。

Context 的设计非常特别

Provider Consumer 是 context 的两个属性。

  var context = {
    ?typeof: REACT_CONTEXT_TYPE,
    _currentValue: defaultValue,
    _currentValue2: defaultValue,
    Provider: null,
    Consumer: null
  };

Provider?typeofREACT_PROVIDER_TYPE,它带有一个 _context 属性,指向的就是 context 本身,也就是自己的儿子有一个属性指向自己!!!

  context.Provider = {
    ?typeof: REACT_PROVIDER_TYPE,
    _context: context
  };

Consumer?typeofREACT_CONTEXT_TYPE,它带也有一个 _context 属性,也是自己的儿子有一个属性指向自己!!!

  var Consumer = {
    ?typeof: REACT_CONTEXT_TYPE,
    _context: context,
    _calculateChangedBits: context._calculateChangedBits
  };

所以可以做一个猜想, Provider 的 value 属性赋予的新值肯定通过 _context 属性传到了 context 上,修改了 _currentValue。同样,Consumer 也是依据 _context 拿到了 context_currentValue,然后 render(newValue) 执行 children 函数。

useContext

useContext 是 react hooks 提供的一个功能,可以简化 context 值得获取。

下面看使用代码

import React, { useContext, createContext } from 'react'
const NameCtx = createContext({ name: 'yuny' })
function Title() {
  const { name } = useContext(NameCtx)
  return 

# {name}

} function App() { return ( </NameCtx.Provider> ) } export default App</code></pre> <p>我么初始值给的是 <code>{name: 'yuny'}</code>,实际又重新赋值 <code>{name: 'lxfriday'}</code>,最终页面显示的是 <code>lxfriday</code>。</p> <p></p> <h3>useContext 相关源码</h3> <p>先看看 <strong>react</strong> 包中导出的 <code>useContext</code></p> <pre><code class="javascript">/** * useContext * @param Context {ReactContext} createContext 返回的结果 * @param unstable_observedBits {number | boolean | void} 计算新老 context 变化相关的,useContext() second argument is reserved for future * @returns {*} 返回的是 context 的值 */ export function useContext<T>( Context: ReactContext<T>, unstable_observedBits: number | boolean | void, ) { const dispatcher = resolveDispatcher(); return dispatcher.useContext(Context, unstable_observedBits); }</code></pre> <pre><code class="csharp">// Invalid hook call. Hooks can only be called inside of the body of a function component. function resolveDispatcher() { const dispatcher = ReactCurrentDispatcher.current; return dispatcher; }</code></pre> <pre><code class="javascript">/** * Keeps track of the current dispatcher. */ const ReactCurrentDispatcher = { /** * @internal * @type {ReactComponent} */ current: (null: null | Dispatcher), };</code></pre> <p>看看 <code>Dispatcher</code>,都是和 React Hooks 相关的。</p> <p></p> <p>再到 <strong>react-reconciler/src/ReactFiberHooks.js</strong> 中,有 <code>HooksDispatcherOnMountInDEV</code> 和 <code>HooksDispatcherOnMount</code>,带 <code>InDEV</code> 的应该是在 <code>development</code> 环境会使用到的,不带的是在 `production 会使用到。</p> <pre><code class="yaml">const HooksDispatcherOnMount: Dispatcher = { readContext, useCallback: mountCallback, useContext: readContext, useEffect: mountEffect, useImperativeHandle: mountImperativeHandle, useLayoutEffect: mountLayoutEffect, useMemo: mountMemo, useReducer: mountReducer, useRef: mountRef, useState: mountState, useDebugValue: mountDebugValue, }; HooksDispatcherOnMountInDEV = { // ... useContext<T>( context: ReactContext<T>, observedBits: void | number | boolean, ): T { return readContext(context, observedBits); }, }</code></pre> <p>在上面 <code>useContext</code> 经过 <code>readContext</code> 返回了 context 的值,<code>readContext</code> 在上面有源码介绍。</p> <h3>debugger 查看调用栈</h3> <p>初始的 <code>useContext</code></p> <p></p> <p>在 <code>HooksDispatcherOnMountInDEV</code> 中</p> <p></p> <p><code>readContext</code> 中</p> <p></p> <p>经过上面源码的详细分析, 大家对 context 的创建和 context 取值应该了解了,context 设计真的非常妙!!</p> </article> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1603574331042988032"></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.js)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1940270870127767552.htm" title="前端 React.js 项目的性能优化的成功案例分析" target="_blank">前端 React.js 项目的性能优化的成功案例分析</a> <span class="text-muted">前端视界</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E8%89%BA%E5%8C%A0%E9%A6%86/1.htm">前端艺匠馆</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">性能优化</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a> <div>前端React.js项目的性能优化的成功案例分析关键词:React.js性能优化、代码拆分与懒加载、虚拟列表与长列表优化、Webpack深度调优、Fiber架构实践、SSR与SSG落地、React.memo与useCallback最佳实践摘要:本文通过三个真实企业级React项目的性能优化案例,系统解析从性能瓶颈诊断到优化策略落地的完整流程。结合React核心原理(如Fiber架构、虚拟DOMdi</div> </li> <li><a href="/article/1937971240853630976.htm" title="React.js前端开发中的性能优化的常见挑战与解决思路" target="_blank">React.js前端开发中的性能优化的常见挑战与解决思路</a> <span class="text-muted">大厂前端小白菜</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E5%AE%9E%E6%88%98/1.htm">前端开发实战</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">性能优化</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>React.js前端开发中的性能优化的常见挑战与解决思路关键词:React性能优化、虚拟DOM、重新渲染、代码分割、内存管理摘要:本文深入探讨React应用开发中常见的性能瓶颈及其解决方案。从虚拟DOM原理到Fiber架构演进,从组件渲染机制到内存泄漏预防,通过算法解析、数学模型验证和实战案例,系统性地构建React应用性能优化知识体系。本文还将提供可落地的性能检测工具链和最佳实践方案。文章目录R</div> </li> <li><a href="/article/1933142080968781824.htm" title="前端 React.js 组件复用与封装技巧" target="_blank">前端 React.js 组件复用与封装技巧</a> <span class="text-muted">大厂前端小白菜</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E5%AE%9E%E6%88%98/1.htm">前端开发实战</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a> <div>前端React.js组件复用与封装技巧关键词:React.js、组件复用、组件封装、前端开发、代码复用性摘要:本文围绕前端React.js组件复用与封装技巧展开深入探讨。在当今前端开发中,高效的组件复用和封装能够显著提升开发效率、降低维护成本。文章首先介绍了相关背景知识,包括目的、预期读者等;接着详细阐述核心概念,剖析组件复用与封装的原理和架构;然后讲解核心算法原理并给出Python示例;再介绍相</div> </li> <li><a href="/article/1932382965552181248.htm" title="前端React.js与GraphQL的集成应用" target="_blank">前端React.js与GraphQL的集成应用</a> <span class="text-muted">大厂前端小白菜</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E5%AE%9E%E6%88%98/1.htm">前端开发实战</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/graphql/1.htm">graphql</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a> <div>前端React.js与GraphQL的集成应用关键词:React.js、GraphQL、集成应用、前端开发、数据交互摘要:本文深入探讨了前端React.js与GraphQL的集成应用。首先介绍了相关背景知识,包括React.js和GraphQL的概念、目的和适用范围,以及预期读者和文档结构。接着详细阐述了核心概念,如React.js的组件化和GraphQL的查询语言特性,通过文本示意图和Merma</div> </li> <li><a href="/article/1931871509282877440.htm" title="新手如何选择前端框架?" target="_blank">新手如何选择前端框架?</a> <span class="text-muted">XI锐真的烦</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>下面是比较流行的前端框架Vue.js和React.js的全面横向对比,从多个维度帮你了解它们的异同与适用场景:框架概况对比维度Vue.jsReact.js初始发布2014年,由尤雨溪(EvanYou)开发2013年,由Meta(Facebook)开发当前版本Vue3.x(CompositionAPI支持)React18.x(支持concurrent模式)类型渐进式框架(可独立使用或组合)UI库(关</div> </li> <li><a href="/article/1931274044447977472.htm" title="前端jQuery与React.js的对比分析" target="_blank">前端jQuery与React.js的对比分析</a> <span class="text-muted">大厂前端小白菜</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E5%AE%9E%E6%88%98/1.htm">前端开发实战</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a> <div>前端jQuery与React.js的对比分析关键词:前端开发、jQuery、React.js、对比分析、DOM操作、组件化摘要:本文旨在对前端开发中广泛使用的jQuery和React.js进行全面的对比分析。首先介绍jQuery和React.js的背景知识,包括它们的目的、适用读者群体等。接着深入探讨两者的核心概念、架构及联系,详细阐述核心算法原理和具体操作步骤,结合数学模型和公式进行说明。通过项</div> </li> <li><a href="/article/1931051159917752320.htm" title="前端必知!React.js 入门全攻略" target="_blank">前端必知!React.js 入门全攻略</a> <span class="text-muted">大厂前端小白菜</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E5%AE%9E%E6%88%98/1.htm">前端开发实战</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a> <div>前端必知!React.js入门全攻略关键词:React.js、前端开发、组件化、虚拟DOM、状态管理、Hooks、JSX摘要:本文是一份全面的React.js入门指南,从基础概念到高级应用,系统性地介绍了React的核心原理和最佳实践。我们将深入探讨虚拟DOM、组件化开发、状态管理、Hooks等关键概念,并通过实际代码示例展示如何构建现代化的React应用。无论你是刚入门的前端开发者,还是希望系统</div> </li> <li><a href="/article/1930791953176260608.htm" title="React.js 与 Apollo Server:全栈 GraphQL" target="_blank">React.js 与 Apollo Server:全栈 GraphQL</a> <span class="text-muted">前端视界</span> <a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/graphql/1.htm">graphql</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a> <div>React.js与ApolloServer:全栈GraphQL关键词:React.js、ApolloServer、GraphQL、全栈开发、前端与后端交互摘要:本文将带领大家走进全栈GraphQL的世界,详细介绍React.js和ApolloServer的结合使用。从核心概念的解释到具体的算法原理、操作步骤,再到项目实战案例和实际应用场景,全方位剖析这一技术组合。让大家了解如何利用React.js</div> </li> <li><a href="/article/1930396358519353344.htm" title="React.js 与 Alpine.js 对比教程:现代前端开发的两大选择" target="_blank">React.js 与 Alpine.js 对比教程:现代前端开发的两大选择</a> <span class="text-muted">王小玗</span> <a class="tag" taget="_blank" href="/search/javscript/1.htm">javscript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>React.js与Alpine.js对比教程:现代前端开发的两大选择React.js和Alpine.js代表了现代前端开发的两种不同哲学和适用场景。本教程将全面介绍这两个框架的核心概念、使用方法和适用场景,帮助开发者根据项目需求做出明智选择。第一部分:React.js深度教程1.React.js简介与核心概念React.js是由Facebook开发并开源的JavaScript库,用于构建用户界面。</div> </li> <li><a href="/article/1929378322152747008.htm" title="《大模型项目实战》:从0到1,打造属于你的多领域智能AI Chat应用,非常详细收藏这一篇就够了!" target="_blank">《大模型项目实战》:从0到1,打造属于你的多领域智能AI Chat应用,非常详细收藏这一篇就够了!</a> <span class="text-muted">AGI大模型学习</span> <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%A8%A1%E5%9E%8B%E9%A1%B9%E7%9B%AE/1.htm">大模型项目</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%A8%A1%E5%9E%8B%E5%AE%9E%E6%88%98/1.htm">大模型实战</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%A8%A1%E5%9E%8B/1.htm">大模型</a><a class="tag" taget="_blank" href="/search/AI%E5%A4%A7%E6%A8%A1%E5%9E%8B/1.htm">AI大模型</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%A8%A1%E5%9E%8B%E5%AD%A6%E4%B9%A0/1.htm">大模型学习</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%A8%A1%E5%9E%8B%E5%85%A5%E9%97%A8/1.htm">大模型入门</a> <div>目标基于大语言模型的Chat应用,是一种利用自然语言处理技术来进行对话交互的智能应用。大语言模型通过大量数据的学习和训练,能够理解自然语言表达的语义,具备智能对话的能力。当用户向Chat应用提出问题时,Chat应用就会利用其学习到的知识和自然语言处理技术来理解用户的意图,然后推理生成相应的答案。我们的目标是使用React.js开发一个通用的Chat应用程序,提供对话Web界面,调用ChatGLM3</div> </li> <li><a href="/article/1929168142928506880.htm" title="前端React.js与CSS的完美结合" target="_blank">前端React.js与CSS的完美结合</a> <span class="text-muted">大厂前端小白菜</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E5%AE%9E%E6%88%98/1.htm">前端开发实战</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a> <div>前端React.js与CSS的完美结合关键词:React.js、CSS-in-JS、StyledComponents、CSSModules、组件化样式、性能优化、设计系统摘要:本文深入探讨React.js与现代CSS技术的结合方式,从传统的CSS方法到最前沿的CSS-in-JS解决方案。我们将分析各种样式方案的优缺点,展示如何构建可维护、高性能的React组件样式系统,并通过实际案例演示最佳实践。</div> </li> <li><a href="/article/1928523503217209344.htm" title="使用 React PDF 构建 React.js PDF 查看器的指南" target="_blank">使用 React PDF 构建 React.js PDF 查看器的指南</a> <span class="text-muted">ComPDFKit</span> <a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90PDF%E5%BA%93/1.htm">开源PDF库</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/pdf/1.htm">pdf</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>在本文中,我们将重点介绍在React.js中制作PDF查看器的最受欢迎的开源库。具体来说,我们将利用著名的开源库react-pdf的功能,指导您完成创建React.jsPDF查看器的过程。通过本教程,您将在第一部分学习如何使用React-PDF在React.js应用程序中实现功能齐全的PDF查看器。在第二部分中,我们将重点介绍如何集成ComPDF以提供更多PDF功能,从而进一步增强用户的文档处理体</div> </li> <li><a href="/article/1925492131963662336.htm" title="React.js 中组件可复用性设计不足的问题及解决方法" target="_blank">React.js 中组件可复用性设计不足的问题及解决方法</a> <span class="text-muted">JJCTO袁龙</span> <a class="tag" taget="_blank" href="/search/react/1.htm">react</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>React.js中组件可复用性设计不足的问题及解决方法在React.js开发中,组件的可复用性是提高开发效率和代码质量的关键。然而,开发者有时可能会忽视组件的可复用性设计,导致代码重复、难以维护和扩展。本文将探讨这些问题的常见原因,并提供相应的解决方法。一、React.js中组件可复用性设计不足的常见问题(一)组件功能过于单一如果组件功能过于单一,可能会导致代码重复,难以复用。错误示例:const</div> </li> <li><a href="/article/1925492132466978816.htm" title="React.js 中错误使用 `ref` 转发的问题及解决方法" target="_blank">React.js 中错误使用 `ref` 转发的问题及解决方法</a> <span class="text-muted">JJCTO袁龙</span> <a class="tag" taget="_blank" href="/search/react/1.htm">react</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>React.js中错误使用ref转发的问题及解决方法在React.js开发中,ref是一个强大的工具,用于直接访问DOM元素或在组件之间共享数据。ref转发(React.forwardRef)允许你将一个ref通过组件传递给子组件。然而,开发者有时可能会错误地使用ref转发,导致无法正确访问目标元素或组件。本文将探讨这些问题的常见原因,并提供相应的解决方法。一、React.js中错误使用ref转发</div> </li> <li><a href="/article/1925125909543710720.htm" title="前端 React.js 性能优化的最佳时间点" target="_blank">前端 React.js 性能优化的最佳时间点</a> <span class="text-muted">大厂前端小白菜</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">性能优化</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a> <div>前端React.js性能优化的最佳时间点关键词:前端开发、React.js、性能优化、最佳时间点、渲染性能摘要:本文聚焦于前端React.js性能优化的最佳时间点。首先介绍了在前端开发中React.js性能优化的重要性及背景信息,接着深入剖析了React.js性能优化所涉及的核心概念与联系,阐述了相关算法原理和操作步骤,并结合数学模型和公式进行说明。通过项目实战展示了代码案例及详细解释,探讨了Re</div> </li> <li><a href="/article/1920741499541188608.htm" title="React.js 中组件重复调用 `useEffect` 的问题及解决方法" target="_blank">React.js 中组件重复调用 `useEffect` 的问题及解决方法</a> <span class="text-muted">JJCTO袁龙</span> <a class="tag" taget="_blank" href="/search/react/1.htm">react</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>React.js中组件重复调用useEffect的问题及解决方法在React.js开发中,useEffect是一个非常重要的Hook,用于处理组件的副作用(如数据获取、订阅或手动更改DOM等)。然而,开发者在使用useEffect时可能会不小心导致组件重复调用useEffect,从而引发性能问题或错误行为。本文将探讨这些问题的常见原因,并提供相应的解决方法。一、React.js中组件重复调用use</div> </li> <li><a href="/article/1914909748675801088.htm" title="掌握 React.js 前端开发的生命周期方法" target="_blank">掌握 React.js 前端开发的生命周期方法</a> <span class="text-muted">前端视界</span> <a class="tag" taget="_blank" href="/search/CS/1.htm">CS</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a> <div>掌握React.js前端开发的生命周期方法关键词:React.js、生命周期方法、前端开发、组件、挂载、更新、卸载摘要:本文深入探讨了React.js前端开发中的生命周期方法。首先介绍了学习React.js生命周期方法的背景信息,包括目的、预期读者等。接着详细阐述了核心概念,通过文本示意图和Mermaid流程图展示其原理和架构。然后对核心算法原理进行讲解,并给出Python源代码示例。同时,介绍了</div> </li> <li><a href="/article/1913157172250865664.htm" title="React 19马上来了,你准备好了吗?" target="_blank">React 19马上来了,你准备好了吗?</a> <span class="text-muted">Baoing_</span> <a class="tag" taget="_blank" href="/search/React.js/1.htm">React.js</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>React19是React.js的一次重大更新,带来了许多令人激动的新特性和改进。在这篇文章中,我们将深入探讨这些新特性,并提供一些代码示例,以帮助您更好地理解它们。全新编译器功能其中React19核心功能之一是全新的React编译器,它引入了许多令人激动的新功能,使开发人员能够更轻松地编写和维护他们的代码。一、即时反馈在React19中,编译器引入了即时反馈功能,这意味着当您编辑代码时,您将立即</div> </li> <li><a href="/article/1908035824017010688.htm" title="在 .NET 8 中使用自定义令牌身份验证掌握 SignalR Hub 安全性" target="_blank">在 .NET 8 中使用自定义令牌身份验证掌握 SignalR Hub 安全性</a> <span class="text-muted">csdn_aspnet</span> <a class="tag" taget="_blank" href="/search/.Net8.0/1.htm">.Net8.0</a><a class="tag" taget="_blank" href="/search/.Net8/1.htm">.Net8</a><a class="tag" taget="_blank" href="/search/SignalR/1.htm">SignalR</a> <div>最近在练习做一个Web开发项目,需要使用WebSockets传输数据,实现实时通信。这是一个React.js项目,后端是.NET。虽然MSDN提供了出色的顶级文档,但它通常缺少高级用例所需的低级细节。一种这样的场景是使用自定义令牌对SignalRHub进行身份验证。是的,自定义令牌,而不是JWT或默认Bearer令牌。本文探讨如何实现这一点。最后,您将拥有一个需要身份验证并使用自定义令牌的Sign</div> </li> <li><a href="/article/1907297236769894400.htm" title="前端开发必备:HTML、CSS、JavaScript 基础与 Vue.js、React.js、Angular.js 等热门框架,还有 Uniapp 小程序实战攻略" target="_blank">前端开发必备:HTML、CSS、JavaScript 基础与 Vue.js、React.js、Angular.js 等热门框架,还有 Uniapp 小程序实战攻略</a> <span class="text-muted">魏大帅。</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>在当今数字化时代,前端开发对于构建用户与数字产品交互界面起着至关重要的作用。一个美观、易用且性能良好的前端界面能够极大地提升用户体验,为产品的成功奠定坚实基础。一、前端开发的重要性随着互联网的不断发展,用户对数字产品的界面要求越来越高。前端开发不仅要实现美观的设计,还要保证良好的用户交互和高效的性能。无论是网页、移动应用还是桌面软件,前端开发都是用户与产品直接接触的部分,其重要性不言而喻。二、前端</div> </li> <li><a href="/article/1905561558444994560.htm" title="React.js 中不当使用生命周期方法的问题及解决方案" target="_blank">React.js 中不当使用生命周期方法的问题及解决方案</a> <span class="text-muted">JJCTO袁龙</span> <a class="tag" taget="_blank" href="/search/react/1.htm">react</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>React.js中不当使用生命周期方法的问题及解决方案在React.js开发中,生命周期方法是组件从创建到销毁过程中各个阶段的钩子函数。正确使用这些方法对于优化性能、避免内存泄漏和确保组件行为正确至关重要。然而,开发者在使用生命周期方法时可能会遇到一些问题,导致应用出现异常或性能问题。本文将探讨这些问题的常见原因,并提供相应的解决方案。一、React.js生命周期方法的常见问题(一)使用废弃的生命</div> </li> <li><a href="/article/1902867511427264512.htm" title="从 0 到 1 搭建一个 Web 应用项目:详细步骤与踩坑记录" target="_blank">从 0 到 1 搭建一个 Web 应用项目:详细步骤与踩坑记录</a> <span class="text-muted">算法探索者</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>一、引言在当今数字化时代,Web应用无处不在。对于开发者而言,掌握从0到1搭建Web应用项目的技能至关重要。本指南将带你逐步完成一个简单Web应用项目的搭建,分享技术选型思路以及在过程中遇到的问题和解决方案,助力你开启Web开发之旅。二、技术选型(一)前端框架:选择React.js。它具有高效的虚拟DOM机制,能够快速更新页面,提升用户体验。同时,React生态系统丰富,有大量现成的组件库和工具可</div> </li> <li><a href="/article/1902659669063692288.htm" title="《React开发实践:掌握Redux与Hooks应用》——开启你的前端进阶之旅" target="_blank">《React开发实践:掌握Redux与Hooks应用》——开启你的前端进阶之旅</a> <span class="text-muted">JJCTO袁龙</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>文章标题《React开发实践:掌握Redux与Hooks应用》——开启你的前端进阶之旅在前端开发的浪潮中,React.js已经成为开发者们不可或缺的利器。它以其高效、灵活的特性,成为构建现代Web应用的首选框架之一。然而,随着项目复杂度的增加,如何更好地管理状态、优化性能、提升代码可维护性,成为每个开发者必须面对的挑战。幸运的是,我最近出版的《React开发实践:掌握Redux与Hooks应用》这</div> </li> <li><a href="/article/1900302462774996992.htm" title="Python, Springboot 开发基于人类指令生成机器人3D可视化动态模型app" target="_blank">Python, Springboot 开发基于人类指令生成机器人3D可视化动态模型app</a> <span class="text-muted">Geeker-2025</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</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> <div>开发一个基于人类指令生成机器人3D可视化动态模型的APP是一个复杂且多层次的项目,涉及前端和后端的多个技术栈。以下是一个高层次的设计概述,涵盖主要的技术栈和功能模块,并提供使用Python和SpringBoot进行联合开发的示例。##技术栈概述###前端-**框架**:React.js或Vue.js(用于构建用户界面)-**3D可视化**:Three.js或React-Three-Fiber(用于</div> </li> <li><a href="/article/1899437273754169344.htm" title="探索Coco-Web:一款强大的H5创作工具" target="_blank">探索Coco-Web:一款强大的H5创作工具</a> <span class="text-muted">岑晔含Dora</span> <div>探索Coco-Web:一款强大的H5创作工具去发现同类优质开源项目:https://gitcode.com/是一个开源的、基于Web的H5(HTML5)创作平台,旨在让开发者和设计师能够轻松地创建互动式的内容和应用。通过其直观的界面和丰富的功能,无论你是编程高手还是初学者,都能够利用Coco-Web制作出富有吸引力的数字内容。技术分析Coco-Web基于现代Web技术构建,包括:React.js:</div> </li> <li><a href="/article/1897692559916986368.htm" title="React生态、Vue生态与跨框架前端解决方案" target="_blank">React生态、Vue生态与跨框架前端解决方案</a> <span class="text-muted">Coder LM Wang</span> <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/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>React生态系统1基础框架React.js是一个用于构建UI的JavaScript库。2应用框架Next.js是基于React.js的完整应用框架。主要负责应用如何工作:应用架构:路由系统、页面结构渲染策略:服务端渲染(SSR)、静态生成(SSG)、客户端渲染性能优化:代码分割、图片优化、字体优化开发体验:热模块替换、TypeScript支持部署:Vercel平台集成、自托管选项3UI组件库MU</div> </li> <li><a href="/article/1897452525955641344.htm" title="深入理解 React.js:构建现代 Web 应用的核心技术" target="_blank">深入理解 React.js:构建现代 Web 应用的核心技术</a> <span class="text-muted">布兰妮甜</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/-/1.htm">-</a><a class="tag" taget="_blank" href="/search/%E8%A1%8C%E4%B8%BA/1.htm">行为</a><a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/React/1.htm">React</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><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>Hi,我是布兰妮甜!React.js是由Facebook开发并开源的一个用于构建用户界面的JavaScript库。自2013年发布以来,React迅速成为前端开发领域的主流工具之一。其组件化、声明式编程模型以及高效的虚拟DOM技术,使得开发者能够轻松构建高性能、可维护的Web应用。本文将深入探讨React.js的核心概念、优势以及如何在实际项目中应用。文章目录一、React.js的核心概念二、Re</div> </li> <li><a href="/article/1896614150809907200.htm" title="React使用 - 常用生命周期函数、受控组件与非受控组件" target="_blank">React使用 - 常用生命周期函数、受控组件与非受控组件</a> <span class="text-muted">此鱼非闲鱼也</span> <a class="tag" taget="_blank" href="/search/React/1.htm">React</a><a class="tag" taget="_blank" href="/search/react/1.htm">react</a><a class="tag" taget="_blank" href="/search/react%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%87%BD%E6%95%B0/1.htm">react生命周期函数</a><a class="tag" taget="_blank" href="/search/react%E5%8F%97%E6%8E%A7%E7%BB%84%E4%BB%B6%E4%B8%8E%E9%9D%9E%E5%8F%97%E6%8E%A7%E7%BB%84%E4%BB%B6/1.htm">react受控组件与非受控组件</a> <div>React生命周期生命周期:就是指某个事物从开始到结束的各个阶段。React生命周期:在React.js中指的是组件从创建到销毁的过程,React.js在这个过程中的不同阶段调用的函数。作用:通过这些函数,我们可以更加精确的对组件进行控制。前面我们一直在使用的render函数其实就是组件生命周期渲染阶段执行的函数注意:React生命周期的新旧方法之间,不可以同时存在。否则报错生命周期函数详解常用生</div> </li> <li><a href="/article/1896561071439802368.htm" title="如何在React.js中使用Shadcn/UI" target="_blank">如何在React.js中使用Shadcn/UI</a> <span class="text-muted"></span> <div>如何在React.js中使用Shadcn/UI学习如何在React.js中使用Shadcn/UI构建可自定义且轻量的界面。了解如何将其与Apipost集成,以实现高效的API管理和测试。非常适合希望提升React.js项目的开发者!使用Shadcn/UI构建现代化界面创建简洁的用户界面是前端开发者的主要目标之一。随着组件库的兴起,这一任务变得更加简化。今天,我们将深入探讨Shadcn/UI,这是一</div> </li> <li><a href="/article/1894516737261498368.htm" title="【前端】react+ts 轮播图的实现" target="_blank">【前端】react+ts 轮播图的实现</a> <span class="text-muted">Loong_DQX</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/typescript/1.htm">typescript</a> <div>一、场景描述在很多网站的页面中都有轮播图,所以我想利用react.js和ts实现一个轮播图。自动轮播图已经在前面实现过了,如:https://blog.csdn.net/weixin_43872912/article/details/145622444?sharetype=blogdetail&sharerId=145622444&sharerefer=PC&sharesource=weixin_</div> </li> <li><a href="/article/39.htm" title="java Illegal overloaded getter method with ambiguous type for propert的解决" target="_blank">java Illegal overloaded getter method with ambiguous type for propert的解决</a> <span class="text-muted">zwllxs</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jdk/1.htm">jdk</a> <div>好久不来iteye,今天又来看看,哈哈,今天碰到在编码时,反射中会抛出 Illegal overloaded getter method with ambiguous type for propert这么个东东,从字面意思看,是反射在获取getter时迷惑了,然后回想起java在boolean值在生成getter时,分别有is和getter,也许我们的反射对象中就有is开头的方法迷惑了jdk,</div> </li> <li><a href="/article/166.htm" title="IT人应当知道的10个行业小内幕" target="_blank">IT人应当知道的10个行业小内幕</a> <span class="text-muted">beijingjava</span> <a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/%E4%BA%92%E8%81%94%E7%BD%91/1.htm">互联网</a> <div>10. 虽然IT业的薪酬比其他很多行业要好,但有公司因此视你为其“佣人”。   尽管IT人士的薪水没有互联网泡沫之前要好,但和其他行业人士比较,IT人的薪资还算好点。在接下的几十年中,科技在商业和社会发展中所占分量会一直增加,所以我们完全有理由相信,IT专业人才的需求量也不会减少。   然而,正因为IT人士的薪水普遍较高,所以有些公司认为给了你这么多钱,就把你看成是公司的“佣人”,拥有你的支配</div> </li> <li><a href="/article/293.htm" title="java 实现自定义链表" target="_blank">java 实现自定义链表</a> <span class="text-muted">CrazyMizzz</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a> <div>1.链表结构   链表是链式的结构 2.链表的组成    链表是由头节点,中间节点和尾节点组成    节点是由两个部分组成:       1.数据域       2.引用域 3.链表的实现 &nbs</div> </li> <li><a href="/article/420.htm" title="web项目发布到服务器后图片过一会儿消失" target="_blank">web项目发布到服务器后图片过一会儿消失</a> <span class="text-muted">麦田的设计者</span> <a class="tag" taget="_blank" href="/search/struts2/1.htm">struts2</a><a class="tag" taget="_blank" href="/search/%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87/1.htm">上传图片</a><a class="tag" taget="_blank" href="/search/%E6%B0%B8%E4%B9%85%E4%BF%9D%E5%AD%98/1.htm">永久保存</a> <div>  作为一名学习了android和j2ee的程序员,我们必须要意识到,客服端和服务器端的交互是很有必要的,比如你用eclipse写了一个web工程,并且发布到了服务器(tomcat)上,这时你在webapps目录下看到了你发布的web工程,你可以打开电脑的浏览器输入http://localhost:8080/工程/路径访问里面的资源。但是,有时你会突然的发现之前用struts2上传的图片</div> </li> <li><a href="/article/547.htm" title="CodeIgniter框架Cart类 name 不能设置中文的解决方法" target="_blank">CodeIgniter框架Cart类 name 不能设置中文的解决方法</a> <span class="text-muted">IT独行者</span> <a class="tag" taget="_blank" href="/search/CodeIgniter/1.htm">CodeIgniter</a><a class="tag" taget="_blank" href="/search/Cart/1.htm">Cart</a><a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6%E3%80%80/1.htm">框架 </a> <div>今天试用了一下CodeIgniter的Cart类时遇到了个小问题,发现当name的值为中文时,就写入不了session。在这里特别提醒一下。 在CI手册里也有说明,如下: $data = array( 'id' => 'sku_123ABC', 'qty' => 1, '</div> </li> <li><a href="/article/674.htm" title="linux回收站" target="_blank">linux回收站</a> <span class="text-muted">_wy_</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E5%9B%9E%E6%94%B6%E7%AB%99/1.htm">回收站</a> <div>今天一不小心在ubuntu下把一个文件移动到了回收站,我并不想删,手误了。我急忙到Nautilus下的回收站中准备恢复它,但是里面居然什么都没有。     后来我发现这是由于我删文件的地方不在HOME所在的分区,而是在另一个独立的Linux分区下,这是我专门用于开发的分区。而我删除的东东在分区根目录下的.Trash-1000/file目录下,相关的删除信息(删除时间和文件所在</div> </li> <li><a href="/article/801.htm" title="jquery回到页面顶端" target="_blank">jquery回到页面顶端</a> <span class="text-muted">知了ing</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>html代码: <h1 id="anchor">页面标题</h1> <div id="container">页面内容</div> <p><a href="#anchor" class="topLink">回到顶端</a><</div> </li> <li><a href="/article/928.htm" title="B树、B-树、B+树、B*树" target="_blank">B树、B-树、B+树、B*树</a> <span class="text-muted">矮蛋蛋</span> <a class="tag" taget="_blank" href="/search/B%E6%A0%91/1.htm">B树</a> <div>原文地址: http://www.cnblogs.com/oldhorse/archive/2009/11/16/1604009.html B树        即二叉搜索树:        1.所有非叶子结点至多拥有两个儿子(Left和Right); &nb</div> </li> <li><a href="/article/1055.htm" title="数据库连接池" target="_blank">数据库连接池</a> <span class="text-muted">alafqq</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93%E8%BF%9E%E6%8E%A5%E6%B1%A0/1.htm">数据库连接池</a> <div>http://www.cnblogs.com/xdp-gacl/p/4002804.html @Anthor:孤傲苍狼 数据库连接池 用MySQLv5版本的数据库驱动没有问题,使用MySQLv6和Oracle的数据库驱动时候报如下错误: java.lang.ClassCastException: $Proxy0 cannot be cast to java.sql.Connec</div> </li> <li><a href="/article/1182.htm" title="java泛型" target="_blank">java泛型</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/java%E6%B3%9B%E5%9E%8B/1.htm">java泛型</a> <div>泛型 在Java SE 1.5之前,没有泛型的情况的下,通过对类型Object的引用来实现参数的“任意化”,任意化的缺点就是要实行强制转换,这种强制转换可能会带来不安全的隐患   泛型的特点:消除强制转换 确保类型安全 向后兼容   简单泛型的定义:      泛型:就是在类中将其模糊化,在创建对象的时候再具体定义 class fan</div> </li> <li><a href="/article/1309.htm" title="javascript闭包[两个小测试例子]" target="_blank">javascript闭包[两个小测试例子]</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a> <div>一.程序一 <script> var name = "The Window"; var Object_a = {   name : "My Object",   getNameFunc : function(){ var that = this;     return function(){     </div> </li> <li><a href="/article/1436.htm" title="探索JUnit4扩展:假设机制(Assumption)" target="_blank">探索JUnit4扩展:假设机制(Assumption)</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/Assumption/1.htm">Assumption</a><a class="tag" taget="_blank" href="/search/JUnit/1.htm">JUnit</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/1.htm">单元测试</a> <div>一.假设机制(Assumption)概述        理想情况下,写测试用例的开发人员可以明确的知道所有导致他们所写的测试用例不通过的地方,但是有的时候,这些导致测试用例不通过的地方并不是很容易的被发现,可能隐藏得很深,从而导致开发人员在写测试用例时很难预测到这些因素,而且往往这些因素并不是开发人员当初设计测试用例时真正目的,</div> </li> <li><a href="/article/1563.htm" title="【Gson四】范型POJO的反序列化" target="_blank">【Gson四】范型POJO的反序列化</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/POJO/1.htm">POJO</a> <div>在下面这个例子中,POJO(Data类)是一个范型类,在Tests中,指定范型类为PieceData,POJO初始化完成后,通过 String str = new Gson().toJson(data); 得到范型化的POJO序列化得到的JSON串,然后将这个JSON串反序列化为POJO   import com.google.gson.Gson; import java.</div> </li> <li><a href="/article/1690.htm" title="【Spark八十五】Spark Streaming分析结果落地到MySQL" target="_blank">【Spark八十五】Spark Streaming分析结果落地到MySQL</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/Stream/1.htm">Stream</a> <div>几点总结: 1. DStream.foreachRDD是一个Output Operation,类似于RDD的action,会触发Job的提交。DStream.foreachRDD是数据落地很常用的方法 2. 获取MySQL Connection的操作应该放在foreachRDD的参数(是一个RDD[T]=>Unit的函数类型),这样,当foreachRDD方法在每个Worker上执行时,</div> </li> <li><a href="/article/1817.htm" title="NGINX + LUA实现复杂的控制" target="_blank">NGINX + LUA实现复杂的控制</a> <span class="text-muted">ronin47</span> <a class="tag" taget="_blank" href="/search/nginx+lua/1.htm">nginx lua</a> <div>安装lua_nginx_module 模块 lua_nginx_module 可以一步步的安装,也可以直接用淘宝的OpenResty Centos和debian的安装就简单了。。 这里说下freebsd的安装: fetch http://www.lua.org/ftp/lua-5.1.4.tar.gz tar zxvf lua-5.1.4.tar.gz cd lua-5.1.4 ma</div> </li> <li><a href="/article/1944.htm" title="java-递归判断数组是否升序" target="_blank">java-递归判断数组是否升序</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> public class IsAccendListRecursive { /*递归判断数组是否升序 * if a Integer array is ascending,return true * use recursion */ public static void main(String[] args){ IsAccendListRecursiv</div> </li> <li><a href="/article/2071.htm" title="Netty源码学习-DefaultChannelPipeline2" target="_blank">Netty源码学习-DefaultChannelPipeline2</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/netty/1.htm">netty</a> <div>Netty3的API http://docs.jboss.org/netty/3.2/api/org/jboss/netty/channel/ChannelPipeline.html 里面提到ChannelPipeline的一个“pitfall”: 如果ChannelPipeline只有一个handler(假设为handlerA)且希望用另一handler(假设为handlerB) 来</div> </li> <li><a href="/article/2198.htm" title="Java工具之JPS" target="_blank">Java工具之JPS</a> <span class="text-muted">chinrui</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>JPS使用     熟悉Linux的朋友们都知道,Linux下有一个常用的命令叫做ps(Process Status),是用来查看Linux环境下进程信息的。同样的,在Java Virtual Machine里面也提供了类似的工具供广大Java开发人员使用,它就是jps(Java Process Status),它可以用来</div> </li> <li><a href="/article/2325.htm" title="window.print分页打印" target="_blank">window.print分页打印</a> <span class="text-muted">ctrain</span> <a class="tag" taget="_blank" href="/search/window/1.htm">window</a> <div> function init() { var tt = document.getElementById("tt"); var childNodes = tt.childNodes[0].childNodes; var level = 0; for (var i = 0; i < childNodes.length; i++) { </div> </li> <li><a href="/article/2452.htm" title="安装hadoop时 执行jps命令Error occurred during initialization of VM" target="_blank">安装hadoop时 执行jps命令Error occurred during initialization of VM</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/jdk/1.htm">jdk</a><a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a><a class="tag" taget="_blank" href="/search/jps/1.htm">jps</a> <div>在安装hadoop时,执行JPS出现下面错误   [slave16]root@192.168.11.10:/tmp/hsperfdata_hdfs# jps Error occurred during initialization of VM java.lang.Error: Properties init: Could not determine current working</div> </li> <li><a href="/article/2579.htm" title="PHP开发大型项目的一点经验" target="_blank">PHP开发大型项目的一点经验</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/%E9%87%8D%E6%9E%84/1.htm">重构</a> <div>一、变量 最好是把所有的变量存储在一个数组中,这样在程序的开发中可以带来很多的方便,特别是当程序很大的时候。变量的命名就当适合自己的习惯,不管是用拼音还是英语,至少应当有一定的意义,以便适合记忆。变量的命名尽量规范化,不要与PHP中的关键字相冲突。 二、函数 PHP自带了很多函数,这给我们程序的编写带来了很多的方便。当然,在大型程序中我们往往自己要定义许多个函数,几十</div> </li> <li><a href="/article/2706.htm" title="android笔记之--向网络发送GET/POST请求参数" target="_blank">android笔记之--向网络发送GET/POST请求参数</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>使用GET方法发送请求 private static boolean sendGETRequest (String path, Map<String, String> params) throws Exception{ //发送地http://192.168.100.91:8080/videoServi</div> </li> <li><a href="/article/2833.htm" title="linux复习笔记 之bash shell (3) 通配符" target="_blank">linux复习笔记 之bash shell (3) 通配符</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/linux+%E9%80%9A%E9%85%8D%E7%AC%A6/1.htm">linux 通配符</a><a class="tag" taget="_blank" href="/search/linux%E9%80%9A%E9%85%8D%E7%AC%A6/1.htm">linux通配符</a> <div>转载请出自出处: http://eksliang.iteye.com/blog/2104387 在bash的操作环境中有一个非常有用的功能,那就是通配符。 下面列出一些常用的通配符,如下表所示 符号 意义 * 万用字符,代表0个到无穷个任意字符 ? 万用字符,代表一定有一个任意字符 [] 代表一定有一个在中括号内的字符。例如:[abcd]代表一定有一个字符,可能是a、b、c</div> </li> <li><a href="/article/2960.htm" title="Android关于短信加密" target="_blank">Android关于短信加密</a> <span class="text-muted">gqdy365</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>关于Android短信加密功能,我初步了解的如下(只在Android应用层试验):     1、因为Android有短信收发接口,可以调用接口完成短信收发;         发送过程:APP(基于短信应用修改)接受用户输入号码、内容——>APP对短信内容加密——>调用短信发送方法Sm</div> </li> <li><a href="/article/3087.htm" title="asp.net在网站根目录下创建文件夹" target="_blank">asp.net在网站根目录下创建文件夹</a> <span class="text-muted">hvt</span> <a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a><a class="tag" taget="_blank" href="/search/C%23/1.htm">C#</a><a class="tag" taget="_blank" href="/search/hovertree/1.htm">hovertree</a><a class="tag" taget="_blank" href="/search/asp.net/1.htm">asp.net</a><a class="tag" taget="_blank" href="/search/Web+Forms/1.htm">Web Forms</a> <div>假设要在asp.net网站的根目录下建立文件夹hovertree,C#代码如下: string m_keleyiFolderName = Server.MapPath("/hovertree"); if (Directory.Exists(m_keleyiFolderName)) { //文件夹已经存在 return; } else { try { D</div> </li> <li><a href="/article/3214.htm" title="一个合格的程序员应该读过哪些书" target="_blank">一个合格的程序员应该读过哪些书</a> <span class="text-muted">justjavac</span> <a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a><a class="tag" taget="_blank" href="/search/%E4%B9%A6%E7%B1%8D/1.htm">书籍</a> <div>编者按:2008年8月4日,StackOverflow 网友 Bert F 发帖提问:哪本最具影响力的书,是每个程序员都应该读的? “如果能时光倒流,回到过去,作为一个开发人员,你可以告诉自己在职业生涯初期应该读一本, 你会选择哪本书呢?我希望这个书单列表内容丰富,可以涵盖很多东西。” 很多程序员响应,他们在推荐时也写下自己的评语。 以前就有国内网友介绍这个程序员书单,不过都是推荐数</div> </li> <li><a href="/article/3341.htm" title="单实例实践" target="_blank">单实例实践</a> <span class="text-muted">跑龙套_az</span> <a class="tag" taget="_blank" href="/search/%E5%8D%95%E4%BE%8B/1.htm">单例</a> <div>   1、内部类 public class Singleton { private static class SingletonHolder { public static Singleton singleton = new Singleton(); } public Singleton getRes</div> </li> <li><a href="/article/3468.htm" title="PO VO BEAN 理解" target="_blank">PO VO BEAN 理解</a> <span class="text-muted">q137681467</span> <a class="tag" taget="_blank" href="/search/VO/1.htm">VO</a><a class="tag" taget="_blank" href="/search/DTO/1.htm">DTO</a><a class="tag" taget="_blank" href="/search/po/1.htm">po</a> <div>PO:      全称是 persistant object持久对象 最形象的理解就是一个PO就是数据库中的一条记录。 好处是可以把一条记录作为一个对象处理,可以方便的转为其它对象。     BO:     全称是 business object:业务对象 主要作用是把业务逻辑封装为一个对象。这个对</div> </li> <li><a href="/article/3595.htm" title="战胜惰性,暗自努力" target="_blank">战胜惰性,暗自努力</a> <span class="text-muted">金笛子</span> <a class="tag" taget="_blank" href="/search/%E5%8A%AA%E5%8A%9B/1.htm">努力</a> <div>偶然看到一句很贴近生活的话:“别人都在你看不到的地方暗自努力,在你看得到的地方,他们也和你一样显得吊儿郎当,和你一样会抱怨,而只有你自己相信这些都是真的,最后也只有你一人继续不思进取。”很多句子总在不经意中就会戳中一部分人的软肋,我想我们每个人的周围总是有那么些表现得“吊儿郎当”的存在,是否你就真的相信他们如此不思进取,而开始放松了对自己的要求随波逐流呢? 我有个朋友是搞技术的,平时嘻嘻哈哈,以</div> </li> <li><a href="/article/3722.htm" title="NDK/JNI二维数组多维数组传递" target="_blank">NDK/JNI二维数组多维数组传递</a> <span class="text-muted">wenzongliang</span> <a class="tag" taget="_blank" href="/search/%E4%BA%8C%E7%BB%B4%E6%95%B0%E7%BB%84/1.htm">二维数组</a><a class="tag" taget="_blank" href="/search/jni/1.htm">jni</a><a class="tag" taget="_blank" href="/search/NDK/1.htm">NDK</a> <div>多维数组和对象数组一样处理,例如二维数组里的每个元素还是一个数组 用jArray表示,直到数组变为一维的,且里面元素为基本类型,去获得一维数组指针。给大家提供个例子。已经测试通过。 Java_cn_wzl_FiveChessView_checkWin( JNIEnv* env,jobject thiz,jobjectArray qizidata) { jint i,j; int s</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类:</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved. <!-- <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>