memo,useCallback,useMemo以及useEffect区别
问题引入
子组件的只依赖传入的name属性，但是父组件name属性和text属性变化都会导致Parent函数重新执行，所以即使传入子组件props没有任何变化，甚至子组件没有依赖于任何props属性，都会导致子组件重新渲染
const Child = ((props: any) => {
console.log("子组件更新...");
return (
<div>
<h3>子组件</h3>
<div>text:{props.name}</div>
<div>{new Date().getTime()}</div>
</div>
)
})
const Parent = () => {
const [count, setCount] = useState(0);
const [text, setText] = useState("")
const handleClick = () => {
setCount(count + 1);
}
const handleInputChange = (e) => {
setText(e.target.value)
}
return (<div>
<input onChange={handleInputChange} />
<button onClick={handleClick}>+1</button>
<div>count:{count}</div>
<Child name ={text}/>
</div>)
}
memo
使用memo包裹子组件时，只有props发生改变子组件才会重新渲染。使用memo可以提升一定的性能。
const Child = memo((props: any) => {
console.log("子组件更新..."); // 只有当props属性改变，集name属性改变时，子组件才会重新渲染
return (
<div>
<h3>子组件</h3>
<div>text:{props.name}</div>
<div>{new Date().getTime()}</div>
</div>
)
})
const Parent = () => {
const [count, setCount] = useState(0);
const [text, setText] = useState("")
const handleClick = () => {
setCount(count + 1);
}
const handleInputChange = (e) => {
setText(e.target.value)
}
return (<div>
<input onChange={handleInputChange} />
<button onClick={handleClick}>+1</button>
<div>count:{count}</div>
<Child name ={text}/>
</div>)
}
但如果传入的props包含函数，父组件每次重新渲染都是创建新的函数，所以传递函数子组件还是会重新渲染，即使函数的内容还是一样。如何解决这一问题，我们希望把函数也缓存起来，于是引入useCallback
const Child = memo((props: any) => {
console.log("子组件更新..."); // 即使点击按钮count变化，但函数重新执行，handleInputChange已经指向新的函数实例，所以子组件依然会刷新
return (
<div>
<h3>子组件</h3>
<div>text:{props.name}</div>
<div> <input onChange={props.handleInputChange} /></div>
<div>{new Date().getTime()}</div>
</div>
)
})
const Parent = () => {
const [count, setCount] = useState(0);
const [text, setText] = useState("")
const handleClick = () => {
setCount(count + 1);
}
const handleInputChange = (e) => {
setText(e.target.value)
}
return (<div>
<button onClick={handleClick}>+1</button>
<div>count:{count}</div>
<Child name={text} handleInputChange={handleInputChange}/>
</div>)
}
useCallback
useCallback用用于缓存函数，只有当依赖项改变时，函数才会重新执行返回新的函数
对于父组件中的函数作为props传递给子组件时，只要父组件数据改变，函数重新执行，作为props的函数也会产生新的实例，导致子组件的刷新
使用useCallback可以缓存函数。需要搭配memo使用
const Child = memo((props: any) => {
console.log("子组件更新...");
return (
<div>
<h3>子组件</h3>
<div>text:{props.name}</div>
<div> <input onChange={props.handleInputChange} /></div>
<div>{new Date().getTime()}</div>
</div>
)
})
const Parent = () => {
const [count, setCount] = useState(0);
const [text, setText] = useState("")
const handleClick = () => {
setCount(count + 1);
}
const handleInputChange =useCallback((e) => {
setText(e.target.value )
},[])
return (<div>
<button onClick={handleClick}>+1</button>
<div>count:{count}</div>
<Child name={text} handleInputChange={handleInputChange}/>
</div>)
}
useCallback第二个参数依赖项什么情况下使用呢，看下面的例子
//修改handleInputChange
const handleInputChange =useCallback((e) => {
setText(e.target.value + count)
},[])
以上例子count改变会发生什么事呢？
count改变，但handleInputChange不依赖与任何项，所以handleInputChange只在初始化的时候调用一次函数就被缓存起来，当文本改变时或者count改变时函数内部的count始终为0，至于为什么需要看useCallback源码后解答。
所以需要将count加入到依赖项，count变化后重新生成新的函数，改变函数内部的count值
const handleInputChange =useCallback((e) => {
setText(e.target.value + count)
},[count])
useMemo
useMemo使用场景请看下面这个例子,getTotal假设是个很昂贵的操作，但该函数结果仅依赖于count和price，但是由于color变化，DOM重新渲染也会导致该函数的执行，
useMemo便是用于缓存该函数的执行结果，仅当依赖项改变后才会重新计算
const Parent = () => {
const [count, setCount] = useState(0);
const [color,setColor] = useState("");
const [price,setPrice] = useState(10);
const handleClick = () => {
setCount(count + 1);
}
const getTotal = ()=>{
console.log("getTotal exec ...") // 该函数依赖于count和price，但color变化也会导致该函数的执行
return count * price
}
return (<div>
<div> 颜色: <input onChange={(e) => setColor(e.target.value)}/></div>
<div> 单价: <input value={price} onChange={(e) => setPrice(Number(e.target.value))}/></div>
<div> 数量:{count} <button onClick={handleClick}>+1</button></div>
<div>总价:{getTotal()}</div>
</div>)
}
修改后如下，注意useMemo缓存的是函数执行的结果
const Parent = () => {
console.log("parent exec...")
const [count, setCount] = useState(0);
const [color,setColor] = useState("");
const [price,setPrice] = useState(10);
const handleClick = () => {
setCount(count + 1);
}
const getTotal = useMemo(()=>{
console.log("getTotal exec ...")
return count * price
},[count, price])
return (<div>
<div> 颜色: <input onChange={(e) => setColor(e.target.value)}/></div>
<div> 单价: <input value={price} onChange={(e) => setPrice(Number(e.target.value))}/></div>
<div> 数量:{count} <button onClick={handleClick}>+1</button></div>
<div>总价:{getTotal}</div>
</div>)
}
useMemo和useEffect区别
以上useMemo例子也可以使用useEffect实现，使用useEffect改写的结果
const Parent = () => {
console.log("parent exec...")
const [count, setCount] = useState(0);
const [color,setColor] = useState("");
const [price,setPrice] = useState(10);
const [total,setTotal] = useState(0)
useEffect(()=>{
setTotal(price * count)
},[price,count])
const handleClick = () => {
setCount(count + 1);
}
return (<div>
<div> 颜色: <input onChange={(e) => setColor(e.target.value)}/></div>
<div> 单价: <input value={price} onChange={(e) => setPrice(Number(e.target.value))}/></div>
<div> 数量:{count} <button onClick={handleClick}>+1</button></div>
<div>总价:{total}</div>
</div>)
}
注意观察useEffect是在price,count其中任何一个变化后触发，然后total改变，total改变又会触发函数的重新执行，导致组件重新渲染，所以在控制套可以看到“parent exec...”被打印了两次，而第一个例子中，“parent exec...”只被打印了一次
所以可以得出如下总结：
useEffect是在DOM改变之后触发，useMemo在DOM重新渲染之前就触发
useEffect设置值会再次重新渲染，但useMemo不会
