Javascript 匿名函数和在React组件中直接调用函数之间的区别

很抱歉，我想这更多的是关于缺乏足够的JS知识，但我的问题在我的组件中

{（）=>this.renderCell（item，col）}

方法这样使用它不起作用，但是像我在下面的组件中那样被正常调用，那么它就起作用了：有什么区别

class TableBody extends Component {
  renderCell = (item, column) => {
    if (column.content) return column.content(item);

    return _.get(item, column.path);
  };

  render() {
    const { data, columns } = this.props;
    return (
      <tbody>
        {data.map((item) => (
          <tr>
            {columns.map((col) => (
              <td>{this.renderCell(item, col)}</td>
            ))}
          </tr>
        ))}
      </tbody>
    );
  }
}

类表体扩展组件{
renderCell=（项目、列）=>{
if（column.content）返回column.content（item）；
return u.get（item，column.path）；
};
render（）{
const{data，columns}=this.props；
返回(
{data.map（（项）=>(
{columns.map（（col）=>(
{this.renderCell（项，列）}
))}
))}
);
}
}

这是因为

中预期的是函数，而不是函数调用。因此，您可以说

handleSubmit

或

（）=>handleSubmit（）

，因为它们都是指函数，而不是函数调用

handleSubmit（）

但是，这是一个函数调用。

很抱歉，我不能就此发表评论。但是，当您在React中从箭头函数内部调用函数时，会发生如下情况：

{（）=>myFunction（）}

当您对该元素执行特定操作时，例如，当您单击按钮时，它将运行：

myFunction}/>

当您不从arrow函数内部调用它时，就像您在代码段中所做的那样，该函数会自动被调用，因此，它会呈现您的代码：

//自动运行
{myFunction（）}
//仅在特定触发器上：
{（）=>myFunction（）}

您的匿名函数已定义但未调用，这意味着它从未运行过此.renderCell（）。要命名它，你需要把它写成

（（）=>/*函数代码*/）（）

就你而言：

{（（）=>this.renderCell（item，col））（）}

这是非常不必要的，但是，您应该这样做：

{This.renderCell（item，col）}

（正如您在第二个代码片段中所做的那样）

（）=>This.renderCell（item，col）

这不是调用函数，它只是返回一个新函数，该函数恰好调用了该函数，但该新函数从未被调用。