javascript - What's a bad practice with refs in React? -

i'm getting learn react. guys of different sites tells using refs bad practice (yep, using them @ all).

what's real deal it? bad attach to, example, child component (so can access inner stuff)?

thanks!

react requires think react way , refs kind of backdoor dom never need use. simplify drastically, react way of thinking once state changes, re-render all components of ui depend on state. react take care of making sure right bits of dom updated, making whole thing efficient , hiding dom (kinda).

for example, if component hosts htmlinputelement, in react you'll wire event handler track changes input element. whenever user types character, event handler fire , in handler you'll update state new value of input element. change state triggers hosting component re-render itself, including input element new value.

here's mean

import react 'react';  import reactdom 'react-dom';    class example extends react.component {        state = {        inputvalue: ""      }        handlechange = (e) => {        this.setstate({          inputvalue: e.target.value        })      }        render() {          const { inputvalue } = this.state          return (             <div>              /**.. lots of awesome ui **/              /** input element **/              <input value={inputvalue} onchange={this.handlechange}} />              /** ... more awesome ui **/            </div>         )    }  }      reactdom.render( <example />, document.getelementbyid("app") );

<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="app">  </div>

notice how anytime input value changes, handler gets called, setstate gets called , componet re-render in full.

its bad practice think refs because might tempted use refs , and things jquery way, not intention of react architecture/mindset.

the best way understand better build more react apps & components.