有没有办法在使用多个useState时简化条件渲染？ - 腾讯云开发者社区

文章/答案/技术大牛

发布

对于React Hook的思考探索

比如业务复杂之后我们有好多个Context相关的高阶组件，一层套一层，重重嵌套让我想起了在写Flutter时的恐惧。...我们可以在函数组件中使用状态，也可以在渲染后执行一些网络请求。 Hook其实就是普通的函数，是对类组件中一些能力在函数组件的补充，所以我们可以在函数组件中直接使用它，在类组件中，我们是不需要它的。...这是因为每次重新渲染都调用了useState，然后导致value初始化了那我们得想办法把状态保存在别的地方避免因为重新渲染而受到影响了。...但是紧接着，我们又发现，当我们想多调用几次useState来管理多个状态时，它总在往同一个全局变量上写值，所有的useState方法都在操作同一个value！这肯定不是我们想要的结果。...那为了支持多个useState调用，我们要想办法改进一下，把变量替换成一个数组试试？

1.9K1 0

记一次React的渲染死循环

前段时间在项目中遇到一个Bug，在编辑页面且在一种特殊条件下，页面停留一会儿之后就直接无法操作，直接卡死了。看了下浏览器进程，有一个进程的CPU占有直接跑到了130%。...一、死循环代码段下面代码段为去除业务逻辑之后的简化代码段。...import { useEffect, useState } from "react"; // 简化，经过一系列转换，将value转换为valueObj const calcValueObjByValue...因为，setValueObj 是由 useState 方法创建的。 State 的更新可能是异步的出于性能考虑，React 可能会把多个 setState() 调用合并成一个调用。...五、总结本次事件，出现死循环的直接原因就是 useEffect 和 useState 二者使用的时候没有处理好他们之间的互相依赖关系。

2.2K2 0

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

是的

没有找到

我在工作中写React，学到了什么？性能优化篇

总结下来，就是要把渲染比较费时，但是不需要关心状态的子组件提升到「有状态组件」的外部，作为 children 或者props传递进去直接使用，防止被带着一起渲染。...那么解决办法是什么呢？...App() { const [logs, addLogs] = useLogs() // ... } 根据场景，灵活运用这些技巧，让你的代码更加健壮优雅~ 组合 Providers 假设我们使用上面的办法管理一些全局的小状态...LogProvider> ) function App() { return ( ) } 有没有办法解决呢...在需要的情况下对 Context 进行读写分离。包装Context 的使用，注意错误处理。组合多个 Context，优化代码。欢迎关注「前端从进阶到入院」，还有很多前端原创文章哦~

1.4K1 0

我在大厂写React学到了什么？性能优化篇

1.7K4 0

我在大厂写React学到了什么？性能优化篇

1.3K4 0

React报错之Too many re-renders

如果该方法在页面加载时被调用，就会触发一个setState动作，组件就会无限重新渲染。如果我们试图立即设置一个组件的状态，而不使用一个条件或事件处理器，也会发生这个错误。...这个函数只会在组件第一次渲染时被调用，并且会计算出初始状态。你也可以直接向useState方法传递一个初始值。另外，你也可以像前面的例子那样使用一个条件或事件处理器。...确保你没有使用一个在每次渲染时都不同的对象或数组作为useEffect钩子的依赖。...记忆值另外，我们可以使用useMemo钩子来获得一个在不同渲染之间不会改变的记忆值。...在处理数组时，我们用于对象的方法同样有效。例如，我们可以使用useMemo钩子来获得一个在渲染之间不会改变的记忆值。

5.3K4 0

超性感的React Hooks（三）：useState

当然，也不是完全没有办法，useState就是帮助我们做这个事情。从上一章再谈闭包中我们知道，useState利用闭包，在函数内部创建一个当前函数组件的状态。并提供一个修改该状态的方法。...该函数也只会在组件首次渲染时执行一次。...多个滑动条控制div元素的不同属性，如果使用useState来实现，应该怎么做？...例如我们想要用一个接口，去请求一堆数据，而这个接口接收多个参数。当改变各种过滤条件，那么就势必会改变传入的参数，并在参数改变时，立即重新去请求一次数据。...因此这样的方式，我们必须在每一个组件被销毁时，做好善后工作。那还有没有更好的方式呢？答案就藏在我们上面的知识点中。

3.1K2 0

React源码中的useState，useReducer

而在函数组件中，每次渲染，更新都会去执行这个函数组件，所以在函数组件中是没办法保存state等信息的。为了保存state等信息，于是有了hooks，用来记录函数组件的状态，执行副作用。...hooks执行时机上面提到，在函数组件中，每次渲染，更新都会去执行这个函数组件。所以我们在函数组件内部声明的hooks也会在每次执行函数组件时执行。...两套hooks在我们刚开始学习使用hooks时，可能会有疑惑，为什么hooks要在函数组件的顶部声明，而不能在条件语句或内部函数中声明？...这个在调度更新时就已经完成了切换。所以我们这次调用useState方法会和之前初始化有所不同。...当更新过程中再次执行函数组件，也会调用useState方法，此时的useState内部会使用更新时的hooks。

1.8K3 0

React源码之useState，useReducer

1.3K4 0

React源码分析(三)：useState，useReducer_2023-02-19

1.1K2 0

几个你必须知道的React错误实践

这是使用 React 编写组件的核心原则之一，在编写 React 组件时应该牢记在心。同时意味着，在渲染组件的时候会重新执行某些逻辑。...到处使用三元表达式进行条件渲染三元表达式是一个非常简洁的语法，在简短的代码中非常令人满意。所以很多人喜欢在 React 中使用三元表达式来渲染组件。...} )}这种代码没有功能性上的错误，但是在可读性方面做得很差。解决它的办法有两种。第一种是使用条件判断代替三元表达式。...这样组件在使用 props 时就变得比较麻烦。很多人喜欢这么访问 props。...这时我们应该使用代码拆分的方式将应用分成多个 js 文件，在用到哪些文件时再去加载它们。这样可以让应用的初始包体积很小，让用户启动网页的速度更快。

1.3K4 0

React源码分析(三)：useState，useReducer

而在函数组件中，每次渲染，更新都会去执行这个函数组件，所以在函数组件中是没办法保存state等信息的。为了保存state等信息，于是有了hooks，用来记录函数组件的状态，执行副作用。...hooks执行时机上面提到，在函数组件中，每次渲染，更新都会去执行这个函数组件。所以我们在函数组件内部声明的hooks也会在每次执行函数组件时执行。...相关参考视频讲解：进入学习两套hooks在我们刚开始学习使用hooks时，可能会有疑惑，为什么hooks要在函数组件的顶部声明，而不能在条件语句或内部函数中声明？...这个在调度更新时就已经完成了切换。所以我们这次调用useState方法会和之前初始化有所不同。...当更新过程中再次执行函数组件，也会调用useState方法，此时的useState内部会使用更新时的hooks。

1.5K2 0

React源码分析(三)：useState，useReducer4

1.1K3 0

几个你必须知道的React错误实践_2023-02-27

这是使用 React 编写组件的核心原则之一，在编写 React 组件时应该牢记在心。同时意味着，在渲染组件的时候会重新执行某些逻辑。...到处使用三元表达式进行条件渲染三元表达式是一个非常简洁的语法，在简短的代码中非常令人满意。所以很多人喜欢在 React 中使用三元表达式来渲染组件。...} ) } 这种代码没有功能性上的错误，但是在可读性方面做得很差。解决它的办法有两种。第一种是使用条件判断代替三元表达式。...这样组件在使用 props 时就变得比较麻烦。很多人喜欢这么访问 props。...这时我们应该使用代码拆分的方式将应用分成多个 js 文件，在用到哪些文件时再去加载它们。这样可以让应用的初始包体积很小，让用户启动网页的速度更快。

1.2K4 0

React：不要动，否则你会被炒鱿鱼

不知道大家在用React开发时，有没有注意到react与react-dom这两个包中有个很奇葩的属性__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED：...React项目架构我们在项目中习惯使用如下语句引入Hook： import {useState} from 'react'; 这是不是意味着所有Hook的具体实现都在react这个包中？...「渲染器」针对宿主环境不同而不同，比如：浏览器环境使用ReactDOM/client渲染器 SSR使用ReactDOM/server渲染器 Native环境使用ReactNative渲染器渲染器除了...内部结构可以认为，当React团队希望在react与「宿主环境对应的包」之间共享数据时，就会把他保存在这个神秘的内部变量中。比如上文提到的，「Hook的具体实现」。...解决办法是在项目中为react增加别名（alias），使项目中所有用到react的地方都指向同一个react。

1.4K2 0

我打破了 React Hook 必须按顺序、不能在条件语句中调用的枷锁！

遵守这条规则，你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。这让 React 能够在多次的 useState 和 useEffect 调用之间保持 hook 状态的正确。...useState(); return 'Hello' } 其实是个挺常见的用法，很多时候满足某个条件了我们就不希望组件继续渲染下去。...('first') } // 第二次调用 currentIndex 为 1 useState('second') 在 Preact 第一次渲染组件的时候，假设 Math.random() 返回的随机值是...chaos 破解限制有没有办法破解限制呢？如果要破解全局索引递增导致的 bug，那么我们可以考虑换种方式存储 Hook 状态。...(e.target.value); }, }; } 然后在组件中多次调用它： function Form() { // 使用 Symbol const name = useFormInput

2.5K2 0

我打破了 React Hook 必须按顺序、不能在条件语句中调用的枷锁

遵守这条规则，你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。这让 React 能够在多次的 useState 和 useEffect 调用之间保持 hook 状态的正确。...useState(); return 'Hello' } 其实是个挺常见的用法，很多时候满足某个条件了我们就不希望组件继续渲染下去。...currentComponent 上的 _hooks 数组中查找保存的值，也就是 Hook 返回的 [state, useState] 那么假如条件调用的话，比如第一个 useState 只有 0.5...('first') } // 第二次调用 currentIndex 为 1 useState('second') 在 Preact 第一次渲染组件的时候，假设 Math.random() 返回的随机值是...1)}>+ {value} ) } 结果是这样：破解限制有没有办法破解限制呢？

1.7K2 0

React新文档：不要滥用effect哦

你或你的同事在使用useEffect时有没有发生过以下场景：当你希望状态a变化后「发起请求」，于是你使用了useEffect： useEffect(() => { fetch(xxx); }, [...如果以上场景似曾相识，那么React新文档里已经明确提供了解决办法。一些理论知识新文档中这一节名为Synchronizing with Effects[1]，当前还处于草稿状态。...对于这种：在视图渲染后触发的副作用，就属于effect，应该交给useEffect处理。...总结当我们编写组件时，应该尽量将组件编写为纯函数。对于组件中的副作用，首先应该明确：是「用户行为触发的」还是「视图渲染后主动触发的」？对于前者，将逻辑放在Event handlers中处理。...对于后者，使用useEffect处理。

2.1K1 0

Hooks中的useState

那么问题来了，页面首次渲染和进行+1操作，都会调用App()函数去执行const [count, setCount] = useState(0);这行代码，那它是怎么做到在+ +操作后，第二次渲染时执行同样的代码...中看到现在已经可以实现点击按钮进行++操作了，而不是无论怎么点击都是0，但是上边的情况太过于简单，因为只有一个state，如果使用多个变量，那就需要调用两次useState，我们就需要对其进行一下改进了...，不然会造成多个变量存在一个saveState中，这样会产生冲突覆盖的问题，改进思路有两种:1把做成一个对象，比如saveState = { n:0, m:0 }，这种方式不太符合需求，因为在使用useStatek...State下的独立的状态更新了，那么问题又又来了，用了saveState和index，那其他组件用什么，也就是说多个组件如果解决每个组件独立的作用域，解决办法1每个组件都创建一个saveState...的顺序，例如使用条件判断是否执行useState这样会导致按顺序获取到的值与预期的值不同，这个问题也出现在了React.useState自己身上，因此React是不允许你使用条件判断去控制函数组件中的useState

1.7K3 0

全面了解 React Suspense 和 Hooks

但是React 却并没有在 v16 发布的时候立刻开启，也就是说，React 在 v16 发布之后依然使用的是同步渲染。...同步渲染和异步渲染同步渲染我们都知道React 是facebook 推出的，他们内部也在大量使用这个框架，（个人感觉是很良心了，内部推动，而不是丢出去拿用户当小白鼠），然后就发现了很多问题...('bar'); // ... } 因为条件判断，让每次渲染中 useState 的调用次序不一致了，于是 React 就错乱了。...(LanguageContext); // 这里就可以用theme和language了这个useContext把一个需要很费劲才能理解的 Context API 使用大大简化，不需要理解render...Hooks 带来的代码模式改变上面我们介绍了 useState、useEffect 和 useContext 三个最基本的 Hooks，可以感受到，Hooks 将大大简化使用 React 的代码。

1.4K2 1

点击加载更多

对于React Hook的思考探索

记一次React的渲染死循环

我在工作中写React，学到了什么？性能优化篇

我在大厂写React学到了什么？性能优化篇

我在大厂写React学到了什么？性能优化篇

React报错之Too many re-renders

超性感的React Hooks（三）：useState

React源码中的useState，useReducer

React源码之useState，useReducer

React源码分析(三)：useState，useReducer_2023-02-19

几个你必须知道的React错误实践

React源码分析(三)：useState，useReducer

React源码分析(三)：useState，useReducer4

几个你必须知道的React错误实践_2023-02-27

React：不要动，否则你会被炒鱿鱼

我打破了 React Hook 必须按顺序、不能在条件语句中调用的枷锁！

我打破了 React Hook 必须按顺序、不能在条件语句中调用的枷锁

React新文档：不要滥用effect哦

Hooks中的useState

全面了解 React Suspense 和 Hooks

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐