ReactJS：无状态组件中的有状态子项

Question

让无状态组件中的有状态子项使组件不再是无状态的吗？

Answer 1

简短回答

不，它没有。

与具有状态的组件关联的生命周期方法应该独立于组件层次结构中的位置而工作，否则会以不可预测的方式中断。

这里证明了无状态组件具有类的后备实例，因此它们可以使用ref和生命周期方法：

class StatefulComponent extends React.Component {
  componentDidMount() {
    this.wrapper.classList.add("highlight");
  }
  
  render() {
    return (
      <div ref={ref => this.wrapper = ref}>
        Stateful (red outline due to class being added)
        {this.props.children}
      </div>
    );
  }
}

const StatelessComponent = props => (
  <div>
    Stateless (black outline)
    {props.children}
  </div>
);

ReactDOM.render(
  <StatefulComponent>
    <StatelessComponent>
      <StatefulComponent />
    </StatelessComponent>
  </StatefulComponent>, document.getElementById("app"));

div {
  padding: 20px;
  outline: 1px solid;
}

.highlight {
  outline-color: red;
}

<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 2

州是由某个组件私有管理的财产，因此组件是无国籍的由其自己决定而不是由其父母或子女决定。

无状态组件中没有生命周期钩子，而它们继续按照孩子的需要工作。