React -如何获得特定div的高度(如果您知道它的类 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

「前端架构」使用React进行应用程序状态管理

但我的观点是，如果您的状态在逻辑上更为分离，并且位于React树中更靠近它的位置，那么就不会出现这个问题。这是真正的关键，如果您使用React构建应用程序，那么您的应用程序中已经安装了状态管理库。...CountDisplay /> div> ) } 注意：这个特定的代码示例非常做作，我不建议您使用上下文来解决这个特定的场景。...请阅读支柱钻井，以获得更好的理解为什么支柱钻井不一定是一个问题，往往是可取的。不要太快接触上下文！...如何将数据导入每个提供程序取决于这些提供程序使用的钩子以及如何在应用程序中检索数据，但您知道从何处开始查找（在提供程序中）如何工作。...如果您想知道这些用例是什么，那么jotai很好地解决的问题类型实际上在 Recoil: State Management for Today's React - Dave McCabe aka @mcc_abe

2.9K3 0

探索React Hooks：原来它们是这样诞生的！

在基于类的组件中，我们会说它在生命周期方法和自定义方法中。在功能组件中，它只是 JSX 之上的东西。在某种程度上，Hooks 的故事与 React 及其先前用于共享代码的 API 的故事密切相关。...当时，mixins 被指责为社区开始流行的一些反模式的根本原因。因此，当 React 在 2016 年获得真正的类时，大多数 React 开发人员为 mixins 的 API 消失而欢呼。...2016：类组件在JavaScript在ES2015（ES6）中获得类之后，React很快跟进了今天仍然可以使用的类组件。...这些特定方法是我们可能希望管理组件副作用的地方。...下面是一个使用自定义钩子共享数据获取逻辑的示例。你不必完全了解如何使用 useState 和 useEffect ，只需要了解它们为组件执行一些逻辑，我想共享它。

1.6K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

【译】改善React应用性能的5个建议

所以即使它自己的 props 没有改变，它的父组件也会导致它重新渲染。这个概念也适用于基于类的 React 组件的渲染方式。...React 的作者意识到这并不是一个理想的结果，在重新渲染前简单地比较新旧 props 可以获得一些简单的性能提升…这就是 React.memo 和 React.PureComponent 的设计初衷！...您可能想知道为什么 React 组件不会自动包含这些内部保护措施以防止过度渲染。...如果您不知道，代码分割的概念是将 JavaScript 客户端源代码（例如，React 应用程序代码）分成更小的块，并且只以一种惰性的方式加载这些块，如果没有任何代码拆分，单个包可能非常大： - bundle.js...加载后，它将开始请求包含实际博客文章的第二个 bundle。这是一个简单的示例，可以方便地进行代码分割。 ??? 如何在 React 中完成代码分割?

1.4K1 0

使用 useState 需要注意的 5 个问题

众所周知，hook 在 React 组件开发中变得越来越重要，特别是在功能组件中，因为它们已经完全取代了对基于类的组件的需求，而基于类的组件是管理有状态组件的传统方式。...useState hook 可能很难理解，特别是对于新手 React 开发人员或从基于类的组件迁移到函数组件的开发人员。...直接更新 useState 缺乏对 React 如何调度和更新状态的正确理解，很容易导致在更新应用程序状态时出现错误。...然而，虽然预定的更新仍然处于暂挂的转换中，但当前状态可能会被其他内容更改（例如多个用户的情况）。预定的更新将无法知道这个新事件，因为它只有单击按钮时所获得的状态快照的记录。...获得此属性名后，我们修改它以反映表单中的用户输入值。 6. 小结作为一个创建高度交互用户界面的 React 开发人员，你可能犯过上面提到的一些错误。

5K2 0

React----组件生命周期知识点整理

会在创建完类实例后，通过类实例调用的方法如果是自定义方法，React不会自己去调用，因此一般使用变量+箭头函数的形式，将该自定义方法作为一个事件的触发函数 ---- 生命周期理解 1.组件从创建到死亡它会经历一些特定的阶段...2.React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。 3.我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作。...---- 父子组件在A的类组件的render方法中调用B组件的标签，此时A是父组件，B是子组件 class A extends React.Component { //初始化状态 state={...它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期方法的任何返回值将作为参数传递给 componentDidUpdate()。...} //确保滑到某个位置，当前数据不会被挤下去 //更新后的数据 componentDidUpdate(prevProps, prevState, height) { //height获得的是

1.5K4 0

Sentry 开发者贡献指南 - 前端(ReactJS生态)

组件应该有一个关联的 .stories.js 文件来记录它应该如何使用。...此外，如果您需要使用 DOM 查询选择器，请使用 data-test-id 而不是类名。我们目前没有，但我们可以在构建过程中使用 babel 去除它。...使用多个 useEffect 回调表示您有一个高度有状态的组件，您应该使用类(class)组件来代替。... const Flex = styled('div')` display: flex; `; const Box = styled('div')` `; 属性如果您正在修改导出的组件...，请确保通过该组件的代码库进行 grep 以确保它没有被渲染为特定于 grid-emotion 的附加属性。

6.9K3 0

使用强大的 AirBnb Lottie 让你的 React APP 炫酷起来

然而，要制作好看的动画，可能需要大量的工作和大量的代码。我将向你展示如何使用一个非常强大的React库来制作令人惊叹的、像素完美的动画来增强你的应用程序，而不需要做很多工作。...当我们准备好使用它时，我们可以通过选择Lottie JSON下载动画的JSON文件: 不管你是如何创建React项目的，你都可以把它放在任何你喜欢的文件夹里。...我们需要获得对JSX/DOM元素的引用，我们希望将动画放入该元素，并向其提供JSON数据。...你可以通过提供一些样式并为容器div添加一个固定的宽度和高度来解决这个问题: div id="react-logo" style={{ width: 200, height: 200 }} /> Lottie.loadAnimation...如果您想使用Lottie的所有特性，但又担心在最终的bundle中引入过多的代码，可以按照如下方式导入Lottie的轻版本: import lottie from "lottie-web/build/player

2K2 0

【译】如何结合React Hooks来使用Redux

这意味着我们可以使用 React 的最新最佳实践。 Hooks 让我们为相同的功能编写更少的代码。我们需要编写的代码越少，我们就可以越快地启动应用程序。...简单的 Redux 组件这是一个非常基本和传统的 Redux 连接组件。您会如何使用 Hooks 来重构它?...用Redux切换复选框如果您对 hooks 有一定的了解，那么您可能知道 hooks 需要在函数组件中使用。您不能在 React 类中使用 hooks。...第1步 - 将类组件重构为函数组件将 React 组件从类转换到函数组件是相当简单的。...我们将类语法替换为更简单的函数语法。我们还从箭头函数参数 props 中解构了 ui 和 toggleSwitch属性。可以肯定的是，切换仍然按预期工作。

2.7K3 0

通过防止不必要的重新渲染来优化 React 性能

本文解释了如何仅在必要时更新组件，以及如何避免意外重新渲染的常见原因。...现在只有计数器 A 被重新渲染，因为它的 value 属性从 0 更改为 1。...如果您使用基于类的组件而不是函数组件，请将 extends React.Component 更改为 extends React.PureComponent 以获得相同的效果。...如果您使用基于类的组件，请向类添加方法并在构造函数中使用 bind 函数以确保它可以访问组件实例。...在可能的情况下，保持 DOM 结构相同。例如，如果您需要在列表中的组之间显示分隔符，请在列表元素之间插入分隔符，而不是为每个组添加包装 div。

6.2K4 1

CSS样式组件：为什么你应该（或不应该）使用它

在 CSS 中，您创建全局样式类，将其注入到 javascript 中，并为每个组件确定它是否需要特定的类名。特别是在具有大量组件的大型项目中，这些类可能会相互覆盖，从而导致应用程序中的样式不一致。...'bold' : 'normal'}; `); 与常规 CSS 相比，样式组件的更多优点前面的示例已经证明了如何从样式化组件的动态特性中受益。...Styled-components 生成唯一的类名如果您检查之前构建的组件，我们会在 DOM 中看到以下内容： div class="sc-hLQSwg eZXEhV”>I am a pretty...这可以确保您几乎不会出现与类名相关的错误。提示：如果您使用快照测试，动态生成类可能会很烦人。...结论考虑到性能问题，您是否还应该迁移 React 应用程序？即使您已经使用 CSS 模块或任何其他解决方案（例如 Tailwind 或 PostCSS）构建了它？或许。

1041 0

亲手打造属于你的 React Hooks

自定义 React Hook 是一个必要的工具，它可以让你为 React 应用程序添加特殊的、独特的功能。在许多情况下，如果你想向应用程序添加特定的特性，您可以简单地安装一个第三方库来解决您的问题。...但如果这样的库或钩子不存在，该怎么办? 作为 React 开发人员，学习如何创建自定义钩子来解决问题或在自己的 React 项目中添加缺失的特性是很重要的。...在这个循序渐进的指南中，我将通过分解我为自己的应用程序创建的三个钩子，以及创建这些钩子是为了解决什么问题，向您展示如何创建自己的自定义React钩子。...== "undefined") { return { width: 1200, height: 800 }; } } 如何从窗口得到宽度和高度假设我们在客户端并且可以获得窗口，我们可以使用...如何从window获得用户代理我们可以确定是否可以获得关于用户设备的信息的方法是通过userAgent属性(位于window的navigator属性上)。

10.1K6 0

如何在 React 中使用装饰器-即@修饰符

虽互不曾谋面,但希望能和您成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊标星公众号（ID：itclanCoder）如果不知道如何操作...前言装饰器 decorator 是一种函数,是 Es6 的一个语法糖,是一种与类(class)相关的语法,用来注释或修改类和方法以@+函数名形式展现,可以放在类和类方法的定义前面那它在 React...中是如何使用的呢,这里以create-react-app脚手架搭建的项目为例 01 为什么要使用装饰器模式?...,而不是在运行时,这意味着,装饰器能在编译阶段运行代码,它本身就是编译时执行的函数 ⒉ 装饰器只能用于类和类的方法,不能用于函数,因为它存在函数提升结语高阶组件是函数,参数是组件并返回一个组件的函数...或许不知不觉中,自己就已经实现了的,很久以前看过设计模式中的装饰器模式,一直云里雾里,不知道这个东西有什么用直到它在 React 中高阶组件还可以简写,这么用..

3.2K3 0

【React】2054- 为什么React Hooks优于hoc ？

在现代的 React世界中，每个人都在使用带有 React Hooks的函数组件。然而，高阶组件（HOC）的概念在现代的 React世界中仍然适用，因为它们可以用于类组件和函数组件。...，还要看到顺序也很重要：withFetch 需要是外部HOC，而 withLoading 和 withError 则没有特定的顺序，这给错误留下了很多空间。...在现代的 React世界中，每个人都在使用带有 React Hooks 的函数组件。然而，高阶组件（HOC）的概念在现代的 React世界中仍然适用，因为它们可以用于类组件和函数组件。...当使用相同的HOC两次时，这往往是明显的，但如果您使用两个不同的HOCs-- 只是偶然间 -- 使用相同的prop名称会发生什么呢？...div>; } return ; }; 通过这些额外的参数 -- 这里通过包围 HOC 的高阶函数传递 -- 我们获得了在创建增强组件时提供参数的额外能力

1970 0

React App 性能优化总结

函数组件防止了构造类实例，同时函数组件可以减少整体包的大小，因为它比类组件的的体积更小。...React.memo(…) 对应的是函数组件，React.PureComponent 对应的是类组件。React Hooks 也提供了许多处理这种情况的方法：useCallback, useMemo。...); }; 您可以设置特定属性，而不是直接传递 Props： const CommentsText = props => { return ( div specificAttr...该模块将帮助您：了解你的打包内容找出最大尺寸的模块找到哪些模块有错误优化它！最好的优点是什么？它支持压缩模块！他在解析他们以获得模块的真实大小，同时展示压缩大小！...也就是说，在考虑优化之前，值得了解React组件如何工作，理解 diff 算法，以及在React 中 render 的工作原理。这些都是优化应用程序时需要考虑的重要概念。

7.7K2 0

React Native 项目 Web 端同构初探

“Learn once, write anywhere”,完全不影响 React Native 沦为“不会 JavaScript 也能用”的框架，那如何将在 React Native 项目中引入 react-native-web...当然值得注意的是，官方文档明确表示不支持 React Native 中不推荐使用的组件和 API，因此如果您项目中的某些功能依赖第三方库，可能那部分的功能在 web 端同构时需要额外处理。...index.html常见的单页面应用入口，像下面代码中的 div 我们称其为“根” DOM节点，因为其中的所有内容都将由React DOM进行管理。...在当前案例中，我们只是设置一些基本样式以使主体div具有完整的高度和宽度: ... ......可以参考React Native官方文档中有关平台特定代码的更多信息。 index.web.js： ... ...

3.5K3 0

React性能优化的8种方式了解一下

但是我们不必一定要在项目中使用这些方法，但是我们有必要知道如何使用这些方法。使用React.Memo来缓存组件提升应用程序性能的一种方法是实现memoization。...为了保持对作为prop传递给React组件的函数的相同引用，您可以将其声明为类方法（如果您使用的是基于类的组件）或使用useCallback钩子来帮助您保持相同的引用（如果您使用功能组件）。...因此不用关心该函数是否是不同的引用，因为无论如何，组件都会重新渲染。...每当你有某种手风琴或标签功能，例如想要一次只能看到一个项目时，你可能想要卸载不可见的组件，并在它变得可见时将其重新加载。如果加载/卸载的组件“很重”，则此操作可能非常消耗性能并可能导致延迟。...在这些情况下，最好通过CSS隐藏它，同时将内容保存到DOM。

1.5K4 0

React教程：组件，Hooks和性能

React 组件此外，如果一个组件大于 2 到 3 个窗口的高度，也许值得分离（如果可能的话） —— 以后更容易阅读。...的非受控组件中，我们不关心值的变化情况，如果想要知道其确切的值，只需通过 ref 访问它。...以下是一些你应该做的和要避免做的事情：为包装器 HOC 函数添加显示名称（这样你就能知道它到底是干什么用的，实际上是通过更改 HOC 组件显示名称来做到）。...请注意，Webpack 和 CRA 不是唯一的选项，因为你可以使用其他构建工具，如 Brunch。这通常包含在官方文档中，无论是官方的 React 文档还是特定工具的文档。...当然，即使这些看似微小的变化也可能导致诸如影响浏览器兼容性等问题。就个人而言，我也想知道当 WebComponent 获得更多人气时会发生什么，因为它可能会增加一些 React 经常用到的东西。

2.6K3 0

2020 年你应该知道的 React 库

如何开始 React 如果你是一个完全不熟悉 React 的初学者想创建一个 React 项目，加入 React 的世界。有许多工具包项目可以选择，每个项目都试图满足不同的需求。...如果您只是想了解这些初学者工具包是如何工作的，那么可以尝试从头开始设置 React 项目。你将从一个基本的 HTML 和 JavaScript 项目开始，然后自己添加 React 和它的支持工具。...它提供了从验证到提交到形成状态管理所需的一切。另外一个选择是 React Hook Form。如果您开始使用更复杂的表单，这两种方法对于 React 应用程序都是有效的解决方案。...一个流行的 Airbnb 开源的React style guide 。即使你没有刻意遵循这些样式指南，但是读一读它们，在 React 中获得常见代码样式的要点是有意义的。...它是一个灵活的框架，您可以自己决定选择哪些库。您可以从小型开始，只添加库来解决特定的问题。当应用程序增长时，您可以沿途扩展构建块。否则你可以通过使用普通的 React 来保持轻量级。

14.4K4 0

前端开发如何做新手引导

通常，在产品发布新版本或者有新功能上线时，都会开发一个新手引导功能来引导用户了解应用的功能。在前端开发中，如何快速地开发新手引导功能呢，下面介绍几个开箱即用的新手引导组件库。...introJs().start(); 然后，使用以下附加参数在特定元素或类上调用 Intro.js启动。...高度可定制：允许在不影响性能的情况下更改外观。框架支持：随时融入项目的前端框架。文档完善：文档涵盖安装和自定义，包括项目的主题和样式。...Joyride React Joyride 是一款用于向用户介绍新功能的React项目新手引导库，在GitHub上拥有超过5.1k的Star，具有以下特点：易于使用高度可定制文档完善积极维护...应用引导库，在GitHub上拥有3.2K的Star，它提供了一种简单的方式来引导用户浏览网站和应用。

2.5K3 1

浅谈Hooks&&生命周期(2019-03-12)

React-Lifecycle3 我们下面看一个例子，React代码中是如何使用生命周期的。...毕竟class类组件就是原生的class类写法。其实React内置了一个Component类，生命周期钩子都是从它这里来的，麻烦的地方就是每次都要继承。...但是React 官方又说， Hooks的目的并不是消灭类组件。但无论如何，既然react官方这样说了，那咱们就来了解一下这个 Hooks。 1....React 不知道你把 useState 等 Hooks API 返回的结果赋值给什么变量，但是它也不需要知道，它只需要按照 useState 调用顺序记录就好了。...如果您之前编写过React类组件，则应熟悉componentDidMount，componentDidUpdate和componentWillUnmount等生命周期方法。这副作用的代码就放在这里。

3.3K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭