onClick関数のパラメータをreduxの "presentation"コンポーネント

Question

redux "プレゼンテーションコンポーネント"の関数に引数としてオブジェクトを渡す最も良い方法は何ですか？

私は<BookList />コンテナコンポーネントを持っています。 BookListの中で、各書籍のプレゼンテーションコンポーネント<BookListRow/>をレンダリングします。

各BookListRowにボタンを作成して、ブックを削除したいと考えています。だから私はこれを行う：

const BookListRow = ({book, deleteBook}) => { 
    return (
    <tr> 
     <td> 
     <button className="btn btn-sm btn-danger" 
       onClick={() => {deleteBook(book}} 
     > 
      <i className="glyphicon glyphicon-remove"></i> 
     </button> 
     </td> 
     <td><a href={book.watchHref} target="_blank">Watch</a></td> 
     <td><Link to={'/book/' + book.id}>{book.title}</Link></td> 
     <td>{book.authorId}</td> 
     <td>{book.category}</td> 
     <td>{book.length}</td> 
    </tr> 
); 
}; 

これは動作します！しかし、パフォーマンスが悪いためにJSXの矢印機能を使用しないことをお勧めします。では、より良い方法は何ですか？

Answer 1

あなたはクラスのコンポーネントを使用することができます。

class BookListRow extends React.Component { 
    onBtnClick =() => { 
    this.props.deleteBook(this.props.book); 
    }; 

    render() { 
    return (
     ... 
     onClick={this.onBtnClick} 
     ... 
    ) 
    } 
} 

あなたはステートレス機能コンポーネントを使用したい場合、私はあなたが

を最適化するために、メモ化を使用することができると思う私はここ概念の非常に簡単な証明を書いた：http://codepen.io/CodinCat/pen/NpwLRE?editors=0011を

実際のonclick関数は1回だけ宣言されます。 Mapに保存して、親コンポーネントが再レンダリングするたびに再利用できるようにします。

上記の例は、ほんの単純なPoCです。親から渡されたonClickメソッドが動的に変更されない場合にのみ機能します。あなたは `stateProps`が必要な場合https://github.com/caiogondim/fast-memoize.js