Giter VIP home page Giter VIP logo

react-refs's Introduction

react-refs


DEPRECATED: This is not a good idea in terms of performance. Bind in constructor... ๐Ÿ˜›


Since string references have been removed from react for multiple reasons, we as developers were forced to create a new function each time we set such a string reference for a react element or component.

To avoid this and bring back the convenience of string references (even at the cost of a few minor problems, as mentioned above), I've built this library.

Despite of all the things linked above, using this project is perfectly fine. Because either way, you should ensure to use string references as less as possible. But when you do, you'll probably built a logic like this one by yourself (I usually do that), so this packagage simply abstracts this part in the best way.

Usage

Firstly, install the package using npm:

npm install --save react-refs

Then load it:

import setRef from 'react-refs'

Next, initialize the package in your constructor:

constructor(props) {
  super(props)
  this.setReference = setRef.bind(this)
}

As the final step, you can create a reference in render (using the example code mentioned below, your reference will live inside the this.example property):

<Example ref={this.setReference} name="example"/>

Increasing Performance

The package is already binding in constructor to make re-rendering as fast as possible out of the box. But if you want to get the maximum out of performance, I suggest pre-filling each reference with null in constructor (v8 likes it a lot when you tell it as much as possible ahead of time):

constructor(props) {
  super(props)
  this.setReference = setRef.bind(this)
  
  // Based on the "name" property of the <Example/> component above
  this.example = null
}

Caught a Bug?

  1. Fork this repository to your own GitHub account and then clone it to your local device
  2. Link the package to the global module directory: npm link
  3. Within the electron app of your choice, link it to the dependencies: npm link react-refs. Instead of the default one from npm, it will now use your local clone of the package!

Author

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.