javascript - Ref 回调属性未按预期工作

Question

我有两个使用 ref 回调属性 的示例。第一个引用了回调函数。第二个有一个箭头函数声明为值。

第一个按预期工作。但是，第二个在连续渲染时记录了一个 null。

这是什么原因？

开始在输入框内打字

示例 1(这很好用)

class App extends React.Component{
  constructor(props){
    super(props)
    this.refCallback = this.refCallback.bind(this)
    this.state = {}
  }
  
  refCallback(el){
    console.log(el)
  }
  
  render(){
    return <input type="text"
      value={this.state.value}
      ref={this.refCallback}
      onChange={(e) => this.setState({value: e.target.value})}
      />
  }
}

ReactDOM.render(<App/>, 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>

示例 2(这不起作用)

class App extends React.Component{
  constructor(props){
    super(props)
    this.state = {}
  }

  render(){
    return <input type="text"
      value={this.state.value}
      ref={(el) => console.log(el)}
      onChange={(e) => this.setState({value: e.target.value})}
      />
  }
}

ReactDOM.render(<App/>, 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>

Answer 1

添加到 Fabian Schultz

发生这种情况是因为在第一种情况下，您将函数的引用传递给 ref。在初始渲染期间，引用的函数将被实例化(创建一个实例)并且元素将被传递给该函数。对于以下渲染(重新渲染)，此实例保持不变。所以，React 不会调用这个函数，因为它已经被调用了。

但是，在第二种情况下，箭头函数作为值传入。因此，对于每次重新渲染，该函数都将作为值再次传递。这导致箭头函数的两个实例。一个来自之前的渲染，第二个来自最近的渲染。因此，React nullies 函数的前一个实例。因此，它为该函数的前一个实例返回 null，并将 元素 返回给该函数的最新实例。

要点:始终对 ref 使用函数引用

希望对您有所帮助!