参考:https://blog.csdn.net/wu_xianqiang/article/details/103981087
没使用memo例子
每次点击button,Counter组件都会被渲染两次;
import React,{Component,useState,useMemo,memo} from 'react';
const Counter = ({value, children}) => {
console.log('Render: ', children)
return (
<div>
{children}: {value}
</div>
)
}
export default function App(){
const [count1, setCount1] = React.useState(0)
const [count2, setCount2] = React.useState(0)
const increaseCounter1 = () => {
setCount1(count1 => count1 + 1)
}
return (
<>
<button onClick={increaseCounter1}>Increase counter 1</button>
<Counter value={count1}>Counter 1</Counter>
<Counter value={count2}>Coutner 2</Counter>
</>
)
}
使用memo例子
每次点击button,只会渲染count变化的那个Counter组件
import React,{Component,useState,useMemo,memo} from 'react';
const Counter = memo(({value, children}) => {
console.log('Render: ', children)
return (
<div>
{children}: {value}
</div>
)
});
export default function App(){
const [count1, setCount1] = React.useState(0)
const [count2, setCount2] = React.useState(0)
const increaseCounter1 = () => {
setCount1(count1 => count1 + 1)
}
return (
<>
<button onClick={increaseCounter1}>Increase counter 1</button>
<Counter value={count1}>Counter 1</Counter>
<Counter value={count2}>Coutner 2</Counter>
</>
)
}
useMemo例子
import React,{Component,useState,useMemo} from 'react';
function Counter(props){
return (
<h1>{props.count}</h1>
);
}
export default function App() {
const [count,setCount] = useState(0);
const double = useMemo(()=>{
return count *2;
},[count===3]);
return (
<div>
<button
type="button"
onClick={()=>{setCount(count+1)}}
>
Click({count}),double:({double})
</button>
<Counter count={count}/>
</div>
);
}