Question

我是建立UI的React（方式）的新手，也是FP的一点点。基本上，我想知道使用curried函数来延迟绑定事件与字段是一个很好的做法，是否有任何性能影响。

对于EG：我有一组帖子和每个帖子都有一个评论框，用户可以在那里评论该帖子。所以我们需要帖子和我的事件汉字中的帖子的相关评论，这只是一个功能。检查CodePen上的工作代码示例： Event Binding

/*
 * 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'));

因此，基本上PostComment函数以curry方式获取属性，就像创建Objects时一样。除了Redux教程之外，我找不到这些的例子。在实际应用程序中，事件可以使用Redux在mapDispatchToProps（）中使用props传递给主组件。

非常感谢您的想法和意见。

Answer 1

我认为使用post属性和state是一种更多的Reacty方式。 handlePostComment将在每次渲染调用时重新初始化，因此这个代码更具必要性（然后使用闭包不会使代码正常运行）。 State是处理命令式逻辑的React方法，您可以通过正确使用state和props来从React优化中受益一般来说，我认为它打破了React Redux的理念，即拥有单一的真理来源另外，在这种情况下，您无法通过提供值来输入controlled。

ReactJS Curry函数延迟事件绑定

1 个答案: