react 是一个用于构建用户界面的流行 javascript 库。它以高效且专注于创建可重用的 ui 组件而闻名。 react 的关键特性之一是引入了钩子,它是挂钩到 react 状态的函数。这些钩子中的一个是 usetransition 钩子。该钩子允许在不阻塞界面的情况下进行状态更改,从而带来流畅的体验。
了解 usetransition 钩子
为了更好地理解 usetransition 钩子,我们将研究以下示例。
import {usestate} from "react" const app = () => { const [post, setpost] = usestate(undefined) const fetchdata = async () => { await fetch("https://jsonplaceholder.org/posts/1") .then((result) => result.json()) .then((result) => setpost(result)) } return( <div> {post !== undefined && ( <div classname="post-card"> <h2>{post?.title}</h2> <image src="%7Bpost?.image%7D"></image><p>{post?.content}</p> </div> )} <button onclick="{fetchdata}"> get post </button> </div> ) } export default app;
当用户单击按钮时,根据互联网的速度或 fetchdata 函数内执行的任务的繁重,ui 可能会在获取任务期间冻结,这将导致用户体验不佳。如果您不希望用户滥用您的应用程序,也可能会向按钮发送垃圾邮件。此外,应用程序不会向用户显示任何正在进行的操作的指示。
使用 usetransition 钩子可以轻松解决这些问题,我们可以将之前的代码更新为类似这样的内容。
import {useState, useTransition} from "react" import {ImSpinner2} from "react-icons/im" const App = () => { const [pending, startTransition] = useTransition() const [post, setPost] = useState({}) const fetchData = () => { startTransition( async () => { await fetch("https://jsonplaceholder.org/posts/1") .then((result) => result.json()) .then((result) => setPost(result)) }) } return( <div> {post !== undefined && ( <div classname="post-card"> <h2>{post.title}</h2> <image src="%7Bpost.image%7D"></image><p>{post.content}</p> </div> )} <button disabled onclick="{fetchData}"> {pending ? <imspinner2 classname="animate-spin"></imspinner2> : "Get post" } </button> </div> ) } export default App;
调用的usetransition钩子返回两个值:pending,如果任务执行完毕并且starttransition函数包含可能被更紧急的任务打断的任务,则该值将为true。
在上面的示例中,我们将获取请求包装在 starttransition 函数内的异步箭头函数中。
并且在按钮中,我们以包含链接到待处理的禁用属性的方式对其进行修改,并且我们更改了按钮的标签,以在任务待处理时显示微调器,并在任务待处理时显示标签“获取帖子”任务没有待处理。
这会带来流畅的用户体验,并提供更好的性能,并保护您的应用程序免受用户不当行为的影响。
结论
usetransition 钩子是一个游戏规则改变者,用于构建具有流畅用户体验的高性能 react 应用程序。它确保 ui 在可能缓慢的操作期间保持响应并防止 ui 冻结,从而增强整体用户体验。
以上就是如何使用 useTransition hook 提高 React 性能的详细内容,更多请关注php中文网其它相关文章!