Home JavaScript Nodejs Software Development React Programming Python Java Linux Open Source PHP Serverless React Native Software Engineering Coding Development Ruby Angular Typescript Redux Golang Reactjs Vuejs Ruby on Rails Developer Functional Programming Angularjs NPM Code Angular2 Webpack Learning To Code Csharp Codingbootcamp Json Flutter Sql Vue Unity Object Oriented Programming Languages Python Programming Data Structures C Angular 4 Dart Freecodecamp Cpp Frontend Development Swift Server Side Rendering iOS

关于 Reactjs 的优秀文章

为什么在React中使用索引作为键可能是一个坏主意?

假设您有一个项目列表,并且想要在React应用程序中将它们显示为ul, li元素。 当用户单击列表项之一时,您要删除该项并重新呈现列表。 在React中,您将执行以下操作(为简便起见,仅显示相关代码。完整示例在此处:https://codesandbox.io/s/pkqrj851nq) 请注意,即使删除了正确的项目, leave过渡如何也始终应用于列表中的最后一个项目? 这不是我们想要的,是吗? 原因是因为您没有为列表中的每个子元素传递唯一键。 没有唯一键,React无法区分是删除元素还是仅更改内容。 因此,当您删除列表中的第一项时,React的diff算法认为只有内容被更改了,因为key没有更改。 因此,它只会更新内容,而不会从DOM中物理删除第一个元素,因此不会应用leave动画。 但是当涉及到最后一个元素时,由于已经从列表中删除了一个项目,React 认为最后一个项目已被删除,并且实际上从DOM中删除了最后一个项目,因此应用了leave动画。 要解决此问题,我们只需要确保为每个子元素传递唯一的key 。 对于我们的情况,我们可以只传递项目名称,而不是index 。 {this.state.fruits.map((fruit,…

以前的React Context API的问题

我将讨论有关React版本低于16.3的上下文API的问题。 我们来看看显示日期和时间的简单应用。 有人提到“ 功能强大的上下文API ”。 然后看下一段。 “ 为什么不使用上下文 ” 它真的强大吗? 每段都提到“ 不要使用上下文 ”。 好的 ! 让我们检查一下,为什么多次提到“不使用上下文”。 您必须已阅读有关如何在React应用程序中提高性能的信息。 有许多方法可以提高性能。…

反应技巧—技术面试问题

在这篇文章中,我将展示一些可能在面试中被问到的问题。 最重要的是了解概念,而不是字面意思本身,好吗? 让我们开始吧! 您应该在哪个生命周期事件中发出AJAX请求,为什么? 所有请求都应在componentDidMount事件中完成,主要有两个原因: 新的React和解算法( Fiber )可以根据需要启动和停止渲染。 如果使用componentWillMount事件,它将是“不确定的”。 这意味着React会在需要时多次调用componentWillMount 。 我们无法保证在组件安装之前AJAX请求不会得到解决。 因此,在componentDidMount中执行AJAX将确保存在要更新的组件。 为什么键在React中如此重要? 这些键可帮助React跟踪列表中已更改,添加或删除的内容。 每个键都是唯一的(在列表中),这一点非常重要。 密钥使清单处理时的协调过程更加高效,因为React可以使用子元素上的密钥来知道它是新的还是刚刚更改的。 什么是功能组件?…

ReactJS ShouldComponentUpdate生命周期方法– Sandeep Kumar Patel –中

ReactJS组件具有7个生命周期方法,并具有从加载到安装再到卸载的每个React组件阶段的回调。 在本演示中 ,“ 我们将学习shouldComponentUpdate生命周期方法 ”。 以下代码选择了React组件的所有7个生命周期方法的使用。 从'react'导入React; WeatherComponent类扩展了React.Component { 构造函数(道具){ 超级(道具); this.state = { 天气:“晴天”, }; } //…

React技巧—使用create-react-app处理相对路径

处理相对路径并不是一件复杂的事情,但是当我们使用 create-react-app有时可能很艰巨。 为了配置路径和其他配置,我们通常使用Babel ,但是当我们使用create-react-app创建应用时,除非您弹出 ,否则Babel无法进行编辑。 在这篇文章中,我将向您展示如何使用Babel更改路径配置而不弹出应用程序。 让我们使用称为react-relative-path的create-react-app创建一个应用程序: $ create-react-app react-relative-path 现在,我将创建一些文件夹,添加一些组件并相互添加引用。 首先创建一个名为Api的文件夹,并添加一个Item.js文件。 还有一个名为Components的文件夹,其中包含子文件夹ListItems和Item ,如下所示: 在App.js上,我们仅导入并使用组件Item : 结果应该是这样的: 好的,一切正常,但是如果您决定更改文件夹结构?…

了解React源代码-初始渲染(类组件)V

了解React源代码I 了解React源代码II 了解React源代码III 了解React源代码IV 了解React源代码V(这一部分) 了解React源代码VI 了解React源代码VII 了解React源代码VIII 了解React源代码IX 上一次,我们完成了类组件呈现逻辑的上半部分,尽管在以下几个方面与简单组件呈现有所不同,但它们相似:1)实例化一个附加的ReactCompositeComponent来表示类组件( App ); 2)调用App.render() ,触发级联的React.createElement()来建立ReactElement树。 这次,我们将通过检查树中的ReactElement如何转换为各自的ReactDOMComponent以及最终转换为实际的DOM对象,来探索下半部分的更多分支。 本文中使用的文件 : renderers…

ReactEurope 2017采访Sunil Pai的#4

在ReactEurope 2017的第四次采访中,我们很高兴了解有关Sunil Pai的更多信息,也称为@threepointone。 Sunil是一位疯狂的科学家,他为myntra,yahoo,visa等网站建立了网站。 他还是魅力的作者 以及其他许多很棒的开源项目。 Sunil还将在会议上举办有关CSS-in-JS的研讨会。 在此处阅读有关Sunil的更多信息: 告诉我们一些关于你自己的信息,你来自哪里,你做什么工作? 嗨! 我叫苏尼尔(Sunil),我来自印度沿海地区,对javascript很着迷。 [嗨SUNIL] 在大学里干了很辛苦的事后,我跳上了UI潮流,带着它的“玩具语言”以及一切,正好在萤火虫进入beta的时候。 从那时起,我在大型和小型公司工作过许多演出,担任开发和设计职务。 不过最近,我一直在做这种工作。 太好了 在React之前您在使用什么? 没什么好想的,我正在做一些与页面上的“组件”相对应的状态保持不变的本地对象。…

学习React | 第2章 反应元素

React元素功能强大。 react元素与DOM元素类似,只不过它们都在内存中。 在上一章中,我们使用h1元素创建了问候消息。 现在,让我们尝试使用其他元素(如段落)。 我们可以这样做 const greeting = 欢迎! 基本上,用于DOM的React元素与对应的DOM非常相似。 有一些差异,但让我们在以后的文章中进行讨论。 嵌套元素 就像DOM元素一样,React元素也可以嵌套。 这样我们就可以创建一个嵌套元素。 因此,让我们尝试创建更详细的问候消息。 常量问候=( 欢迎您! 反应主题!…

在React Native Map上添加热图叠加

如果您尝试在react-native应用程序中实现地图,React Native Map是转到选项。 我敢肯定,您已经发现React Native Maps并未正式支持Heatmap叠加层而感到震惊。 但是,基于pjamrozowicz的出色工作,我派生了react native贴图(v0.21.0),并添加了更改以使热图正常工作。 请注意,我仅针对Android进行过测试。 安装套件 使用以下命令安装软件包 npm安装git + https://github.com/malithj/react-native-maps.git --save 安卓系统 在文件android/build.gradle添加以下代码块 flatDir…

Formularios en React.js /发布/ Laravel 5

可以通过React.js来解决配方中的所有内容,并可以通过http://axios.com/zh-cn/xp进行验证。 在第5条基础组件后,食用前茶可可。 Bajo la misma aplicacion vamos a crear el Formulario。 es necesario que tengas en cuenta dos…

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • …
  • 84
  • Next

Supreme Topics

快速遍历二叉树

DevOps:观看视频和观看视频

在Chingu偷听

使用Python和Kafka进行分布式视频流

Elasticsearch Bulk Api用于数据迁移

使用C#将Excel格式XLS转换为XLSX

华硕的管理员面板认证旁路–穆斯塔法·汗

在Azure函数中使用Python

Three.js或我的时间轴中有一个超级立方体,我无法下车

初创企业—您正在寻找哪些能力?

未在Javascript中指定对象顺序(除非已指定)

使用Lagos的React.js进行构建:第1部分— ReactDOM.render()

检查外包公司秘籍:10个技巧

AgileVentures生态系统审查:该领域审查步骤

解构React Native应用程序— Metro Transvia Mendoza —第1部分:功能

  • Copyright © 群控网 - All Rights Reserved.
  • Topics
  • Terms
  • Privacy Policy