1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | //useMemo,useCallback import React, { memo, useMemo, useCallback, useState } from 'react' ; // import About from './About'; const Foo = memo((props) => { let count = props.count; console.log( "函数重新渲染" ); return <div onClick={props.addCount}>count:{count}</div> }); // class App extends PureComponent { // state = { // count: 0, // name: 0 // } // render() { // return ( // <Fragment> // <Foo count={this.state.count} ></Foo> // <button onClick={() => { this.setState(() => ({ count: this.state.count + 1 })) }}>加count</button> // </Fragment> // ) // } // } const App = memo(() => { const [count, setCount] = useState(0); let double = useMemo(() => { return count * 2 }, [count==3]); let addCount=useCallback(()=>{ //useCallback 可以看成useMemo返回函数时的简写,赋值给onClick 不会引发函数重新渲染 setCount((count) => count + 1) },[]); //括号可以看成依赖数组,当为空时,只有第一次挂载时才会渲染,当有数据时如[count],当count改变时才会改变,有多个数据时,所有数据改变时才会改变 // const addCount=()=>{ // setCount((count) => count + 1) // } return ( <div> <Foo addCount={addCount} count={double}></Foo> //防止传入函数会重复渲染,可以用上面的useMemo()或者它的简易实现useCallback 返回一个函数,节省性能 <button onClick={()=>{setCount((count) => count + 1)}}>count+1</button> //直接赋值当数据改变时,这个函数会重复渲染浪费性能<br> </div> ) }) export default App; |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步