Question

在正式反应tutorial中，他们首先编写了类组件：

class Square extends React.Component {
 render() {
   return (
     <button className="square" onClick={() => this.props.onClick()}>
       {this.props.value}
     </button>
   );
 }
}

，然后使其成为功能组件

function Square(props) {
  return (
    <button className="square" onClick={props.onClick}>
      {props.value}
    </button>
  );
}

为什么需要onClick更改？

谢谢

Answer 1

在功能组件中，道具是通过参数props直接访问的（注意它是如何传入的），因为它是一个对象。在类组件中，props存在于类本身上，并且没有名为props的变量。

Answer 2

props从组件对象的属性变为传递给函数的参数。

Answer 3

Function Component接受一个prop作为函数参数（function Sqaure(props)），
在类组件中，传递道具（或通过super(props)从构造函数构造道具）并通过this.props使道具可用。

Answer 4

该更改不是必需的，但在两种情况下都可以省略。

您可以在两个示例中将其编写为：

onClick={() => this.props.onClick()}>

或类似这样的方法，因为它不会在每个渲染器上创建新功能，因此对性能更好，

onClick={this.props.onClick}>

唯一的区别是函数的来源。在第一种情况下，它来自this.props，因为它不是类组件，而props不会直接传递到render函数中。在功能组件中，道具直接传递到函数中，并且可以通过props.onClick进行访问。

在功能和类组件之间反应`onClick`更改

4 个答案: