Gestionnaires d'événements dans les composants React Stateless

Question

Essayer de trouver un moyen optimal de créer des gestionnaires d'événements dans les composants React sans état. Je pourrais faire quelque chose comme ceci :

const myComponent = (props) => {
    const myHandler = (e) => props.dispatch(something());
    return (
        Cliquez-moi
    );
}

L'inconvénient ici étant qu'à chaque fois que ce composant est rendu, une nouvelle fonction "myHandler" est créée. Existe-t-il un meilleur moyen de créer des gestionnaires d'événements dans des composants sans état qui peuvent toujours accéder aux propriétés du composant ?

Answer 1

Applying handlers to elements in function components should generally just look like this:

const f = props => 

If you need to do anything much more complex it's a sign that either a) the component shouldn't be stateless (use a class, or hooks), or b) you should be creating the handler in an outer stateful container component.

As an aside, and undermining my first point slightly, unless the component is in a particularly intensively re-rendered part of the app there's no need to worry about creating arrow functions in render().

Answer 2

En utilisant la nouvelle fonctionnalité des hooks React, cela pourrait ressembler à ceci :

const HelloWorld = ({ dispatch }) => {
  const handleClick = useCallback(() => {
    dispatch(something())
  })
  return 

useCallback crée une fonction mémorisée, ce qui signifie qu'une nouvelle fonction ne sera pas régénérée à chaque cycle de rendu.

https://reactjs.org/docs/hooks-reference.html#usecallback

Cependant, cela est toujours au stade de proposition.

Answer 3

Que diriez-vous de cette manière :

const myHandler = (e,props) => props.dispatch(something());

const myComponent = (props) => {
 return (
     myHandler(e,props)}>Cliquez-moi
  );
}

Answer 4

Si le gestionnaire dépend de propriétés qui changent, vous devrez créer le gestionnaire à chaque fois car vous manquez d'une instance étatique sur laquelle le mettre en cache. Une autre alternative qui pourrait fonctionner serait de mémoriser le gestionnaire en fonction des props d'entrée.

Options d'implémentation en couple lodash._memoize R.memoize fast-memoize

Answer 5

Solution one mapPropsToHandler and event.target.

functions are objects in js so its possible to attach them properties.

function onChange() { console.log(onChange.list) }

function Input(props) {
    onChange.list = props.list;
    return 
}

this function only bind once a property to a function.

export function mapPropsToHandler(handler, props) {
    for (let property in props) {
        if (props.hasOwnProperty(property)) {
            if(!handler.hasOwnProperty(property)) {
                 handler[property] = props[property];
            }
        }
    }
}

I do get my props just like this.

export function InputCell({query_name, search, loader}) {
    mapPropsToHandler(onChange, {list, query_name, search, loader});
    return (

    );
}

function onChange() {
    let {query_name, search, loader} = onChange;

    console.log(search)
}

this example combined both event.target and mapPropsToHandler. its better to attach functions to handlers only not numbers or strings. number and strings could be passed with help of DOM attribute like

rather than mapPropsToHandler
import React, {PropTypes} from "react";
import swagger from "../../../swagger/index";
import {sync} from "../../../functions/sync";
import {getToken} from "../../../redux/helpers";
import {mapPropsToHandler} from "../../../functions/mapPropsToHandler";

function edit(event) {
    let {translator} = edit;
    const id = event.target.attributes.getNamedItem('data-id').value;
    sync(function*() {
        yield (new swagger.BillingApi())
            .billingListStatusIdPut(id, getToken(), {
                payloadData: {"admin_status": translator(event.target.value)}
            });
    });
}

export default function ChangeBillingStatus({translator, status, id}) {
    mapPropsToHandler(edit, {translator});

    return (

            {translator('accepted')}
            {translator('pending')}
            {translator('rejected')}

    )
}

solution two. event delegation

see solution one. we can remove event handler from input and put it to its parent that holds other inputs too and by the help delegation technique we can be use event.traget and mapPropsToHandler function again.