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

Question

我开始学习 React。不同站点的一些人告诉每个人使用 refs 是一种不好的做法(是的，根本不使用它们)。

它的真正作用是什么？我将它附加到子组件(以便我可以访问内部内容)是不是不好？

谢谢!

Answer 1

React 要求您 think the react way refs 是你几乎不需要使用的 DOM 的后门。为了彻底简化，React 的思维方式是，一旦状态发生变化，您就会重新呈现依赖于该状态的 UI 的所有组件。 React 将负责确保只更新 DOM 的正确位，使整个事情变得高效并向您隐藏 DOM(有点)。

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

我的意思是

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 被调用以及组件将完全重新呈现自身。

考虑 refs 通常是不好的做法，因为您可能会想只使用 refs 并以 JQuery 方式做事，这不是 React 架构/思维模式的意图。

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