0
ですから、例えば部品 <Button doStuff={doStuff} /> Reactコンポーネントでは、引数をonClick関数にどこにバインドする必要がありますか？
に、私は、これは悪いです知っている、それはすべての上に新しい関数を作成し、レンダリング：
class Button extends Component {
const value = getClickValue(this.props); // do something with props
render() {
<button onClick={() => this.props.doStuff(value)}>Click me</button>
}
}
ではなく、次からのパフォーマンスに優れていることを確認：
1）クラスプロパティ関数のバインドクリック値
これは簡単な例ですが、私の現在のコンポーネントでは、小道具を処理するコードが自分のcompを混乱させていますあなたがDUMBコンポーネントとスマートコンテナを持つように努力したいときに、コンポーネントをよりスマートに、より愚かにしません。
class Button extends Component {
handleClick =() => {
const value = getClickValue(this.props); // do something with props to get value
this.props.doStuff(value);
}
render() {
<button onClick={this.handleClick}>Click me</button>
}
}
2）バインドされた機能を、コンテナからステートレス機能コンポーネントに送信します。
この方法は、組織の観点からは優れているようです。コンポーネントは可能な限りダムであり、レンダリングにのみ関係します。しかしそれはパフォーマンスに影響を与えますか？のように、ownPropsが変更されるたびに新しい関数が構築されますか？
const Button = (onClick) => (
<button onClick={this.props.onClick}>Click me!</button>
)
import { connect } from 'react-redux';
const mapDispatchToProps = (dispatch, ownProps) => {
const value = getClickValue(ownProps);
return {
onClick:() => doStuff(value)
};
};
connect(null, mapDispatchToprops)(Button);