1. 什么是useCallback Hook?
useCallback用于优化代码, 可以让对应的函数只有在依赖发生变化时才重新定义
怎么理解呢？先看一个小demo——在子组件中定义两个变量和两个方法，在子组件中进行数据操作
import React, {useState} from 'react';
function Home(props) {
console.log('Home被渲染了');
return (
<div>
<p>Home</p>
</div>
)
}
function About(props) {
console.log('About被渲染了');
return (
<div>
<p>About</p>
</div>
)
}
function App() {
console.log('App被渲染了');
const [numState, setNumState] = useState(0);
const [countState, setCountState] = useState(0);
function increment() {
setNumState(numState + 1);
}
function decrement() {
setCountState(countState - 1);
}
return (
<div>
<p>numState = {numState}</p>
<p>countState = {countState}</p>
<Home/>
<About/>
</div>
)
}
export default App;
结果发现不管是点击Home/About里面的按钮，虽然Home和About里头的并没有numState和countState，也就是Home和About组件里头的数据并没有发生变化但是还是被重新渲染了，特别消耗性能
结论：
在react的一般规则中，只有父组件的某一个状态改变，父组件下面所有的子组件不论是否使用了该状态，都会进行重新渲染
父子组件都进行了重新渲染.png
优化阶段一：memo函数
对于没有用到被改变的那个状态的组件来说，理想情况下无需重新渲染。React.memo就是解决这个问题的一个函数
用法：
memo函数接收一个组件式函数，返回一个新的函数
（顺便说一句，这个是什么？嘿嘿，我想起来了，是高阶组件，所以memo函数实际就是各个高阶组件，哈哈，知识被串起来的感觉真好~
用法：
const MemoHome = memo(Home);
const MemoAbout = memo(About);
function App() {
console.log('App被渲染了');
const [numState, setNumState] = useState(0);
const [countState, setCountState] = useState(0);
function increment() {
setNumState(numState + 1);
}
function decrement() {
setCountState(countState - 1);
}
return (
<div>
<p>numState = {numState}</p>
<p>countState = {countState}</p>
<MemoHome/>
<MemoAbout/>
</div>
)
}
只有父组件重新渲染了.png
在父子组件之间没有任何通信的情况下Home和About组件确实不会重新渲染
使用mome但是父子组件之间存在通讯
import React, {useState, memo} from 'react';
function Home(props) {
console.log('Home被渲染了');
return (
<div>
<p>Home</p>
<button onClick={()=>{props.handler()}}>增加</button>
</div>
)
}
function About(props) {
console.log('About被渲染了');
return (
<div>
<p>About</p>
<button onClick={()=>{props.handler()}}>减少</button>
</div>
)
}
// 使用memo函数
const MemoHome = memo(Home);
const MemoAbout = memo(About);
function App() {
console.log('App被渲染了');
const [numState, setNumState] = useState(0);
const [countState, setCountState] = useState(0);
function increment() {
setNumState(numState + 1);
}
function decrement() {
setCountState(countState - 1);
}
return (
<div>
<p>numState = {numState}</p>
<p>countState = {countState}</p>
{/*<button onClick={()=>{increment()}}>增加</button>*/}
{/*<button onClick={()=>{decrement()}}>减少</button>*/}
// 将操作数据的方法传递过去但是组件内容不含父组件数据
<MemoHome handler={increment}/>
<MemoAbout handler={decrement}/>
</div>
)
}
export default App;
子组件数据没有变化但是却重新渲染了.png
结果发现：子组件数据没有变化但是却重新渲染了！！不是用了memo函数么？怎么回事？
当前Home和About重新渲染的原因是因为父组件中的数据发生了变化, 会重新渲染父组件重新渲染父组件, 就会重新执行父组件函数重新执行父组件函数, 就会重新定义increment/decrement
既然increment/decrement是重新定义的, 所以就和上一次的不是同一个函数了,既然不是同一个函数, 所以Home和About接收到的内容也和上一次的不一样了,既然接收到的内容和上一次不一样了, 所以就会重新渲染
怎么解决这个问题呢？useCallback诞生啦~
useCallback的用法：
- 接收两个参数：
- 第一个参数：是一个组件，接收一个需要防止做无用功重新渲染的子组件
- 第二个参数：是一个数组[]，存放对应的函数依赖的数据
//核心代码
// 以下代码的作用: 只要countState没有发生变化, 那么useCallback返回的永远都是同一个函数
const decrement = useCallback(()=>{
setCountState(countState - 1);
}, [countState]);
// 完整代码
import React, {useState, memo, useCallback} from 'react';
function Home(props) {
console.log('Home被渲染了');
return (
<div>
<p>Home</p>
<button onClick={()=>{props.handler()}}>增加</button>
</div>
)
}
function About(props) {
console.log('About被渲染了');
return (
<div>
<p>About</p>
<button onClick={()=>{props.handler()}}>减少</button>
</div>
)
}
const MemoHome = memo(Home);
const MemoAbout = memo(About);
function App() {
console.log('App被渲染了');
const [numState, setNumState] = useState(0);
const [countState, setCountState] = useState(0);
function increment() {
setNumState(numState + 1);
}
function decrement() {
setCountState(countState - 1);
}
// 以下代码的作用: 只要countState没有发生变化, 那么useCallback返回的永远都是同一个函数
const decrement = useCallback(()=>{
setCountState(countState - 1);
}, [countState]);
return (
<div>
<p>numState = {numState}</p>
<p>countState = {countState}</p>
<MemoHome handler={increment}/>
<MemoAbout handler={decrement}/>
</div>
)
}
export default App;
About组件没有重新渲染.png
这样就达到优化效果啦~
充满知识的一天.png
