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

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 组件重新渲染。

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

发表评论

您的电子邮箱地址不会被公开。