ReactJS Curry函数延迟事件绑定

我对React（方法）构建UI是新的，同时也涉足了一点FP。 基本上，我想知道使用curried函数延迟与字段的绑定事件是否是一种好的做法，是否有任何性能影响

例如： 我有一组帖子，每个帖子都有一个评论框，用户可以在这里对帖子发表评论。因此，我们需要在我的事件handle中发布帖子和该帖子的相关评论，这只是一个功能。 检查CodePen上的工作代码示例：

/*
*简单反应组分
*/
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）
控制台日志（道具）
此.state={
帖子：['post1'，'post2'，'post3']
}
}
render（）{
报税表（

{this.state.posts.map(
（post，i）=>{
返回(
)
}
) }

)
}
}
常量PostSingle=（{post，index，bindPost}）=>{
让handlePostComment=（）=>{
返回bindPost（空）
}
返回(

{
让值=e.target.value
handlePostComment=（）=>{
返回bindPost（值）
}
}
}>
{handlePostComment（）}}>注释
{post}

)      
}
/*
*将上述组件渲染到div#应用程序中
*/
const PostComment=post=>comment=>{
警报（`You commented${comment}for${post}`）
}
ReactDOM.render（，document.getElementById（'app'））；

所以基本上，PostComment函数在创建对象时以一种通用的方式获取属性。 除了在Redux教程中，我找不到很多这样的例子。 在实际应用程序中，可以使用mapDispatchToProps（）中的props，使用Redux将事件传递给主组件

---

您的想法和评论将不胜感激。

我认为使用

post

属性和

state

是一种更具反应性的方式。handlePostComment将在每次渲染调用时重新初始化，因此此代码比功能性代码更重要（IMHO使用闭包不会使代码功能性更强）。
状态是处理命令逻辑的React方式，通过正确使用状态和道具，您可以从React优化中获益。
一般来说，我认为这打破了只有一个真理来源的哲学。
在这种情况下，您也不能通过提供值来进行输入

/*
 * A simple React component
 */
class Application extends React.Component {
  constructor(props){
    super(props)
    console.log(props)
    this.state = {
      posts:['post1', 'post2', 'post3']
    }
  }
  render() {
    return (      
      <div>
        <ul>
       { this.state.posts.map(
          (post, i) => {
            return (
            <PostSingle post = {post} index = {i} bindPost = {this.props.post(post)}/>
            )
          }
          ) }
            </ul>
      </div>
    )
  }
}

const PostSingle = ({post, index,bindPost}) => {
  let handlePostComment = () => {
    return bindPost(null)
  }
            return (
              <div>
            <li key={index}>
              <input onChange = {
                  (e) => {
                    let value = e.target.value
                    handlePostComment = () => {
                      return bindPost(value)
                    }
                  }
                }></input>
              <button onClick={() => {handlePostComment()}}>Comment</button>
                <p key={index}>{post}</p>
            </li>
                </div>
            )      
 }

/*
 * Render the above component into the div#app
 */
const PostComment = post => comment => {
  alert(`You commented ${comment} for ${post}`)
}
ReactDOM.render(<Application post={PostComment}/>, document.getElementById('app'));