Javascript 调用方法与使用函数调用方法

假设我们在这样的类中有一个方法

class Blog extends Component {


  postClicked = (id) => {
    this.setState({selectedPostId: id})
  }

    render () {
      const newPosts = this.state.posts.map(el => {
        return <Post key={el.id}
         title={el.title}
         author={el.author}
         onClick={this.postClicked(el.id)}/>
      })

    return
    //something
{post}
  }
 }
}

类博客扩展组件{
点击后=（id）=>{
this.setState（{selectedPostId:id}）
}
渲染（）{
const newPosts=this.state.posts.map（el=>{
返回
})
返回
//某物
{post}
}
}
}

现在，像这样调用处理程序有什么区别

class Blog extends Component {


  postClicked = (id) => {
    this.setState({selectedPostId: id})
  }

    render () {
      const newPosts = this.state.posts.map(el => {
        return <Post key={el.id}
         title={el.title}
         author={el.author}
         onClick={this.postClicked(el.id)}/>
      })

    return
    //something
{post}
  }
 }
}

onClick={this.postClicked（el.id）}

和

onClick={（）=>this.postClicked（el.id）}

---

如果有人能告诉我两者的区别，我们将不胜感激。

第一个将在每次渲染完成时调用该函数

---

第二个将执行您想要的操作—称之为onClick。

第一个将在每次渲染完成时调用该函数

---

第二个会做你想做的事-称之为onClick。

你可以读这篇博客，它会把事情弄清楚的

你可以读这篇博客，它会把事情弄清楚的

第一种方法是一个错误的实现，它不会给出预期的结果，而第二种方法会起作用

在第一种方法中，您进行函数调用，在第二种方法中，您将函数的签名分配给onClick。 这就像下面两种说法的结合

var variableName = function(){//some content};  
onClick={variableName}

区别是,

第一种方法是一个错误的实现，它不会给出预期的结果，而第二种方法会起作用

在第一种方法中，您进行函数调用，在第二种方法中，您将函数的签名分配给onClick。 这就像下面两种说法的结合

var variableName = function(){//some content};  
onClick={variableName}

第一个选项“this.postClicked（el.id）”实际上会在每次组件呈现时调用带有“el.id”参数的方法“this.postClicked”（可能不是预期的）

第二个选项，“（）=>this.postClicked（el.id）”，将仅在单击“Post”时调用带有“el.id”参数的方法“this.postClicked”

总之，如果您能找到一种方法将“el.id”参数放入组件的“id”或“name”属性中

<Post id={el.id} />

然后你可以做：

<Post
  id={el.id}
  onClick={this.postClicked}
/>

this.postClicked = (event) => {
  const { id } = event.target;
  ...
}

this.postClicked=（事件）=>{
const{id}=event.target；
...
}

最后一个选项避免使用未命名函数。如果使用未命名函数，将导致不必要的重新渲染。React在检查是否应重新渲染时，无法通过考虑组件的道具是否已更改来判断未命名函数是否相同。每次检查时，它都会将未命名的函数视为新的道具，从而导致每次不必要的重新渲染

总的来说，它不会破坏你的应用程序，但如果你做得足够的话，它会稍微降低性能。它会出现，尤其是当你开始使用“反应运动”（React Motion）时（你会注意到其中的差异）。如果可能的话，最好避免使用未命名的函数。

第一个选项“this.postClicked（el.id）”实际上会在每次组件渲染时使用“el.id”参数调用方法“this.postClicked”（可能不是预期的）

第二个选项，“（）=>this.postClicked（el.id）”，将仅在单击“Post”时调用带有“el.id”参数的方法“this.postClicked”

总之，如果您能找到一种方法将“el.id”参数放入组件的“id”或“name”属性中

<Post id={el.id} />

然后你可以做：

<Post
  id={el.id}
  onClick={this.postClicked}
/>

this.postClicked = (event) => {
  const { id } = event.target;
  ...
}

this.postClicked=（事件）=>{
const{id}=event.target；
...
}

最后一个选项避免使用未命名函数。如果使用未命名函数，将导致不必要的重新渲染。React在检查是否应重新渲染时，无法通过考虑组件的道具是否已更改来判断未命名函数是否相同。每次检查时，它都会将未命名的函数视为新的道具，从而导致每次不必要的重新渲染

---

总的来说，它不会破坏你的应用程序，但如果你做得足够的话，它会稍微降低性能。它会出现，尤其是当你开始使用“反应运动”（React Motion）时（你会注意到其中的差异）。如果可能的话，最好避免使用未命名的函数。

在Ecmascript 6 javascript引入is arrow函数之后

这里的

（）==>{//code}

类似于

函数（）

或匿名函数

---

在使用is arrow函数引入Ecmascript 6 javascript之后，如果您找到了想要的内容，请告诉我

这里的

（）==>{//code}

类似于

函数（）

或匿名函数

---

如果你找到了你想要的，告诉我你的问题似乎已经得到了回答。不过还有一点需要注意：记住，在为方法指定箭头函数时

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

每次重新渲染时都会创建一个新的匿名函数。因此，如果方法不需要任何参数，最好直接引用该方法（不带括号，因此不会调用）

---

看来你的问题已经得到了回答。不过还有一点需要注意：记住，在为方法指定箭头函数时

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

每次重新渲染时都会创建一个新的匿名函数。因此，如果方法不需要任何参数，最好直接引用该方法（不带括号，因此不会调用）