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