深入理解 React 的 Virtual DOM

React在前端界一直很流行，而且学起来也不是很难，只需要学会JSX、理解State和Props，然后就可以愉快的玩耍了，但想要成为React的专家你还需要对React有一些更深入的理解，希望本文对你有用。

这是Choerodon的一个前端页面

在复杂的前端项目中一个页面可能包含上百个状态，对React框架理解得更精细一些对前端优化很重要。曾经这个页面点击一条记录展示详情会卡顿数秒，而这仅仅是前端渲染造成的。

为了能够解决这些问题，开发者需要了解React组件从定义到在页面上呈现（然后更新）的整个过程。

React在编写组件时使用混合HTML和JavaScript的一种语法（称为JSX）。 但是，浏览器对JSX及其语法一无所知，浏览器只能理解纯JavaScript，因此必须将JSX转换为HTML。 这是一个div的JSX代码，它有一个类和一些内容：

  文本

在React中将这段jsx变成普通的js之后它就是一个带有许多参数的函数调用：

React.createElement(
  'div',
  { className: 'cn' },
  '文本'
);

React.createElement(
  'div',
  { className: 'cn' },
  ['Content 1!', React.createElement('br'), 'Content 2!']
)
它的第一个参数是一个字符串，对应html中的标签名，第二个参数是它的所有属性所构成的对象，当然，它也有可能是个空对象，剩下的参数都是这个元素下的子元素，这里的文本也会被当作一个子元素，所以第三个参数是 `“文本”` 。

到这里你应该就能想象这个元素下有更多`children`的时候会发生什么。

文本1


文本2

React.createElement(
'div',
{ className: 'cn' },
'文本1', // 1st child
React.createElement('br'), // 2nd child
'文本1' // 3rd child
)

目前的函数有五个参数：元素的类型，全部属性的对象和三个子元素。 由于一个`child`也是React已知的`HTML`标签，因此它也将被解释成函数调用。

到目前为止，本文已经介绍了两种类型的`child`参数，一种是`string`纯文本，一种是调用其他的`React.createElement`函数。其实，其他值也可以作为参数，比如：
- 基本类型 false，null，undefined和 true
- 数组
- React组件

使用数组是因为可以将子组件分组并作为一个参数传递：

当然，React的强大功能不是来自HTML规范中描述的标签，而是来自用户创建的组件，例如：

function Table({ rows }) {
  return (
    
      {rows.map(row => (
        
      ))}
    

          
{row.title}
        
  );
}

组件允许开发者将模板分解为可重用的块。在上面的“纯函数”组件的示例中，组件接受一个包含表行数据的对象数组，并返回React.createElement对table元素及其行作为子元素的单个调用 。

每当开发者将组件放入JSX布局中时它看上去是这样的：

但从浏览器角度，它看到的是这样的：
React.createElement(Table, { rows: rows });
请注意，这次的第一个参数不是以string描述的HTML元素，而是组件的引用（即函数名）。第二个参数是传入该组件的props对象。
将组件放在页面上
现在，浏览器已经将所有JSX组件转换为纯JavaScript，现在浏览器获得了一堆函数调用，其参数是其他函数调用，还有其他函数调用......如何将它们转换为构成网页的DOM元素？
为此，开发者需要使用ReactDOM库及其render方法：
function Table({ rows }) { /* ... */ } // 组件定义

// 渲染一个组件
ReactDOM.render(
  React.createElement(Table, { rows: rows }), // "创建" 一个 component
  document.getElementById('#root') // 将它放入DOM中
);
当ReactDOM.render被调用时，React.createElement最终也会被调用，它返回以下对象：
// 这个对象里还有很多其他的字段，但现在对开发者来说重要的是这些。
{
  type: Table,
  props: {
    rows: rows
  },
  // ...
}
这些对象构成了React意义上的Virtual DOM
它们将在所有进一步渲染中相互比较，并最终转换为真正的DOM（与Virtual DOM对比）。
这是另一个例子：这次有一个div具有class属性和几个子节点：
React.createElement(
  'div',
  { className: 'cn' },
  'Content 1!',
  'Content 2!',
);
变成：
{
  type: 'div',
  props: {
    className: 'cn',
    children: [
      'Content 1!',
      'Content 2!'
    ]
  }
}
所有的传入的展开函数，也就是React.createElement除了第一第二个参数剩下的参数都会在props对象中的children属性中，不管传入的是什么函数，他们最终都会作为children传入props中。
而且，开发者可以直接在JSX代码中添加children属性，将子项直接放在children中，结果仍然是相同的：
在Virtual DOM对象被建立出来之后ReactDOM.render会尝试按以下规则把它翻译成浏览器能够看得懂的DOM节点：
 
  
 如果Virtual DOM对象中的type属性是一个string类型的tag名称，就创建一个tag，包含props里的全部属性。
 
  
 如果Virtual DOM对象中的type属性是一个函数或者class，就调用它，它返回的可能还是一个Virtual DOM然后将结果继续递归调用此过程。
 
  
 如果props中有children属性，就对children中的每个元素进行以上过程，并将返回的结果放到父DOM节点中。
 
 
最后，浏览器获得了以下HTML（对于上述table的例子）：

  ...

  

    
Title
  

重建DOM

接下浏览器要“重建”一个DOM节点，如果浏览器要更新一个页面，显然，开发者并不希望替换页面中的全部元素，这就是React真正的魔法了。如何才能实现它？先从最简单的方法开始，重新调用这个节点的ReactDOM.render方法。

// 第二次调用
ReactDOM.render(
  React.createElement(Table, { rows: rows }),
  document.getElementById('#root')
);

这一次，上面的代码执行逻辑将与看到的代码不同。React不是从头开始创建所有DOM节点并将它们放在页面上，React将使用“diff”算法，以确定节点树的哪些部分必须更新，哪些部分可以保持不变。

那么它是怎样工作的？只有少数几个简单的情况，理解它们将对React程序的优化有很大帮助。请记住，接下来看到的对象是用作表示React Virtual DOM中节点的对象。

▌Case 1：type是一个字符串，type在调用之间保持不变，props也没有改变。

// before update
{ type: 'div', props: { className: 'cn' } }

// after update
{ type: 'div', props: { className: 'cn' } }

这是最简单的情况：DOM保持不变。

▌Case 2：type仍然是相同的字符串，props是不同的。

// before update:
{ type: 'div', props: { className: 'cn' } }

// after update:
{ type: 'div', props: { className: 'cnn' } }

由于type仍然代表一个HTML元素，React知道如何通过标准的DOM API调用更改其属性，而无需从DOM树中删除节点。

▌Case 3：type已更改为不同的组件String或从String组件更改为组件。

// before update:
{ type: 'div', props: { className: 'cn' } }

// after update:
{ type: 'span', props: { className: 'cn' } }

由于React现在看到类型不同，它甚至不会尝试更新DOM节点：旧元素将与其所有子节点一起被删除（unmount）。因此，在DOM树上替换完全不同的元素的代价会非常之高。幸运的是，这在实际情况中很少发生。

重要的是要记住React使用===（三等）来比较type值，因此它们必须是同一个类或相同函数的相同实例。

下一个场景更有趣，因为这是开发者最常使用React的方式。

▌Case 4：type是一个组件。

// before update:
{ type: Table, props: { rows: rows } }

// after update:
{ type: Table, props: { rows: rows } }

你可能会说，“这好像没有任何变化”，但这是不对的。

如果type是对函数或类的引用（即常规React组件），并且启动了树diff比较过程，那么React将始终尝试查看组件内部的所有child以确保render的返回值没有更改。即在树下比较每个组件 - 是的，复杂的渲染也可能变得昂贵！

组件中的children

除了上面描述的四种常见场景之外，当元素有多个子元素时，开发者还需要考虑React的行为。假设有这样一个元素：

// ...
props: {
  children: [
      { type: 'div' },
      { type: 'span' },
      { type: 'br' }
  ]
},
// ...

开发者开发者想将它重新渲染成这样(span和div交换了位置)：

// ...
props: {
  children: [
    { type: 'span' },
    { type: 'div' },
    { type: 'br' }
  ]
},
// ...

那么会发生什么？

当React看到里面的任何数组类型的props.children，它会开始将它中的元素与之前看到的数组中的元素按顺序进行比较：index 0将与index 0，index 1与index 1进行比较，对于每对子元素，React将应用上述规则集进行比较更新。在以上的例子中，它看到div变成一个span这是一个情景3中的情况。但这有一个问题：假设开发者想要从1000行表中删除第一行。React必须“更新”剩余的999个孩子，因为如果与先前的逐个索引表示相比，他们的内容现在将不相等。

幸运的是，React有一种内置的方法来解决这个问题。如果元素具有key属性，则元素将通过key而不是索引进行比较。只要key是唯一的，React就会移动元素而不将它们从DOM树中移除，然后将它们放回（React中称为挂载/卸载的过程）。

// ...
props: {
  children: [ // 现在react就是根据key，而不是索引来比较了
    { type: 'div', key: 'div' },
    { type: 'span', key: 'span' },
    { type: 'br', key: 'bt' }
  ]
},
// ...

当状态改变时

到目前为止，本文只触及了props，React哲学的一部分，但忽略了state。这是一个简单的“有状态”组件：

class App extends Component {
  state = { counter: 0 }

  increment = () => this.setState({
    counter: this.state.counter + 1,
  })

  render = () => (
    {'Counter: ' + this.state.counter}
  )
}

现在，上述例子中的state对象有一个counter属性。单击按钮会增加其值并更改按钮文本。但是当用户点击时，DOM会发生什么？它的哪一部分将被重新计算和更新？

调用this.setState也会导致重新渲染，但不会导致整个页面重渲染，而只会导致组件本身及其子项。父母和兄弟姐妹都可以幸免于难。

修复问题

本文准备了一个DEMO，这是修复问题前的样子。你可以在这里查看其源代码。不过在此之前，你还需要安装React Developer Tools。

打开demo要看的第一件事是哪些元素以及何时导致Virtual DOM更新。导航到浏览器的Dev Tools中的React面板，点击设置然后选择“Highlight Updates”复选框：

现在尝试在表中添加一行。如你所见，页面上的每个元素周围都会出现边框。这意味着每次添加行时，React都会计算并比较整个Virtual DOM树。现在尝试按一行内的计数器按钮。你将看到Virtual DOM如何更新 （state仅相关元素及其子元素更新）。

React DevTools暗示了问题可能出现的地方，但没有告诉开发者任何细节：特别是有问题的更新是指元素“diff”之后有不同，还是组件被unmount/mount了。要了解更多信息，开发者需要使用React的内置分析器（请注意，它不能在生产模式下工作）。

转到Chrome DevTools中的“Performance”标签。点击record按钮，然后点击表格。添加一些行，更改一些计数器，然后点击“Stop”按钮。稍等一会儿之后开发者会看到：

在结果输出中，开发者需要关注“Timing”。缩放时间轴，直到看到“React Tree Reconciliation”组及其子项。这些都是组件的名称，旁边有[update]或[mount]。可以看到有一个TableRow被mount了，其他所有的TableRow都在update，这并不是开发者想要的。

大多数性能问题都由[update]或[mount]引起

一个组件（以及组件下的所有东西）由于某种原因在每次更新时重新挂载，开发者不想让它发生（重新挂载很慢），或者在大型分支上执行代价过大的重绘，即使组件似乎没有发生任何改变。

修复mount/unmount

现在，当开发者了解React如何决定更新Virtual DOM并知道幕后发生的事情时，终于准备好解决问题了！修复性能问题首先要解决 mount/unmount。

如果开发者将任何元素/组件的多个子元素在内部表示为数组，那么程序可以获得非常明显的速度提升。

考虑一下：

  
  

 
 
在虚拟DOM中，将表示为：
 
 
// ...
props: {
  children: [
    { type: Message },
    { type: Table },
    { type: Footer }
  ]
}
// ...
 
 
一个简单的Message组件（是一个div带有一些文本，像是猪齿鱼的顶部通知）和一个很长的Table，比方说1000多行。它们都是div元素的child，因此它们被放置在父节点的props.children之下，并且它们没有key。React甚至不会通过控制台警告来提醒开发者分配key，因为子节点React.createElement作为参数列表而不是数组传递给父节点。
 
 
现在，用户已经关闭了顶部通知，所以Message从树中删除。Table、Footer是剩下的child。
 
 
// ...
props: {
  children: [
    { type: Table },
    { type: Footer }
  ]
}
// ...
 
 
React如何看待它？它将它视为一系列改变了type的child：children[0]的type本来是Message，但现在他是Table。因为它们都是对函数（和不同函数）的引用，它会卸载整个Table并再次安装它，渲染它的所有子代：1000多行！
 
 
因此，你可以添加唯一键（但在这种特殊情况下使用key不是最佳选择）或者采用更智能的trick：使用 && 的布尔短路运算，这是JavaScript和许多其他现代语言的一个特性。像这样：
 
 

  {isShowMessage && }
  

 
 
即使Message被关闭了(不再显示)，props.children父母div仍将拥有三个元素，children[0]具有一个值false（布尔类型）。还记得true/false, null甚至undefined都是Virtual DOM对象type属性的允许值吗？浏览器最终得到类似这样的东西：
 
 
// ...
props: {
  children: [
    false, //  isShowMessage &&  短路成了false
    { type: Table },
    { type: Footer }
  ]
}
// ...
 
 
所以，不管Message是否被显示，索引都不会改变，Table仍然会和Table比较，但仅仅比较Virtual DOM通常比删除DOM节点并从中创建它们要快得多。
 
 
现在来看看更高级的东西。开发者喜欢HOC。高阶组件是一个函数，它将一个组件作为一个参数，添加一些行为，并返回一个不同的组件（函数）：
 
 
function withName(SomeComponent) {
  return function(props) {
    return ;
  }
}
 
 
开发者在父render方法中创建了一个HOC 。当React需要重新渲染树时，React 的Virtual DOM将如下所示：
 
 
// On first render:
{
  type: ComponentWithName,
  props: {},
}

// On second render:
{
  type: ComponentWithName, // Same name, but different instance
  props: {},
}
 
 
现在，React只会在ComponentWithName上运行一个diff算法，但是这次同名引用了一个不同的实例，三等于比较失败，必须进行完全重新挂载。注意它也会导致状态丢失，幸运的是，它很容易修复：只要返回的实例都是同一个就好了：
 
 
// 单例
const ComponentWithName = withName(Component);

class App extends React.Component() {
  render() {
    return ;
  }
}
 
 
修复update
 
 
现在浏览器已经确保不会重新装载东西了，除非必要。但是，对位于DOM树根目录附近的组件所做的任何更改都将导致其所有子项的进行对比重绘。结构复杂，价格昂贵且经常可以避免。
 
 
如果有办法告诉React不要查看某个分支，那将是很好的，因为它没有任何变化。
 
 
这种方式存在，它涉及一个叫shouldComponentUpdate的组件生命周期函数。React会在每次调用组件之前调用此方法，并接收props和state的新值。然后开发者可以自由地比较新值和旧值之间的区别，并决定是否应该更新组件（返回true或false）。如果函数返回false，React将不会重新渲染有问题的组件，也不会查看其子组件。
 
 
通常比较两组props和state一个简单的浅层比较就足够了：如果顶层属性的值相同，浏览器就不必更新了。浅比较不是JavaScript的一个特性，但开发者很多方法来自己实现它，为了不重复造轮子，也可以使用别人写好的方法。
 
 
在引入浅层比较的npm包后，开发者可以编写如下代码：
 
 
class TableRow extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    const { props, state } = this;
    return !shallowequal(props, nextProps)
           && !shallowequal(state, nextState);
  }
  render() { /* ... */ }
}
 
 
但是你甚至不必自己编写代码，因为React在一个名为React.PureComponent的类中内置了这个功能，它类似于React.Component，只是shouldComponentUpdate已经为你实现了浅层props/state比较。
 
 
或许你会有这样的想法，能替换Component为PureComponent就去替换。但开发者如果错误地使用PureComponent同样会有重新渲染的问题存在，需要考虑下面三种情况：
 
 
 { /* ... */ }}
/>
上面的代码片段演示了三种最常见的反模式，请尽量避免它们！
正确地使用PureComponent，你可以在这里看到所有的TableRow都被“纯化”后渲染的效果。
但是，如果你迫不及待想要全部使用纯函数组件，这样是不对的。比较两组props和state不是免费的，对于大多数基本组件来说甚至都不值得：运行shallowCompare比diff算法需要更多时间。
可以使用此经验法则：纯组件适用于复杂的表单和表格，但它们通常会使按钮或图标等简单元素变慢。
现在，你已经熟悉了React的渲染模式，接下来就开始前端优化之旅吧。

   本篇文章出自 
  Choerodon猪齿鱼社区陈彬杰。 
 

                    

                        
                        

                            
 
                        
                        
                        

                            

                        
                        
                        

                            

                        
                    
                

        
你可能感兴趣的:(react.js,virtual-dom,choerodon)
        

            

                

                    
GPT实操——利用GPT创建一个应用
                        狗木马
深度学习gpt-3gpt
                        
功能描述信息查询：用户可以询问各种问题，如天气、新闻、股票等，机器人会返回相关信息。任务执行：用户可以要求机器人执行一些简单的任务，如设置提醒、发送邮件等。情感支持：机器人可以与用户进行情感交流，提供安慰和支持。个性化设置：用户可以自定义机器人的回复风格和偏好。技术栈前端：React.js后端：Node.js+Express数据库：MongoDB自然语言处理：OpenAIGPT-3API其他工具：
                    
                    
React.js 组件间数据传递的常见问题及解决方案
                        JJCTO袁龙
reactreact.js前端前端框架
                        
React.js组件间数据传递的常见问题及解决方案在React.js开发中，组件间的数据传递是构建复杂用户界面的基础。然而，开发者在实现组件间数据传递时可能会遇到各种问题，导致数据无法正确传递或更新。本文将探讨这些问题的常见原因，并提供相应的解决方案。一、React.js组件间数据传递的常见问题（一）数据传递不正确父组件传递给子组件的props可能未正确接收或使用，导致子组件无法正确显示数据。（二
                    
                    
React.js 错误解析：React.Children.only 预期仅接收单个 React 元素子节点
                        JJCTO袁龙
reactreact.js前端javascript
                        
React.js错误解析：React.Children.only预期仅接收单个React元素子节点在React.js开发中，React.Children.only是一个非常有用的工具，用于确保组件仅接收单个子元素。然而，开发者可能会遇到一个令人困惑的错误：React.Children.onlyexpectedtoreceiveasingleReactelementchild。这个错误表明传递给Re
                    
                    
React.js在前端移动端开发中的应用
                        大厂前端小白菜
前端react.js前端框架ai
                        
React.js在前端移动端开发中的应用关键词：React.js、移动端开发、跨平台、组件化、性能优化、ReactNative、PWA摘要：本文将深入探讨React.js在移动端开发中的应用场景和技术实现。从React的核心特性出发，分析其在移动端的优势，详细介绍ReactNative的工作原理，并通过实际案例展示如何构建高性能的移动应用。文章还将对比不同移动端开发方案，提供性能优化建议，并展望R
                    
                    
React应用中的受保护路由与Flux架构
                        息相吹
受保护路由重定向机制Flux架构单向数据流Backbone模型
                        
背景简介React.js因其组件化和声明式的编程范式受到了前端开发者的广泛喜爱。然而，对于大型应用来说，仅仅依赖React.js是不够的，特别是在状态管理和数据流方面。本文将结合书籍内容，探讨如何在React应用中实现受保护路由和如何采用Flux架构简化应用的状态管理。受保护路由的实现与重定向机制在React应用中，受保护路由是一种常见的需求，它确保未经授权的用户无法访问需要认证的页面。例如，如果
                    
                    
轻量级、无依赖、响应式粒子背景动画库——tsparticles、@tsparticles/engine、@tsparticles/react
                        

                        
项目简介tsparticles-demo是一个基于React和tsparticles的可视化粒子特效演示项目，旨在为开发者和设计师提供丰富、炫酷的粒子动画效果参考。项目支持多种粒子特效切换，界面美观，交互友好，适合用于网页背景、登录页、展示页等多种场景。无依赖项（*），浏览器直接可用，且兼容React.js、Vue.js（2.x和3.x）、Angular、Svelte、jQuery、Preact、
                    
                    
前端 React.js 项目的性能优化的成功案例分析
                        前端视界
前端艺匠馆前端react.js性能优化ai
                        
前端React.js项目的性能优化的成功案例分析关键词：React.js性能优化、代码拆分与懒加载、虚拟列表与长列表优化、Webpack深度调优、Fiber架构实践、SSR与SSG落地、React.memo与useCallback最佳实践摘要：本文通过三个真实企业级React项目的性能优化案例，系统解析从性能瓶颈诊断到优化策略落地的完整流程。结合React核心原理（如Fiber架构、虚拟DOMdi
                    
                    
React.js前端开发中的性能优化的常见挑战与解决思路
                        大厂前端小白菜
前端开发实战react.js性能优化前端
                        
React.js前端开发中的性能优化的常见挑战与解决思路关键词：React性能优化、虚拟DOM、重新渲染、代码分割、内存管理摘要：本文深入探讨React应用开发中常见的性能瓶颈及其解决方案。从虚拟DOM原理到Fiber架构演进，从组件渲染机制到内存泄漏预防，通过算法解析、数学模型验证和实战案例，系统性地构建React应用性能优化知识体系。本文还将提供可落地的性能检测工具链和最佳实践方案。文章目录R
                    
                    
前端 React.js 组件复用与封装技巧
                        大厂前端小白菜
前端开发实战前端react.js前端框架ai
                        
前端React.js组件复用与封装技巧关键词：React.js、组件复用、组件封装、前端开发、代码复用性摘要：本文围绕前端React.js组件复用与封装技巧展开深入探讨。在当今前端开发中，高效的组件复用和封装能够显著提升开发效率、降低维护成本。文章首先介绍了相关背景知识，包括目的、预期读者等；接着详细阐述核心概念，剖析组件复用与封装的原理和架构；然后讲解核心算法原理并给出Python示例；再介绍相
                    
                    
前端React.js与GraphQL的集成应用
                        大厂前端小白菜
前端开发实战前端react.jsgraphqlai
                        
前端React.js与GraphQL的集成应用关键词：React.js、GraphQL、集成应用、前端开发、数据交互摘要：本文深入探讨了前端React.js与GraphQL的集成应用。首先介绍了相关背景知识，包括React.js和GraphQL的概念、目的和适用范围，以及预期读者和文档结构。接着详细阐述了核心概念，如React.js的组件化和GraphQL的查询语言特性，通过文本示意图和Merma
                    
                    
新手如何选择前端框架？
                        XI锐真的烦
前端框架
                        
下面是比较流行的前端框架Vue.js和React.js的全面横向对比，从多个维度帮你了解它们的异同与适用场景：框架概况对比维度Vue.jsReact.js初始发布2014年，由尤雨溪（EvanYou）开发2013年，由Meta（Facebook）开发当前版本Vue3.x（CompositionAPI支持）React18.x（支持concurrent模式）类型渐进式框架（可独立使用或组合）UI库（关
                    
                    
Bug问题
                        帅帅哥的兜兜
bug
                        
一、list页面importReact,{useEffect,useState}from'react';import{shallowEqual,useHistory,useSelector}from'dva';import{Button,message}from'choerodon-ui/pro';importformatterCollectionsfrom'hzero-front/lib/uti
                    
                    
前端jQuery与React.js的对比分析
                        大厂前端小白菜
前端开发实战前端jqueryreact.jsai
                        
前端jQuery与React.js的对比分析关键词：前端开发、jQuery、React.js、对比分析、DOM操作、组件化摘要：本文旨在对前端开发中广泛使用的jQuery和React.js进行全面的对比分析。首先介绍jQuery和React.js的背景知识，包括它们的目的、适用读者群体等。接着深入探讨两者的核心概念、架构及联系，详细阐述核心算法原理和具体操作步骤，结合数学模型和公式进行说明。通过项
                    
                    
前端必知！React.js 入门全攻略
                        大厂前端小白菜
前端开发实战前端react.js前端框架ai
                        
前端必知！React.js入门全攻略关键词：React.js、前端开发、组件化、虚拟DOM、状态管理、Hooks、JSX摘要：本文是一份全面的React.js入门指南，从基础概念到高级应用，系统性地介绍了React的核心原理和最佳实践。我们将深入探讨虚拟DOM、组件化开发、状态管理、Hooks等关键概念，并通过实际代码示例展示如何构建现代化的React应用。无论你是刚入门的前端开发者，还是希望系统
                    
                    
React.js 与 Apollo Server：全栈 GraphQL
                        前端视界
react.jsgraphql前端ai
                        
React.js与ApolloServer：全栈GraphQL关键词：React.js、ApolloServer、GraphQL、全栈开发、前端与后端交互摘要：本文将带领大家走进全栈GraphQL的世界，详细介绍React.js和ApolloServer的结合使用。从核心概念的解释到具体的算法原理、操作步骤，再到项目实战案例和实际应用场景，全方位剖析这一技术组合。让大家了解如何利用React.js
                    
                    
React.js 与 Alpine.js 对比教程：现代前端开发的两大选择
                        王小玗
javscripthtmlcssreact.js前端前端框架javascript
                        
React.js与Alpine.js对比教程：现代前端开发的两大选择React.js和Alpine.js代表了现代前端开发的两种不同哲学和适用场景。本教程将全面介绍这两个框架的核心概念、使用方法和适用场景，帮助开发者根据项目需求做出明智选择。第一部分：React.js深度教程1.React.js简介与核心概念React.js是由Facebook开发并开源的JavaScript库，用于构建用户界面。
                    
                    
《大模型项目实战》：从0到1，打造属于你的多领域智能AI Chat应用，非常详细收藏这一篇就够了！
                        AGI大模型学习
人工智能大模型项目大模型实战大模型AI大模型大模型学习大模型入门
                        
目标基于大语言模型的Chat应用，是一种利用自然语言处理技术来进行对话交互的智能应用。大语言模型通过大量数据的学习和训练，能够理解自然语言表达的语义，具备智能对话的能力。当用户向Chat应用提出问题时，Chat应用就会利用其学习到的知识和自然语言处理技术来理解用户的意图，然后推理生成相应的答案。我们的目标是使用React.js开发一个通用的Chat应用程序，提供对话Web界面，调用ChatGLM3
                    
                    
前端React.js与CSS的完美结合
                        大厂前端小白菜
前端开发实战前端react.jscssai
                        
前端React.js与CSS的完美结合关键词：React.js、CSS-in-JS、StyledComponents、CSSModules、组件化样式、性能优化、设计系统摘要：本文深入探讨React.js与现代CSS技术的结合方式，从传统的CSS方法到最前沿的CSS-in-JS解决方案。我们将分析各种样式方案的优缺点，展示如何构建可维护、高性能的React组件样式系统，并通过实际案例演示最佳实践。
                    
                    
使用 React PDF 构建 React.js PDF 查看器的指南
                        ComPDFKit
开源PDF库react.jspdf前端
                        
在本文中，我们将重点介绍在React.js中制作PDF查看器的最受欢迎的开源库。具体来说，我们将利用著名的开源库react-pdf的功能，指导您完成创建React.jsPDF查看器的过程。通过本教程，您将在第一部分学习如何使用React-PDF在React.js应用程序中实现功能齐全的PDF查看器。在第二部分中，我们将重点介绍如何集成ComPDF以提供更多PDF功能，从而进一步增强用户的文档处理体
                    
                    
React.js 中组件可复用性设计不足的问题及解决方法
                        JJCTO袁龙
reactreact.js前端前端框架
                        
React.js中组件可复用性设计不足的问题及解决方法在React.js开发中，组件的可复用性是提高开发效率和代码质量的关键。然而，开发者有时可能会忽视组件的可复用性设计，导致代码重复、难以维护和扩展。本文将探讨这些问题的常见原因，并提供相应的解决方法。一、React.js中组件可复用性设计不足的常见问题（一）组件功能过于单一如果组件功能过于单一，可能会导致代码重复，难以复用。错误示例：const
                    
                    
React.js 中错误使用 `ref` 转发的问题及解决方法
                        JJCTO袁龙
reactreact.jsjavascript前端
                        
React.js中错误使用ref转发的问题及解决方法在React.js开发中，ref是一个强大的工具，用于直接访问DOM元素或在组件之间共享数据。ref转发（React.forwardRef）允许你将一个ref通过组件传递给子组件。然而，开发者有时可能会错误地使用ref转发，导致无法正确访问目标元素或组件。本文将探讨这些问题的常见原因，并提供相应的解决方法。一、React.js中错误使用ref转发
                    
                    
前端 React.js 性能优化的最佳时间点
                        大厂前端小白菜
前端react.js性能优化ai
                        
前端React.js性能优化的最佳时间点关键词：前端开发、React.js、性能优化、最佳时间点、渲染性能摘要：本文聚焦于前端React.js性能优化的最佳时间点。首先介绍了在前端开发中React.js性能优化的重要性及背景信息，接着深入剖析了React.js性能优化所涉及的核心概念与联系，阐述了相关算法原理和操作步骤，并结合数学模型和公式进行说明。通过项目实战展示了代码案例及详细解释，探讨了Re
                    
                    
React.js 中组件重复调用 `useEffect` 的问题及解决方法
                        JJCTO袁龙
reactreact.js前端前端框架
                        
React.js中组件重复调用useEffect的问题及解决方法在React.js开发中，useEffect是一个非常重要的Hook，用于处理组件的副作用（如数据获取、订阅或手动更改DOM等）。然而，开发者在使用useEffect时可能会不小心导致组件重复调用useEffect，从而引发性能问题或错误行为。本文将探讨这些问题的常见原因，并提供相应的解决方法。一、React.js中组件重复调用use
                    
                    
掌握 React.js 前端开发的生命周期方法
                        前端视界
CSreact.js前端前端框架ai
                        
掌握React.js前端开发的生命周期方法关键词：React.js、生命周期方法、前端开发、组件、挂载、更新、卸载摘要：本文深入探讨了React.js前端开发中的生命周期方法。首先介绍了学习React.js生命周期方法的背景信息，包括目的、预期读者等。接着详细阐述了核心概念，通过文本示意图和Mermaid流程图展示其原理和架构。然后对核心算法原理进行讲解，并给出Python源代码示例。同时，介绍了
                    
                    
React 19马上来了，你准备好了吗？
                        Baoing_
React.jsreact.jsjavascript前端前端框架
                        
React19是React.js的一次重大更新，带来了许多令人激动的新特性和改进。在这篇文章中，我们将深入探讨这些新特性，并提供一些代码示例，以帮助您更好地理解它们。全新编译器功能其中React19核心功能之一是全新的React编译器，它引入了许多令人激动的新功能，使开发人员能够更轻松地编写和维护他们的代码。一、即时反馈在React19中，编译器引入了即时反馈功能，这意味着当您编辑代码时，您将立即
                    
                    
在 .NET 8 中使用自定义令牌身份验证掌握 SignalR Hub 安全性
                        csdn_aspnet
.Net8.0.Net8SignalR
                        
最近在练习做一个Web开发项目，需要使用WebSockets传输数据，实现实时通信。这是一个React.js项目，后端是.NET。虽然MSDN提供了出色的顶级文档，但它通常缺少高级用例所需的低级细节。一种这样的场景是使用自定义令牌对SignalRHub进行身份验证。是的，自定义令牌，而不是JWT或默认Bearer令牌。本文探讨如何实现这一点。最后，您将拥有一个需要身份验证并使用自定义令牌的Sign
                    
                    
前端开发必备：HTML、CSS、JavaScript 基础与 Vue.js、React.js、Angular.js 等热门框架，还有 Uniapp 小程序实战攻略
                        魏大帅。
前端htmlcssjavascript前端框架
                        
在当今数字化时代，前端开发对于构建用户与数字产品交互界面起着至关重要的作用。一个美观、易用且性能良好的前端界面能够极大地提升用户体验，为产品的成功奠定坚实基础。一、前端开发的重要性随着互联网的不断发展，用户对数字产品的界面要求越来越高。前端开发不仅要实现美观的设计，还要保证良好的用户交互和高效的性能。无论是网页、移动应用还是桌面软件，前端开发都是用户与产品直接接触的部分，其重要性不言而喻。二、前端
                    
                    
React.js 中不当使用生命周期方法的问题及解决方案
                        JJCTO袁龙
reactreact.js前端前端框架
                        
React.js中不当使用生命周期方法的问题及解决方案在React.js开发中，生命周期方法是组件从创建到销毁过程中各个阶段的钩子函数。正确使用这些方法对于优化性能、避免内存泄漏和确保组件行为正确至关重要。然而，开发者在使用生命周期方法时可能会遇到一些问题，导致应用出现异常或性能问题。本文将探讨这些问题的常见原因，并提供相应的解决方案。一、React.js生命周期方法的常见问题（一）使用废弃的生命
                    
                    
从 0 到 1 搭建一个 Web 应用项目：详细步骤与踩坑记录
                        算法探索者
前端
                        
一、引言在当今数字化时代，Web应用无处不在。对于开发者而言，掌握从0到1搭建Web应用项目的技能至关重要。本指南将带你逐步完成一个简单Web应用项目的搭建，分享技术选型思路以及在过程中遇到的问题和解决方案，助力你开启Web开发之旅。二、技术选型（一）前端框架：选择React.js。它具有高效的虚拟DOM机制，能够快速更新页面，提升用户体验。同时，React生态系统丰富，有大量现成的组件库和工具可
                    
                    
《React开发实践：掌握Redux与Hooks应用》——开启你的前端进阶之旅
                        JJCTO袁龙
前端react.js前端框架
                        
文章标题《React开发实践：掌握Redux与Hooks应用》——开启你的前端进阶之旅在前端开发的浪潮中，React.js已经成为开发者们不可或缺的利器。它以其高效、灵活的特性，成为构建现代Web应用的首选框架之一。然而，随着项目复杂度的增加，如何更好地管理状态、优化性能、提升代码可维护性，成为每个开发者必须面对的挑战。幸运的是，我最近出版的《React开发实践：掌握Redux与Hooks应用》这
                    
                                
apache ftpserver-CentOS config
                                    gengzg
apache
                                    
<server xmlns="http://mina.apache.org/ftpserver/spring/v1"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="
       http://mina.apache.o
                                
                                
优化MySQL数据库性能的八种方法
                                    AILIKES
sqlmysql
                                    
1、选取最适用的字段属性 　　MySQL可以很好的支持大数据量的存取，但是一般说来，数据库中的表越小，在它上面执行的查询也就会越快。因此，在创建表的时候，为了获得更好的 性能，我们可以将表中字段的宽度设得尽可能小。例如，在定义邮政编码这个字段时，如果将其设置为CHAR(255),显然给数据库增加了不必要的空间，甚至使用VARCHAR这种类型也是多余的，因为CHAR(6)就可以很
                                
                                
JeeSite 企业信息化快速开发平台
                                    Kai_Ge
JeeSite
                                    
JeeSite 企业信息化快速开发平台  
平台简介 
JeeSite是基于多个优秀的开源项目，高度整合封装而成的高效，高性能，强安全性的开源Java EE快速开发平台。 
JeeSite本身是以Spring Framework为核心容器，Spring MVC为模型视图控制器，MyBatis为数据访问层， Apache Shiro为权限授权层，Ehcahe对常用数据进行缓存，Activit为工作流
                                
                                
通过Spring Mail Api发送邮件
                                    120153216
邮件main
                                    
原文地址：http://www.open-open.com/lib/view/open1346857871615.html 
使用Java Mail API来发送邮件也很容易实现，但是最近公司一个同事封装的邮件API实在让我无法接受，于是便打算改用Spring Mail API来发送邮件，顺便记录下这篇文章。 【Spring Mail API】 
Spring Mail API都在org.spri
                                
                                
Pysvn 程序员使用指南
                                    2002wmj
SVN
                                    
源文件:http://ju.outofmemory.cn/entry/35762 
这是一篇关于pysvn模块的指南. 
完整和详细的API请参考 http://pysvn.tigris.org/docs/pysvn_prog_ref.html. 
pysvn是操作Subversion版本控制的Python接口模块. 这个API接口可以管理一个工作副本, 查询档案库, 和同步两个. 
该
                                
                                
在SQLSERVER中查找被阻塞和正在被阻塞的SQL
                                    357029540
SQL Server
                                    
SELECT  R.session_id AS BlockedSessionID ,  
        S.session_id AS BlockingSessionID ,  
        Q1.text AS Block
                                
                                
Intent 常用的用法备忘
                                    7454103
.netandroidGoogleBlogF#
                                    
Intent 
    应该算是Android中特有的东西。你可以在Intent中指定程序 要执行的动作（比如：view,edit,dial），以及程序执行到该动作时所需要的资料 。都指定好后，只要调用startActivity()，Android系统 会自动寻找最符合你指定要求的应用 程序，并执行该程序。 
 
下面列出几种Intent 的用法 
显示网页: 
 

                                
                                
Spring定时器时间配置
                                    adminjun
spring时间配置定时器
                                    
红圈中的值由6个数字组成，中间用空格分隔。第一个数字表示定时任务执行时间的秒，第二个数字表示分钟，第三个数字表示小时，后面三个数字表示日，月，年，< xmlnamespace prefix ="o" ns ="urn:schemas-microsoft-com:office:office" />  
测试的时候，由于是每天定时执行，所以后面三个数
                                
                                
POJ 2421 Constructing Roads 最小生成树
                                    aijuans
最小生成树
                                    
来源：http://poj.org/problem?id=2421 
题意：还是给你n个点，然后求最小生成树。特殊之处在于有一些点之间已经连上了边。 
思路：对于已经有边的点，特殊标记一下，加边的时候把这些边的权值赋值为0即可。这样就可以既保证这些边一定存在，又保证了所求的结果正确。 
代码： 
 
#include <iostream>
#include <cstdio>
                                
                                
重构笔记——提取方法（Extract Method）
                                    ayaoxinchao
java重构提炼函数局部变量提取方法
                                    
提取方法（Extract Method）是最常用的重构手法之一。当看到一个方法过长或者方法很难让人理解其意图的时候，这时候就可以用提取方法这种重构手法。 
  
下面是我学习这个重构手法的笔记： 
  
提取方法看起来好像仅仅是将被提取方法中的一段代码，放到目标方法中。其实，当方法足够复杂的时候，提取方法也会变得复杂。当然，如果提取方法这种重构手法无法进行时，就可能需要选择其他
                                
                                
为UILabel添加点击事件
                                    bewithme
UILabel
                                    
    默认情况下UILabel是不支持点击事件的，网上查了查居然没有一个是完整的答案，现在我提供一个完整的代码。 
  
  UILabel *l = [[UILabel alloc] initWithFrame:CGRectMake(60, 0, listV.frame.size.width - 60, listV.frame.size.height)]
                                
                                
NoSQL数据库之Redis数据库管理(PHP-REDIS实例)
                                    bijian1013
redis数据库NoSQL
                                    
一.redis.php 
<?php
      //实例化
      $redis = new Redis();
      //连接服务器
      $redis->connect("localhost");
      //授权
      $redis->auth("lamplijie");
      //相关操
                                
                                
SecureCRT使用备注
                                    bingyingao
secureCRT每页行数
                                    
SecureCRT日志和卷屏行数设置 
 
一、使用securecrt时，设置自动日志记录功能。 
 
1、在C:\Program Files\SecureCRT\下新建一个文件夹(也就是你的CRT可执行文件的路径），命名为Logs； 
 
2、点击Options -> Global Options -> Default Session -> Edite Default Sett
                                
                                
【Scala九】Scala核心三：泛型
                                    bit1129
scala
                                    
泛型类 
package spark.examples.scala.generics

class GenericClass[K, V](val k: K, val v: V) {
  def print() {
    println(k + "," + v)
  }
}

object GenericClass {
  def main(args: Arr
                                
                                
素数与音乐
                                    bookjovi
素数数学haskell
                                    
    由于一直在看haskell，不可避免的接触到了很多数学知识，其中数论最多，如素数，斐波那契数列等，很多在学生时代无法理解的数学现在似乎也能领悟到那么一点。 
    闲暇之余，从图书馆找了<<The music of primes>>和<<世界数学通史>>读了几遍。其中素数的音乐这本书与软件界熟知的&l
                                
                                
Java-Collections Framework学习与总结-IdentityHashMap
                                    BrokenDreams
Collections
                                    
        这篇总结一下java.util.IdentityHashMap。从类名上可以猜到，这个类本质应该还是一个散列表，只是前面有Identity修饰，是一种特殊的HashMap。 
        简单的说，IdentityHashMap和HashM
                                
                                
读《研磨设计模式》-代码笔记-享元模式-Flyweight
                                    bylijinnan
java设计模式
                                    
声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ 
 
 
 



import java.util.ArrayList;
import java.util.Collection;
import java.util.HashMap;
import java.util.List;
import java
                                
                                
PS人像润饰&调色教程集锦
                                    cherishLC
PS
                                    
  1、仿制图章沿轮廓润饰——柔化图像，凸显轮廓 
 
http://www.howzhi.com/course/retouching/ 
  新建一个透明图层，使用仿制图章不断Alt+鼠标左键选点，设置透明度为21%，大小为修饰区域的1/3左右（比如胳膊宽度的1/3），再沿纹理方向（比如胳膊方向）进行修饰。 
  所有修饰完成后，对该润饰图层添加噪声，噪声大小应该和
                                
                                
更新多个字段的UPDATE语句
                                    crabdave
update
                                    
更新多个字段的UPDATE语句 
  
                 
                update tableA a
                   set (a.v1, a.v2, a.v3, a.v4) =   --使用括号确定更新的字段范围
          
                                
                                
hive实例讲解实现in和not in子句
                                    daizj
hivenot inin
                                    
本文转自：http://www.cnblogs.com/ggjucheng/archive/2013/01/03/2842855.html 
 
 
当前hive不支持 in或not in 中包含查询子句的语法，所以只能通过left join实现。 
 
假设有一个登陆表login(当天登陆记录,只有一个uid),和一个用户注册表regusers(当天注册用户，字段只有一个uid)，这两个表都包含
                                
                                
一道24点的10+种非人类解法（2,3,10,10）
                                    dsjt
算法
                                    
这是人类算24点的方法？！！！ 
 
事件缘由：今天晚上突然看到一条24点状态，当时惊为天人，这NM叫人啊？以下是那条状态 
 
朱明西 : 24点，算2 3 10 10，我LX炮狗等面对四张牌痛不欲生，结果跑跑同学扫了一眼说，算出来了，2的10次方减10的3次方。。我草这是人类的算24点啊。。 
 
然后么。。。我就在深夜很得瑟的问室友求室友算 
 
刚出完题，文哥的暴走之旅开始了 
 
5秒后
                                
                                
关于YII的菜单插件 CMenu和面包末breadcrumbs路径管理插件的一些使用问题
                                    dcj3sjt126com
yiiframework
                                    
在使用 YIi的路径管理工具时，发现了一个问题。                    <?php         
                                
                                
对象与关系之间的矛盾：“阻抗失配”效应[转]
                                    come_for_dream
对象
                                    
概述 
  
“阻抗失配”这一词组通常用来描述面向对象应用向传统的关系数据库（RDBMS）存放数据时所遇到的数据表述不一致问题。C++程序员已经被这个问题困扰了好多年，而现在的Java程序员和其它面向对象开发人员也对这个问题深感头痛。 
  
“阻抗失配”产生的原因是因为对象模型与关系模型之间缺乏固有的亲合力。“阻抗失配”所带来的问题包括：类的层次关系必须绑定为关系模式（将对象
                                
                                
学习编程那点事
                                    gcq511120594
编程互联网
                                    
一年前的夏天，我还在纠结要不要改行，要不要去学php？能学到真本事吗？改行能成功吗？太多的问题，我终于不顾一切，下定决心，辞去了工作，来到传说中的帝都。老师给的乘车方式还算有效，很顺利的就到了学校，赶巧了，正好学校搬到了新校区。先安顿了下来，过了个轻松的周末，第一次到帝都，逛逛吧！ 
接下来的周一，是我噩梦的开始，学习内容对我这个零基础的人来说，除了勉强完成老师布置的作业外，我已经没有时间和精力去
                                
                                
Reverse Linked List II
                                    hcx2013
list
                                    
Reverse a linked list from position m to n. Do it in-place and in one-pass. 
For example:Given 1->2->3->4->5->NULL, m = 2 and n = 4, 
return 
                                
                                
Spring4.1新特性——页面自动化测试框架Spring MVC Test HtmlUnit简介
                                    jinnianshilongnian
spring 4.1
                                    
目录 
Spring4.1新特性——综述 
Spring4.1新特性——Spring核心部分及其他 
Spring4.1新特性——Spring缓存框架增强 
Spring4.1新特性——异步调用和事件机制的异常处理 
Spring4.1新特性——数据库集成测试脚本初始化 
Spring4.1新特性——Spring MVC增强 
Spring4.1新特性——页面自动化测试框架Spring MVC T
                                
                                
Hadoop集群工具distcp
                                    liyonghui160com

                                    
  
  
1. 环境描述 
两个集群：rock 和 stone 
rock无kerberos权限认证，stone有要求认证。 
1. 从rock复制到stone，采用hdfs 
Hadoop distcp -i hdfs://rock-nn:8020/user/cxz/input hdfs://stone-nn:8020/user/cxz/运行在rock端，即源端问题：报版本
                                
                                
一个备份MySQL数据库的简单Shell脚本
                                    pda158
mysql脚本
                                    
　　主脚本（用于备份mysql数据库）：   　　该Shell脚本可以自动备份 
数据库。只要复制粘贴本脚本到文本编辑器中，输入数据库用户名、密码以及数据库名即可。我备份数据库使用的是mysqlump 命令。后面会对每行脚本命令进行说明。   　　 
1. 分别建立目录“backup”和“oldbackup”   　　#mkdir /backup   　　#mkdir /oldbackup   　
                                
                                
300个涵盖IT各方面的免费资源（中）——设计与编码篇
                                    shoothao
IT资源图标库图片库色彩板字体
                                    
 
 A. 免费的设计资源 
 
 
  Freebbble:来自于Dribbble的免费的高质量作品。 
  Dribbble:Dribbble上“免费”的搜索结果——这是巨大的宝藏。 
  Graphic Burger:每个像素点都做得很细的绝佳的设计资源。 
  Pixel Buddha:免费和优质资源的专业社区。 
  Premium Pixels:为那些有创意的人提供免费的素材。 
  
                                
                                
thrift总结 - 跨语言服务开发
                                    uule
thrift
                                    
官网 
官网JAVA例子 
thrift入门介绍 
IBM-Apache Thrift - 可伸缩的跨语言服务开发框架 
Thrift入门及Java实例演示 
thrift的使用介绍 
  
RPC  
  
POM： 
<dependency>
  <groupId>org.apache.thrift</groupId>
  
                                
                
            
        
    

    

        

            按字母分类：
            ABCDEFGHIJKLMNOPQRSTUVWXYZ其他
        
    

    

        

            首页 -
            关于我们 -
            站内搜索 -
            Sitemap -
            侵权投诉
        
        
版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.