我在这篇文章中找到了以下代码。（沙箱）我不确定为什么这些按钮的行为不同。

一种可能的解释是：因为没有调用 Button 的 render 方法进行更新，所以第一个按钮的单击处理程序保持不变。但是，Button 实例的 this.props 已更改为包含新的 onClick props。换句话说，如果组件元素的 props发生变化，即使shouldComponentUpdate返回 false ，nextProps最终也会变成this.props。

const submit = val => alert(val);
class App extends React.Component {


state = { val: "one" }

  componentDidMount() {
    this.setState({ val: "two" })
  }

  render() {
    return <Form value={this.state.val} />
  }
}

const Form = props => (
  <Button
    onClick={() => {
      submit(props.value)
    }}
  />
)

class Button extends React.Component {
  shouldComponentUpdate() {
    // lets pretend like we compared everything but functions
    return false
  }

  handleClick = () => this.props.onClick()

  render() {
    return (
      <div>
        <button onClick={this.props.onClick}>This one is stale</button>
        <button onClick={() => this.props.onClick()}>This one works</button>
        <button onClick={this.handleClick}>This one works too</button>
      </div>
    )
  }
}