const Button = React.memo(({ onClick }) => {
console.log('Button render')
return <button onClick={(e) => onClick(e)}>+1</button>
});
function App() {
const [count, setCount] = useState(0);
const handleClick = useCallback(() => {
setCount(count + 1);
}, [count])
return (
<div>
<h1>{count}</h1>
<Button onClick={handleClick}>Click</Button>
</div>
)
}
每次点击按钮 App 组件肯定会重新渲染,但是也会导致 Button 组件重新渲染很显然这是没必要的。
如果在类组件中可以像下面这样做:
const Button = React.memo(({ onClick }) => {
console.log('Button render')
return <button onClick={(e) => onClick(e)}>+1</button>
});
class App extends Component {
state = { count: 0 };
handleClick = () => {
this.setState({ count: this.state.count + 1 });
}
render() {
return (
<div>
<h1>{this.state.count}</h1>
<Button onClick={this.handleClick}>Click</Button>
</div>
)
}
}
这样无论点击按钮多少次,只有 App 组件会重新渲染,不会导致 Button 组件重新渲染。
请教一下前辈们在第一段代码里面怎么改才能实现上面这个效果。
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.