问题引入
子组件的只依赖传入的name属性,但是父组件name属性和text属性变化都会导致Parent函数重新执行,所以即使传入子组件props没有任何变化,甚至子组件没有依赖于任何props属性,都会导致子组件重新渲染
const Child = ((props: any) => {
console.log("子组件更新...");
return (
子组件
text:{props.name}
{new Date().getTime()}
)
})
const Parent = () => {
const [count, setCount] = useState(0);
const [text, setText] = useState("")
const handleClick = () => {
setCount(count + 1);
}
const handleInputChange = (e) => {
setText(e.target.value)
}
return (
count:{count}
)
}
memo
使用memo包裹子组件时,只有props发生改变子组件才会重新渲染。使用memo可以提升一定的性能。
const Child = memo((props: any) => {
console.log("子组件更新..."); // 只有当props属性改变,集name属性改变时,子组件才会重新渲染
return (
子组件
text:{props.name}
{new Date().getTime()}
)
})
const Parent = () => {
const [count, setCount] = useState(0);
const [text, setText] = useState("")
const handleClick = () => {
setCount(count + 1);
}
const handleInputChange = (e) => {
setText(e.target.value)
}
return (
count:{count}
)
}
但如果传入的props包含函数,父组件每次重新渲染都是创建新的函数,所以传递函数子组件还是会重新渲染,即使函数的内容还是一样。如何解决这一问题,我们希望把函数也缓存起来,于是引入useCallback
const Child = memo((props: any) => {
console.log("子组件更新..."); // 即使点击按钮count变化,但函数重新执行,handleInputChange已经指向新的函数实例,所以子组件依然会刷新
return (
子组件
text:{props.name}
{new Date().getTime()}
)
})
const Parent = () => {
const [count, setCount] = useState(0);
const [text, setText] = useState("")
const handleClick = () => {
setCount(count + 1);
}
const handleInputChange = (e) => {
setText(e.target.value)
}
return (
count:{count}
)
}
useCallback
useCallback用用于缓存函数,只有当依赖项改变时,函数才会重新执行返回新的函数
对于父组件中的函数作为props传递给子组件时,只要父组件数据改变,函数重新执行,作为props的函数也会产生新的实例,导致子组件的刷新
使用useCallback可以缓存函数。需要搭配memo使用
const Child = memo((props: any) => {
console.log("子组件更新...");
return (
子组件
text:{props.name}
{new Date().getTime()}
)
})
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 (
count:{count}
)
}
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 (
颜色: setColor(e.target.value)}/>
单价: setPrice(Number(e.target.value))}/>
数量:{count}
总价:{getTotal()}
)
}
修改后如下,注意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 (
颜色: setColor(e.target.value)}/>
单价: setPrice(Number(e.target.value))}/>
数量:{count}
总价:{getTotal}
)
}
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 (
颜色: setColor(e.target.value)}/>
单价: setPrice(Number(e.target.value))}/>
数量:{count}
总价:{total}
)
}
注意观察useEffect是在price,count其中任何一个变化后触发,然后total改变,total改变又会触发函数的重新执行,导致组件重新渲染,所以在控制套可以看到“parent exec...”被打印了两次,而第一个例子中,“parent exec...”只被打印了一次
所以可以得出如下总结:
useEffect是在DOM改变之后触发,useMemo在DOM重新渲染之前就触发
useEffect设置值会再次重新渲染,但useMemo不会