Ref回调属性未按预期工作

Question

我有两个使用的示例ref callback attribute。首先是对回调函数的引用。第二个有一个箭头函数声明为该值。

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

这是什么原因呢？

开始在输入框中输入内容

示例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

关于React的Github问题已经对此进行了简要讨论。我会尽力解释这一点，但是很难用语言表达。

由于在第二个示例中您没有调用“智能”组件方法，因此console.log(el)每次重新渲染组件时都会发生这种情况，这意味着当特定节点（在本例中为您的输入）被删除并再次呈现时，它也会调用，不管el实际是否改变。当它被React移除时，它会返回，null因为该元素不再存在，即使只是一秒钟的时间。似乎是为了完成而这样做。

这是Dan Abramov
的一条推文，对此做了一些解释。