随笔 - 105  文章 - 0  评论 - 9  阅读 - 24万 
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;

  

posted on   随心的博客  阅读(5792)  评论(2编辑  收藏  举报
编辑推荐:
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
阅读排行:
· 如何给本地部署的DeepSeek投喂数据,让他更懂你
· 超详细,DeepSeek 接入PyCharm实现AI编程!(支持本地部署DeepSeek及官方Dee
· 用 DeepSeek 给对象做个网站,她一定感动坏了
· .NET 8.0 + Linux 香橙派,实现高效的 IoT 数据采集与控制解决方案
· .NET中 泛型 + 依赖注入 的实现与应用
点击右上角即可分享
微信分享提示