reactjs - 为什么有时可以将ref附加到无状态函数？

在React docs中（我的斜体字）：


  引用可能不会附加到无状态函数，因为该组件没有后备实例。您始终可以将无状态组件包装在标准复合组件中，并将引用附加到复合组件。


和0.14 changelog（我的斜体字）：


  由于没有为功能组件创建组件实例，因此添加到其中的任何引用都将评估为null。功能组件没有生命周期方法，但是您可以将.propTypes和.defaultProps设置为函数的属性。


在Dan Abramov Redux egghead tutorials的第21讲中，我们编写了以下用于添加待办事项的无状态功能组件：

const AddTodo = ({
  onAddClick,
}) => {
  let input;
  return <div>
    <input ref = {node => {
        input = node;
      }} />

    <button onClick = {() => {
          onAddClick(input.value)
          input.value='';
        }}>Add Todo</button>

  </div>
}

当放入应用程序的复合组件中并且ref未按照React文档的承诺返回null时，这实际上是可行的！

复合组件中AddTodo的实现如下所示：

class TodoApp extends Component {

  render() {
    //console.log(store.getState());
    log();
    const {
      todos,
      visibilityFilter,
    } = this.props;
    const visibleTodos = getVisibleTodos(
      todos,
      visibilityFilter
    );
    return (
      <div>
          <AddTodo onAddClick = {
              (input) => {
                store.dispatch({
                  type:'ADD_TODO',
                  text: input,
                  id: nextTodoId++,
                })
              }
            }/>

文档确实说过，我们可以将无状态组件包装在复合组件中，并将引用附加到复合组件。这里的关键是复合组件的附件，但是我的引用在我的实现中仍然附加到无状态AddTodo上。

我的问题是：


AddTodo这里确实是一个无状态的功能组件，对吗？
如果没有，为什么不呢？ （它肯定看起来像一个，但我可能会错过无状态意味着什么的显着特征）
如果对问题1回答为“是”，那么在此处能够使用ref的行为与React文档中所呈现的行为如何一致？

最佳答案

广告1）是，AddTodo是无状态功能组件。

广告2）与此处无关：-)

广告3）您要在input而不是AddTodo上添加引用-这就是它起作用的原因。如果您查看引用的文档页面，


  当将ref附加到<div />之类的DOM组件时，您将获得DOM节点。


这正是您想要的代码。

您不能执行以下操作：<AddTodo ref={component => ...} />，因为没有可以传递给ref函数的AddTodo实例。