javascript - onClick 从类更改为函数

Question

在官方的 React 教程中，他们首先编写类组件:

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，即为什么我们要删除箭头功能？

在第一种情况下，当我们删除箭头函数时，即只保留 this.props.onClick() ，每次方形渲染时都会发生事件，甚至没有单击按钮，为什么会这样？ps:我是 React js 的新手，在学习教程时遇到了这些疑问，如果您能给出详尽的答案以及任何可以提供帮助的进一步资源，那就太好了!!提前致谢。

Answer 1

我猜你做了下面的事情？

又名，改变了

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

^ 那个，到

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

^这个

如果是这样，您基本上就是在每次呈现组件时调用 this.props.onClick()。然后，this.props.onClick() 的返回值 将被设置为 onClick 值。这在您希望执行与 onClick 事件相关的代码然后返回处理实际 onClick 事件的函数时非常有用。

要复制与第二个示例相同的内容，只需执行即可。

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

由于 this.props.onClick 函数被分配给 onClick prop 未被调用。

基本函数调用解释

function onClickHandler() {
    console.log('I WAS CLICKED!'):
}

function callThis() {

   return onClickHandler;
}

var assignedOnClick = callThis(); < Calls callThis which returns onClickHandler (without calling it)

var alsoAssignedOnClick = onClickHandler;

alsoAssignedOnClick(); < Calls onClickHandler which has just been assigned to the alsoAssignedOnClick variable

提示不要过度考虑 React 或一般编码。几乎所有的编码都只是从 A 到 B 获取数据，其中最困难的部分是尽可能减少数据/调用堆栈。