在react中，我们有两种方法来管理组件的状态——usestate和usereducer。第二种不太受欢迎，因为它适用于状态中更复杂的对象，而且老实说，对于新程序员来说，乍一看太棘手，但事实并非如此。
然而，usestate 看起来非常简单易懂，所以新程序员经常使用它。
根据用户交互，它旨在管理重绘组件的状态。如果你想记住某些东西而不渲染它，你可能不应该把它放在状态中。 useref 将是最好的选择。
如果出现以下情况，则不需要 usestate：
您想在重新渲染期间记住一些值而不向用户显示它们。你的状态中已经有数据，或者你通过 props 接收到数据但需要对其进行转换；您不需要在新的 usestate 对象中保留该新值，创建一个新变量并使用它进行操作，而不会触发无用的重新渲染。
如果出现以下情况，则需要将该值保持在某个状态：
你想在值改变时重绘组件；最流行的示例是显示/隐藏面板、微调器、错误消息和修改数组。
稿定AI文案
小红书笔记、公众号、周报总结、视频脚本等智能文案生成平台
45 查看详情 
从此简化您的代码：
import react, { usestate, useeffect } from 'react';const mycomponent = (props) => { const [name, setname] = usestate('name'); const { description, index } = props; const [fullname, setfullname] = usestate(''); useeffect(() => { setfullname(`${name} - ${description}`); }, [name, description]); return ( {fullname}
setname(e.target.value)} placeholder="enter name" /> {description}
);};export default mycomponent;
此代码片段定义了一个 react 组件，用于初始化 name 和 fullname 状态，并在名称或描述发生更改时使用 useeffect 钩子来更新 fullname。它还包括一个输入字段，用于更新名称状态并显示全名和描述。
这种方法会给你带来无用的重新渲染和不必要的
使用useeffect.当名称或描述发生变化并且react重新渲染组件时，react将检查是否存在依赖于这些值的功能。当名称或描述发生变化时，useeffect将被触发，创建新的重新渲染。
对此
import React, { useState } from 'react';const MyComponent = (props) => { const [name, setName] = useState(''); const { description, index } = props; const nameWithDescription = `${name} - ${description}`; return ( {nameWithDescription}
setName(e.target.value)} placeholder="Enter name" /> {description}
);};export default MyComponent;
在这段代码中，namewithdescription是直接根据name和description计算出来的，不需要useeffect。名称状态用空字符串初始化。由于 react 的重新渲染机制，只要名称或描述发生变化，namewithdescription 就会自动更新。
我们可以使用 react 默认行为，并在名称或描述更改时获取正确的值，而无需再次触发重新渲染。
以上就是useState 并不总是正确的答案❌的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/469508.html
微信扫一扫 
支付宝扫一扫 
