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

国家是由组成部分私人管理的财产，因此， 组成无国籍状态是由其自己而不是其父母或子女决定的。

无状态组件中没有可用的生命周期挂钩，而它们仍可继续在其子代中正常工作。