Question

我在此post中发现了以下代码。（sandbox）我不确定这些按钮的行为为何不同。

一个可能的解释是：由于不调用Button的render方法进行更新，因此第一个按钮的单击处理程序保持不变。但是，Button实例的this.props已更改为包括新的onClick道具。换句话说，如果更改 组件元素 的道具， nextProps 最终将变为 < em> this.props ，即使 shouldComponentUpdate 返回false。

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>
    )
  }
}

Answer 1

您的解释是正确的，当ShouldComponentUpdate()返回false时，Button组件不会在道具更改时重新呈现。

在第一个<button>元素中，onClick事件为this.props.OnClick，实际上是初始渲染时的函数() => { submit("one"); }。 "one"在这里是因为在React生命周期的这个特定时间点，Form的{{1}}的值为props.value。请注意，函数的执行与"one"的{{1}}无关。

但是，在第二个Button元素中，props事件是<button>。不管是否重新渲染onClick组件，总是执行() => this.props.onClick()，而在父组件获取状态/道具更新时Button会发生变化。

在this.props.onClick()返回this.props的情况下，ShouldComponentUpdate()组件将在道具更新时重新呈现。第一个按钮的true事件成为由Button组件的状态更改触发的重新渲染上的新功能onClick。这两个按钮元素的() => { submit("two"); }事件函数虽然看起来会产生相同的结果，但它们从来都不是同一函数。

Answer 2

<button onClick={this.props.onClick}>将调用您的onClick函数并发送一个event对象作为其第一个参数。这等效于执行此操作：

<button onClick={event => { this.props.onClick(event) }}>

<button onClick={() => this.props.onClick()}>将您的onClick函数返回的内容设置为onClick函数...这是以下代码的简短语法：

<button onClick={() => { return this.props.onClick() }}>

您可能正在寻找的是：<button onClick={() => { this.props.onClick() }}>

在这种情况下，单击将仅调用您的函数而无需发送任何参数

我建议阅读this documentation，以进一步了解箭头/匿名函数及其语法

为什么<button onclick =“ {this.props.onClick}”>与</button> <button onclick =“ {（e）”> {this.props.onClick（e）}}>有所不同？

2 个答案: