React自执行函数

自执行函数就是在定义之后会立刻被执行，没有必要显式地调用他们。
一般的函数是这样定义与执行的：

function myFunction() {
// 函数内容
}
myFunction();

如果想要函数在被定义之后立即执行，这个时候就可以用到自执行函数了，我们需要使用括号将这个定义都包含起来，即将函数当作一个表达式，再传入需要使用的参数。例子如下：

( function myFunction(/* arguments */) {
    // ...
}(/* arguments */) );

或者

( function myFunction(/* arguments */) {
    // ...
} ) (/* arguments */);

要是其他地方不会调用该函数的话，可以直接省略该函数的名称：

( function (/* arguments */) {
    // ...
} ) (/* arguments */);

也可以使用箭头函数来表示：

( (/* arguments */) => {
    // ...
} ) (/* arguments */);

在React中，我们可以用一个大括号包裹一整个自执行函数，把所有逻辑都放在里面（if/else、switch、三元运算符等等），然后返回所需要渲染的东西。

举个例子，如果使用自执行函数去渲染一个编辑/保存按钮，代码会是这样的：

{
  (() => {
    const handler = view 
                ? this.handleEdit 
                : this.handleSave;
    const label = view ? 'Edit' : 'Save';
          
    return (
      <button onClick={handler}>
        {label}
      </button>
    );
  })()
}