请教一下前辈们一个 React 函数组件的性能优化问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 1469 天前的主题，其中的信息可能已经有所发展或是发生改变。

const Button = React.memo(({ onClick }) => { console.log('Button render') return <button OnClick={(e) => nClick(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 组件重新渲染。

请教一下前辈们在第一段代码里面怎么改才能实现上面这个效果。

2 条回复 2021-10-11 18:44:15 +08:00

mxT52CRuqR6o5

2021-10-11 18:39:53 +08:00

```
const handleClick = useCallback(() => {
setCount(count=>count + 1);
}, [])
```

Yukee798

2021-10-11 18:44:15 +08:00

@mxT52CRuqR6o5 #1 十分感谢！最开始写的是：
```
const handleClick = useCallback(() => {
setCount(count + 1);
}, [])
```
就出现了计数器无法累加的 bug，忘记还能传入一个函数了。