Question

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

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)}

如果有人能告诉我一般情况的不同，我将不胜感激

Answer 1

在使用箭头函数link

引入Ecmascript 6 javascript之后

此处()==>{//code}与function()或匿名函数

类似

告诉我你是否知道自己想要什么

Answer 2

你可以阅读这篇博客，它会清楚https://medium.com/@machnicki/handle-events-in-react-with-arrow-functions-ede88184bbb

Answer 3

差异是，

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

在第一种方法中，您正在进行函数调用，在第二种方法中，您要为onClick分配函数的签名。这就像下面两个陈述的组合。

df = pd.DataFrame(data=data[1:,1:].astype(int),
                  index=data[1:,0],
                  columns=data[0,1:])

df1 = df[df['col1'].isin([1,2]) & df['col2'].isin([2,4])]

print(df1)

      col1  col2
row1     1     2

Answer 4

第一个选项＆＃34; this.postClicked（el.id）＆＃34;，实际上会调用方法，＆＃34; this.postClicked＆＃34;，使用＆＃34; el.id＆＃34;参数，每次组件渲染（可能不是什么意思）。

第二个选项，＆＃34;（）=＆gt; this.postClicked（el.id）＆＃34;，只会使用＆＃34; el.id＆＃34;来调用方法＆＃34; this.postClicked＆＃34;争论，当＆＃34; Post＆＃34;点击。

总的来说，如果你能找到一种方法来放置＆＃34; el.id＆＃34;参与＆＃34; id＆＃34;或＆＃34;名称＆＃34;关于组件的支柱

<Post id={el.id} />

然后你可以这样做：

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

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

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

总的来说，它不会破坏你的应用程序，但如果你做得足够，它会略微降低性能。特别是如果你开始使用React Motion（你真的注意到那里的差异）。如果可能，最好避免使用未命名的功能。

Answer 5

看起来你的问题已经得到解答了。但请注意：记住在为方法指定箭头函数时

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

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

onClick={ this.method }

Answer 6

每次渲染完成后，第一个都会调用该函数。

第二个会做你想做的事 - 在onClick上调用它。

调用方法vs使用函数调用方法

6 个答案: