在React中使用refs有什么不好的做法？

Question

我正在学习React.不同网站的一些人告诉大家,使用refs是一种不好的做法(是的,完全使用它们).

什么是真正的处理？我将它附加到例如子组件(所以我可以访问内部的东西)是不是很糟糕？

谢谢!

Answer 1

React要求你认为反应方式和refs是你几乎不需要使用的DOM的后门.为了大幅简化,反应思维方式是,一旦状态发生变化,您将重新呈现UI中依赖于该状态的所有组件.React将负责确保只更新DOM的正确位,使整个事情变得高效并隐藏DOM(有点).

例如,如果组件承载HTMLInputElement,则在React中,您将连接一个事件处理程序以跟踪对input元素的更改.每当用户键入一个字符时,事件处理程序将触发,并且在处理程序中,您将使用input元素的新值更新状态.对状态的更改会触发托管组件重新呈现自身,包括具有新值的input元素.

这就是我的意思

import React from 'react';
import ReactDOM from '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 **/
            /** an input element **/
            <input value={inputValue} onChange={this.handleChange}} />
            /** ... some 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>

注意输入值改变的任何时候,处理程序被调用,setState被调用,组件将完全重新呈现.

考虑引用通常是不好的做法因为你可能只想使用引用并且做事情就像JQuery那样,这不是React架构/思维模式的意图.

更好地理解它的最好方法是构建更多React应用程序和组件.