您好!欢迎来到祺点源码论坛

祺点源码论坛

热门搜索: 免备案服务器    云服务器    服务市场   

React Basics~Render Performance/ useCallback-js教程

分类:升级补丁 时间:2024-10-17 16:12 浏览:161
资讯详情页摘要上方横幅-880*?
概述
即使将备忘录设置为子组件,子组件仍然可以重新渲染。这是一种我们将函数作为 props 传递给子组件的情况。・src/example.jsimport react, { usecallback, usestate } from "react";import child from "./child";const example = () => { console.log("p
内容

即使将备忘录设置为子组件,子组件仍然可以重新渲染。

这是一种我们将函数作为 props 传递给子组件的情况。

・src/example.js

import react, { usecallback, usestate } from "react";import child from "./child";const example = () =&gt; { console.log("parent render"); const [counta, setcounta] = usestate(0); const [countb, setcountb] = usestate(0); const clickhandler = () =&gt; { setcountb((pre) =&gt; pre + 1); }; return ( <div classname="parent"> <div> <h3>parent component</h3> <div> <button onclick="{()"> { setcounta((pre) =&gt; pre + 1); }} &gt; button a </button> <span>update parent component</span> </div> </div> <div> <p>the count of click button a:{counta}</p> </div> <child countb="{countb}" onclick="{clickhandler}"></child></div> );};export default example;登录后复制

・src/child.js

import { memo } from "react";const childmemo = memo(({ countb, onclick }) =&gt; { console.log("%cchild render", "color: red;"); return ( <div classname="child"> <h2>child component</h2> <div> <button onclick="{onclick}">button b</button> <span>uodate child component</span> </div> <span>the count of click button b :{countb}</span> </div> );});export default childmemo;登录后复制子组件重新渲染的原因是因为src/example.js中的clickhandler函数 const clickhandler = () =&gt; { setcountb((pre) =&gt; pre + 1); };登录后复制此函数作为 onclick 属性传递给子组件。 <child countb="{countb}" onclick="{clickhandler}"></child>登录后复制如果我们用 usecallback 包装子组件,我们可以避免这种情况。 const clickHandler = useCallback(() =&gt; { setCountB((pre) =&gt; pre + 1); }, []);登录后复制

以上就是React Basics~Render Performance/ useCallback的详细内容!

评论
资讯正文页右侧广告
联系我们
Q Q:486588888
T G:APPWZKF
邮箱:486588888@qq.com
时间:09:00 - 00:00
联系客服
客服 联系客服
041187189790
手机版

扫一扫进手机版
返回顶部