javascript - React.js: la forma más eficiente de pasar un parámetro a un controlador de eventos sin bind() en un componente

reactjs (4)

En lugar de .bind o crear una función de flecha anónima en render() , puede crear la función enlazada / anónima fuera de render() , como en el objeto instanciado, en el constructor, o algo así, y usar una referencia A esa función singular (nunca recreada). Por ejemplo, ejecute una vez :

this.boundHandleClick = this.handleClick.bind(this, 111);

this.boundHandleClick = () => this.handleClick(111);

Luego, en render , render referencia a boundHandleClick :

return ( <div className="App"> <button onClick={this.boundHandleClick}>Click</button> </div> );

Si necesita usar los parámetros ( 111 ) dentro del render , entonces podría usar la búsqueda de objetos para ver si existe una función vinculada con ese parámetro todavía. Si lo hace, simplemente use esa función vinculada; de lo contrario, créela ( una vez , para que no tenga que crearla cada vez que use ese parámetro en el futuro):

this.boundClicks = {}; // ... if (!this.boundClicks[''111'']) this.boundClicks[''111''] = () => this.handleClick(111); return ( <div className="App"> <button onClick={this.boundClicks[''111'']}>Click</button> </div> );

Cuando tiene que usar this palabra clave dentro de un controlador de eventos, debe vincular la función (controlador de eventos) con this kerword. De lo contrario, necesita utilizar la función de flecha .

p.ej

//This function isn''t bound whilst using "this" keyword inside of it. //Still, it works because it uses an arrow function handleClick = () => { this.setState({ isClicked:true }); } render() { return ( <div className="App"> <button onClick={this.handleClick}>Click</button> </div> ); }

Sin embargo, con el enfoque anterior, no puede pasar un parámetro. Necesitas usar cualquiera ...

bind(this, param) después de la función
la función de flecha anónima

es decir

<button onClick={this.handleClick}>Click</button> will be <button onClick={this.handleClick.bind(this, 111)}>Click</button> or <button onClick={() => this.handleClick(111)}>Click</button>

Aquí está la pregunta.

¿Cuál es la forma más eficiente de pasar un parámetro a un controlador de eventos?

Según el documento oficial , el uso de bind() puede minar el rendimiento, porque ...

El uso de Function.prototype.bind en render crea una nueva función cada vez que el componente se renderiza

Lo mismo ocurre con el uso de la función de flecha anónima. El doc dice que ...

El uso de una función de flecha en el render crea una nueva función cada vez que el componente se renderiza

Entonces, ¿cuál será la forma más eficiente de pasar un parámetro?

Cualquier contribucion sera apreciada.

Algunas personas han preguntado cómo se determina param . Esto se determinará dinámicamente (es decir, no siempre 111 ). Por lo tanto, puede ser de estados, accesorios o algunas otras funciones definidas en esta clase.

Esto depende de cómo se obtiene el parámetro. Habrá ocasiones en las que no podrá evitar usar un .bind o una función de flecha fácilmente, pero la mayoría de las veces puede obtener el parámetro de alguna manera. Como puede ver en la respuesta de @ CertainPerformance si puede usar este argumento en el constructor, puede preferir de esta manera. Pero puede haber otros enfoques.

Por ejemplo, suponga que tiene una lista en el estado. En lugar de asignar esta lista directamente y usar una función .bind o una flecha allí, puede pasar los elementos de la lista a un componente secundario y luego usar un controlador de devolución de llamada allí.

class App extends React.Component { state = { list: [ "foo", "bar" ], }; handleClick(el) { console.log( el ) } render() { return ( <div> {this.state.list.map( el => ( <Child key={el} el={el} onClick={this.handleClick} /> ) )} </div> ); } } const Child = ( props ) => { const handleClick = () => props.onClick( props.el ); return ( <div> {props.el} <button onClick={handleClick}>Click</button> </div> ); }; ReactDOM.render( <App />, document.getElementById( "root" ) );

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div>

Estoy actualizando mi respuesta con una demostración de cómo usar una función de flecha en línea, o unirla, o usar una función al curry provoca una recreación aquí.

Suponga que tiene un componente y este componente tiene un componente hijo escrito como React.PureComponent . Normalmente, si los accesorios de este niño no cambian, no volverán a reproducirse. Guay. Tenemos un método de clase en nuestro componente principal y queremos pasarlo como un controlador a nuestro componente secundario. Veamos que está pasando aquí.

Primero, no paso el controlador y cuando incrementas el contador en el padre, el componente hijo no vuelve a ejecutarse (excepto el procesamiento inicial). Esto se debe a que lo definimos como un PureComponent . No queremos que se vuelva a entregar a menos que cambien sus accesorios.

class App extends React.Component { state = { counter: 0, }; increment = () => this.setState( currentState => ( { counter: currentState.counter + 1, } ) ); handleClick(param) { console.log( param ) } render() { return ( <div> <button onClick={this.increment}>Increment</button> Counter is: {this.state.counter} <Child /> </div> ); } } class Child extends React.PureComponent { render() { console.log( "child rendered" ); return ( <div> <button onClick={this.props.onClick}>Click</button> </div> ); } } ReactDOM.render( <App />, document.getElementById( "root" ) );