react事件处理问题

Question

react-事件处理

一直不太懂官网所说的：
如果这个回调函数作为一个属性值传入低阶组件，这些组件可能会进行额外的重新渲染。

自己尝试了一下，没有产生额外的渲染：
https://codesandbox.io/s/yk9n...

希望能解释下，最好能有demo，感谢！

Answer 1

当父辈组件对此子组件的部分进行重新渲染时，所有回调函数都会被重新创建，在react语法中，并不会推荐在jsx内部写函数，因为每次组件重新渲染这些函数会重新构造。描述中已经说了一般会用bind防止重复构建。或者用箭头函数引用组件本身的内部函数：

class LoggingButton extends React.Component {
    constructor(props) {
        super(props)
        this.handleClick = (e) => { ... };
    }
    
    render() {
        return (<button onClick={this.handleClick}>Click me</button>);
    }
}

Answer 2

写个组件继承PureComponent 假设叫Button 在父组件render(){return <Button onClick={e=>{this.setState({count:Math.random()})}}/>}看Button的render