文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

TDesign 更新周报（2022年5月第4周）

image 模式下不生效 Transfer：修复列表数量变化时的页码展示问题 Form：修复实例方法 reset 参数不生效的问题 Form：reset和 submit现在会调用原生 form中的方法...：修复 t-class 外部样式类无法使用的问题 DropdownMenu：修复 label 无法实时更新的问题 Sticky：修复吸顶后 tabs 无法滑动的问题 Tabbar：补充缺失的 icon...setData 里传输不必要的页面实例 Sticky：修复在无法获取页面实例时报错的问题 Skeleton：添加组件基础默认样式 DropdownMenu：修正遮罩层的位置，以及下拉菜单的高度 DropdownMenu...解决方案及周边 TDesign Vue Starter 发布 0.2.2 升级组件库依赖至0.41.5 优化计算列表吸顶高度与多标签页关系的逻辑 多标签页增加支持指定路由不缓存的功能 Bug Fixes...Next Starter 发布 0.3.2 Features 升级组件库依赖至0.15.1 增加多标签页增加支持指定路由不缓存的功能 Bug Fixes 修复页面滚动条不重置的问题 修复多标签页关闭逻辑缺陷

1.7K30

前端:从状态管理到有限状态机的思考

Vue我们会使用Vuex来管理全局状态， React会使用Redux来管理。 首先是不是，在问为什么？ 在使用类似Vue,React框架时，我们一定会使用状态管理吗？这个答案是肯定的。...这是因为现代前端框架使用数据驱动视图的形式来描述页面。比如，Vue、 React组件会有一个自己内部，外部的状态来共同决定组件的如何显示的，用户与组件交互导致数据变更，进而改变视图。...框架 内部状态 外部状态 Vue data props React state, useState props 所以我们所写大部分业务逻辑，是在管理状态，框架会帮我们状态映射成视图，这可以说是很经典的...框架原生组件状态管理 React Hooks + React.createContext React Hooks提供了useReducer + useContext + Context 可以实现一个小型的状态管理...思考如何解决这个问题的时，偶然看到了有限状态机相关文章，思考到应用的功能模块在某一个时刻是相互独立的，我们在局部将数据进行更新，之后用一个全局函数对数据进行统一替换。

2.5K41
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    如何升级到 React 18

    今天，我们发布了 React 18 RC 版本。正如我们在 React Conf 上分享的那样，React 18 基于 concurrent 模式，带来了更多能力，同时提供了渐进升级的方法。...这个新的 API 推荐用于所有 React 外部状态管理库。...严格模式 Strict Mode 未来，我们希望添加一个功能，允许 React 保存组件的状态，但移除 UI 部分。比如在返回旧的页面时，React 立即恢复之前的内容。...为此，React 将使用之前保留的状态重新加载组件。 这个功能会给 React 项目带来非常好的体验，但要求组件支持 state 不变的情况下，组件多次卸载和重载。...我们进行此更改是因为 React 18 中引入的新功能是基于现代浏览器开发的，部分能力在 IE 上是不支持的，比如 microtasks。

    2.2K30

    React-全局状态管理的群魔乱舞

    它通过「强制的同步状态更新」，使得外部 store 可以「支持并发读取」。它实现了对外部数据源订阅时不在需要 useEffect，并且推荐用于任何与 React 外部状态集成的库。...状态管理生态系统的发展史 正如我们所看到的，有很多问题和边缘情况是全局状态管理库需要考虑到的。 为了更好地理解React状态管理的所有现代方法。...❝大致可以分为4类 「本地」UI状态 「远程」服务器缓存状态 url状态 「全局」共享状态 ❞ 例如，在「本地UI状态」下，随着事情的发展，「自顶向下」传递数据和更新数据的方法往往会很快成为一个问题。...对于简单的应用程序来说，这是一个很好的方法。很多小的应用程序可以用这种方法来解决。...现代库如何解决状态管理的核心问题 下面是每个库为解决状态管理的每个核心问题所采取的不同方法的简化总结。

    3.8K20

    浅谈现代前端框架技术思想

    在计算机科学中，抽象与分层是一种降低计算机系统复杂度的基本思想和有效方法。分层是建立在抽象的基础上，分散关注、松散耦合、逻辑复用，在此基础上可以产生行业标准的定义。...前端技术在 2010 年前后发展迅猛，2013 年 React.js 诞生提出了基于单向数据流的 Flux 架构后，前端技术大方向基本定型，基本可以产生行业标准了。...如果数据有变更，现代框架也提供能力渲染页面保持与数据的同步：React 用户只需调用 setState 方法，而 Vue 和 Angular 的用户什么都不用做，框架内部机制可以检测到变更而自动更新页面...另一方面改善开发体验：组件化思想基于此得到广泛认可和并不断发展，如今 React 提出的 Hooks 概念也是努力将管理状态（数据）的组件与实现渲染逻辑的组件分开，降低嵌套组件的复杂度并提升复用性，也提供了更人性化的...如今一个前端新人可以快速上手并基于开源组件库低成本开发出一定功能的系统，都是得益于现代前端框架对页面渲染能力的封装。

    84230

    分享63个最常见的前端面试题及其答案

    另一方面，状态在组件本身内进行管理，并且可以使用 setState 方法进行更新。props 是不可变的，而 state 可以更新。 13、React 组件中有哪些生命周期方法？...PureComponent 是 React.Component 的子类，它实现了带有浅层 prop 和状态比较的 shouldComponentUpdate 方法。...41、您对 React 的最新更新有何看法 - 回顾一下 React Hooks 的优点和用途。 React Hooks 引入了一种在功能组件中编写可重用和有状态逻辑的新方法。...它们简化了组件组合，减少了对类组件的需求，并通过允许在不编写类的情况下使用状态和其他 React 功能来提高代码的可读性和可维护性。 42、虚拟 DOM 和 Shadow DOM 实现。...Polyfill 是一段代码，可以在本机不支持它的旧浏览器上提供现代功能。它通过使用 JavaScript 实现缺失的功能或 API 来填补浏览器兼容性方面的空白。

    8.6K21

    分享 63 道最常见的前端面试及其答案

    另一方面，状态在组件本身内进行管理，并且可以使用 setState 方法进行更新。props 是不可变的，而 state 可以更新。 13、React 组件中有哪些生命周期方法？...PureComponent 是 React.Component 的子类，它实现了带有浅层 prop 和状态比较的 shouldComponentUpdate 方法。...41、您对 React 的最新更新有何看法 - 回顾一下 React Hooks 的优点和用途。 React Hooks 引入了一种在功能组件中编写可重用和有状态逻辑的新方法。...它们简化了组件组合，减少了对类组件的需求，并通过允许在不编写类的情况下使用状态和其他 React 功能来提高代码的可读性和可维护性。 42、虚拟 DOM 和 Shadow DOM 实现。...Polyfill 是一段代码，可以在本机不支持它的旧浏览器上提供现代功能。它通过使用 JavaScript 实现缺失的功能或 API 来填补浏览器兼容性方面的空白。

    34930

    React基础(5)-React中组件的数据-props

    [React学习(5)-React组件中的数据-props.png] 前言 开发一个React应用,更多的是在编写组件,而React组件最小的单位就是React元素,编写组件的最大的好处,就是实现代码的复用...每个定义的React组件应该都是独立存在的模块,组件之外的一切都是外部世界(组件),外部世界(组件)就是通过prop来和组件进行对话数据传递的 在React中,你可以将prop类似于HTML标签元素的属性...注意: 如果把函数组件替换成类组件的写法,在子组件内部接收外部的props值时,需要将props更改成this.props的写法,反过来也是,类声明的组件替换成函数式(无状态)组件时,需要将this.props..." />, container); 从上面的代码中,可以看得出,父组件中JSX的prop值可以是一个方法,在子组件想要把数据传递给父组件时,需要在子组件中调用父组件的方法,从而达到了子组件向父组件传递数据的形式...下更多的方法,可参考官网手册PropTypes库的使用,也可以查看npm中的prop-types这个库的使用 出于性能的考虑,在开发的时候可以发现代码中的问题,但是放在生产坏境中就不适合了 因为它不仅增加了代码行数

    6.7K00

    24.精读《现代 JavaScript 概览》

    而 Stateful, 有状态, 指的是函数自己有自己的运行状态, 可以修改自己的状态. 在现代 JavaScript 开发中, 处理状态, 显得很重要....闭包的形成在于, 当一个在函数内声明的函数可以引用外部函数的局部变量. 就形成了闭包....而React 是使用了虚拟 Dom 来做变化侦测, React 通过 setState方法来通知变更, 使用虚拟 Dom 来比较是否发生了数据变化....Dumb 组件, 又叫展示组件, 通常被写成纯函数, 依赖于外部的数据和方法, 专注于展现数据. JIT 编译 Just-In-time（JIT）编译指的是代码的运行时, 被编译成机器代码的过程....后端渲染的理念很新颖，一定程度帮助了 html 认识到自己的不足，就像 Angular, React, Vue 对 webComponents 的冲击一样，或许未来十年可以用上 ECMAScript 标准提供的功能

    54620

    React与Redux开发实例精解

    算法 灵活：指React可以作为视图层与其他技术栈配合使用 2.Universal渲染：一套代码可以同时在服务端和客户端渲染 3.Redux是一个JavaScript状态容器，提供可预测的状态管理，三条基本原则...React组件既可以在Node.js中渲染，也可以在浏览器中渲染 2.渲染组件到DOM节点中是使用了react-dom的render()功能 3.浏览器目前无法直接运行用ES2015和JSX语法编写的Javascript...，这些内部状态与React的事件系统配合就可以实现一些用户交互功能 2.Props：属性的意思，可以使用props向React组件传递数据，React组件从props中拿到数据，然后返回视图 3.context...在组件完成更新后立即调用，在初始化时不会被调用 componentWillUnmount在组件从DOM中移除的时候立刻被调用 5.React组件生命周期函数中的this指向组件实例，自定义组件方法的this...（这里的this指的是组件实例） 2.理想状态下，程序的所有数据都应该放在Redux的全局状态中 3.如果一些状态只在一个组件内部临时使用，也可以使用组件的内部状态 十五、React与Redux中的数组处理

    2.1K20

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

    在现代的 React世界中，每个人都在使用带有 React Hooks的函数组件。然而，高阶组件（HOC）的概念在现代的 React世界中仍然适用，因为它们可以用于类组件和函数组件。...因此，它们是在历史和现代 React 组件之间使用可重用抽象的完美桥梁。 高阶组件可以增强组件的可组合性质。然而，高阶组件存在问题，而且这些问题完全被 React Hooks 解决了。...在现代的 React世界中，每个人都在使用带有 React Hooks 的函数组件。然而，高阶组件（HOC）的概念在现代的 React世界中仍然适用，因为它们可以用于类组件和函数组件。...因此，它们是在历史和现代 React 组件之间使用可重用抽象的完美桥梁。...如果只有一个请求失败，整个组件会作为错误渲染吗？ 如果一个请求依赖于另一个请求会发生什么？ …… 尽管这使得 HOC变得非常复杂（但功能强大），我们在内部引入了另一个问题。

    19700

    React学习(五)-React中组件的数据-props

    撰文 | 川川 前言 开发一个React应用,更多的是在编写组件,而React组件最小的单位就是React元素,编写组件的最大的好处,就是实现代码的复用 将一个大的应用按照功能结构等划分成若干个部分...每个定义的React组件应该都是独立存在的模块,组件之外的一切都是外部世界(组件),外部世界(组件)就是通过prop来和组件进行对话数据传递的 在React中,你可以将prop类似于HTML标签元素的属性..." />, container); 从上面的代码中,可以看得出,父组件中JSX的prop值可以是一个方法,在子组件想要把数据传递给父组件时,需要在子组件中调用父组件的方法,从而达到了子组件向父组件传递数据的形式...出于性能的考虑,在开发的时候可以发现代码中的问题,但是放在生产坏境中就不适合了 因为它不仅增加了代码行数,占用空间,而且还消耗CPU资源 折中的办法就是:在开发的时候代码定义propTypes,避免开发犯错...(props),如果不进行该设置,该组件下定义的成员私有方法(函数)将无法通过this.props访问到父组件传递过来的prop值 当然,在React中,规定了不能直接更改外部世界传过来的prop值,这个

    3.4K30

    React 函数组件不是有状态吗，为什么还要说他是纯函数

    UI = f(state) 0、hook 的特性 我们在声明一个函数式组件时，常常会使用到 hook 来声明一些状态或者方法，但是我们在使用 hook 时，你会发现 hook 会有一些奇怪的规则，那么就是不能把...每一个函数的状态都被存在了另外一个模块里（Fiber tree）。也就是说，只要 React 允许，我们甚至可以在别的组件访问到任意一个组件里的状态。...当然 React 对这种情况做了限制，只允许通过特定的语法来做到这个事情。 函数组件中的所有的 hook 都是从外部传入的 2、state 其实是参数 我们再来看一下这个公式。...UI = f(state) 这个时候我们会恍然发现，虽然 state 在函数内部定义/获取了，但是很明显，React 是期望大家把他当成外部传入的参数来理解的。...4、总结 hook 存放在函数外部，因此不属于函数内部的状态。我们在理解函数式组件是纯函数时，应该把 hook 当成参数去看待，这样很多现象就非常自然了。

    20910

    在线教育直播源码中React库的特性解读

    React状态管理 React带有内置的hooks来管理局部状态:useState、useReducer和useContext。所有这些都可以在React中用于复杂的本地状态管理。...它甚至可以模拟Redux(Redux是React的一个流行的状态管理库)。 　　所有React的内置hooks都非常适合本地状态管理。...1.1.png 　　虽然内联样式可以用JavaScript在React中动态地添加样式，但是一个外部的CSS文件可以拥有React应用程序的所有剩余样式。...尽管应用程序的某些部分仍然可以共享样式，但其他部分不必访问它。在React中，CSSModules通常将CSS文件与React组件文件共存。...这个方法是由一个名为styled-components的库提供的，它将样式与JavaScript共享到React组件的旁边: 1.3.png 第三，我想推荐 Tailwind CSS

    1.4K40

    第八十六：前端即将或已经进入微件化时代

    以往我们直接在methods中写业务逻辑方法。现在直接可以在setup()中利用相应的钩子函数就可以实现想要的功能，尤其是业务逻辑比较复杂的情况下，可以相应的简化一些代码。...未来，React将提供一个功能，允许组件在卸载之间保持状态。为了这个准备，React 18引入了一种新的仅限开发的严格检查模式。...每当组件第一次装载时，React将自动卸载和重新装载每个组件，并在第二次装载时恢复以前的状态。如果这打破了我们的应用程序，考虑移除严格的模式，直到我们可以修复组件以恢复现有状态的弹性。...React 依赖于现代浏览器的功能，包括Promise、Symbol和Object。如果我们需要支持旧的浏览器和设备（如Internet Explorer），我们需要考虑别的实现方式。...其他的变化包括： react组件现在可以返回undefined 在未挂载的组件上调用setState不再发出警告。之前，React在对未挂载组件调用setState时警告内存泄漏。

    3K10

    【春节日更】最新的react面试题汇总

    大家也可以看看同一个知识点，它的提问方式的不同。 原理： react的核心思想是什么 如何判断虚拟dom的差异？diff算法怎么使用？ 什么是虚拟dom？...HOOKS的实现原理？ 用HOOK封装过组件没有？ HOOK重构组件的好处？ HOOK里面使用过哪些方法？...三级动态路由的实现代码？ 登录和权限具体怎么做的？ react列表渲染时的key有什么用，不用key的影响，，key使用循环列表时的产生的index可以吗 react中生成列表的key值有什么作用？...React技术栈里面，如果在父组件里面调用子组件，不需要更新子组件的状态，需要怎么做 react父组件如何获取子组件的方法，子组件如何获取父组件的方法 react的setstate是如何工作的，会出现什么常见的问题...ui组件 容器组件的区别 react高阶组件的理解 高阶组件 高阶函数的区别 使用场景 项目封装过组件吗，用过哪些工具函数 React用修饰器之后怎么解决兼容问题？ 了解ts吗？

    48610

    React面试八股文（第二期）

    比如做个放大镜功能哪些方法会触发 React 重新渲染？重新渲染 render 会做些什么？（1）哪些方法会触发 react 重新渲染?...（3）E6继承形式 React.Component // RCC 目前极为推荐的创建有状态组件的方式，最终会取代React.createClass形式；相对于 React.createClass可以更好实现代码复用...无状态组件相对于于后者的区别： 与无状态组件相比，React.createClass和React.Component都是创建有状态的组件，这些组件是要被实例化的，并且可以访问组件的生命周期方法。...需要注意的是：hook只能在组件顶层使用，不可在分支语句中使用。、参考：前端react面试题详细解答React中可以在render访问refs吗？为什么？...组件状态的改变可以因为props的改变，或者直接通过setState方法改变。组件获得新的状态，然后React决定是否应该重新渲染组件。只要组件的state发生变化，React就会对组件进行重新渲染。

    1.6K40

    React学习（最终篇）—— 高阶应用：高阶组件（HOCs）

    在组件被卸载时，都会移除监听功能。 可以想象在一个非常庞大的应用中，上面这种订阅 DataSource 变更并调用 setState 的模式可以在许多组件中重复使用。...这个方法应该可以接受一个参数，这个参数将外部组件作为一个子组件传入到方法中，并在方法中完成子组件数据订阅的功能，例如下面的例子中的 withSubscription： const CommentListWithSubscription...容器会管理各种各样的内容，例如：订阅、状态，以及将属性数据传递到子组件中以实现底层组件的渲染功能。容器组件是HOCs模式实现的一部分，可以将HOCs模式看作一个参数化的容器组件。...不要在render方法中去编码HOCs模式的实现代码 React的对比算法（融合算法）使用组件的标记来确定子树是需要更新还是移除重建。...在某些罕见的应用下需要动态的使用HOC组件，可以在组件的生命周期方法或其构造函数中构造HOC模式相关的代码。 静态方法必须复制 某些时候，在React组件中顶一个静态方法非常有用。

    1.7K41

    我为什么不再用 Vue，而改用 React？

    随着时间推移，我更深入了解了状态管理机制和 ES6 语言规范，于是我对 React 的看法也有了变化。 我看到有很多文章在推荐 React，甚至我周围的人都在谈论 React，所以我尝试了一下。...所以我很容易就能理解 React 组件的工作机制，并知道该如何将其集成到应用程序中。 你也可以在 Vue 中使用 ES6 语法，但是 React 比 Vue 设计得更好。...{ counter: 0 } } render() { return() } } 函数式组件让你可以使用带有 hooks 的局部状态。...一些开发人员喜欢 OOP 方法，所以继续使用 class；而其他开发人员则偏爱函数式方法。你可以在项目中同时使用两者！ 3. 社区 伟大的项目背后都有很多伟大的头脑。...他建议生产项目暂时不要上，新的、小的项目可以试水。 那么，我喜欢 VueJS 吗？是的。我喜欢 React 吗？喜欢。React 比 Vue 更好吗？那就见仁见智了。

    3.5K20
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券