笔记：面试 - React

• react渲染机制 日期：9/17

  父子之间渲染关系（先父 or 先子）

做了如下代码测试

class App extends Component {

  render() {
      return (
          <View>
              <Button>login</Button>
          </View>
      );
  }

}

class Button extends Component {
    render() {
        return (
            <TouchableOpacity>
                {this.props.children}
            </TouchableOpacity>
        );
    }
}

    class RootContainer extends Component {
      constructor(props) {
          super(props);
          console.log('RootContainer constructor');
      }

      componentWillMount() {
          console.log('RootContainer componentWillMount');
      }

      render() {
          console.log('RootContainer render');
          return (
              <div className="root">
                  <h3>This is RootContainer</h3>
                  <ChildView/>
              </div>
          );
      }
      componentDidMount() {
          console.log('RootContainer componentDidMount');
      }

      componentWillUnmount() {
          console.log('RootContainer componentWillUnmount');
      }

      componentWillReceiveProps(nextProps) {
          console.log('RootContainer componentWillReceiveProps(nextProps)');
      }

      componentWillUpdate(nextProps, nextState) {
          console.log('RootContainer componentWillUpdate(nextProps, nextState)');
      }

      shouldComponentUpdate(nextProps, nextState) {
          console.log('RootContainer shouldComponentUpdate(nextProps, nextState)');
          return true;
      }

      componentDidUpdate(prevProps, prevState) {
          console.log('RootContainer componentDidUpdate(prevProps, prevState)');
      }

  }

  //子组件
  class ChildView extends Component {

      constructor(props) {
          super(props);
          console.log('ChildView constructor');
      }

      componentWillMount() {
          console.log('ChildView componentWillMount');
      }

      render() {
          console.log('ChildView render');
          return (
              <div className="child">
                  <h4>I am a Child</h4>
              </div>
          );
      }

      componentDidMount() {
          console.log('ChildView componentDidMount');
      }

      componentWillUnmount() {
          console.log('ChildView componentWillUnmount');
      }

      componentWillReceiveProps(nextProps) {
          console.log('ChildView componentWillReceiveProps(nextProps)');
      }

      shouldComponentUpdate(nextProps, nextState) {
          console.log('ChildView shouldComponentUpdate(nextProps, nextState)');
          return true;
      }

      componentWillUpdate(nextProps, nextState) {
          console.log('ChildView componentWillUpdate(nextProps, nextState)');
      }

      componentDidUpdate(prevProps, prevState) {
          console.log('ChildView componetDidUpdate(prevProps, prevState)');
      }
  }

渲染顺序

RootContainer constructor

RootContainer componentWillMount

RootContainer render

--- ChildView constructor

--- ChildView componentWillMount

--- ChildView render

--- ChildView componentDidMount

RootContainer componentDidMount

结论

当父组建 render 时遇到子组件，然后进入子组件的生命周期，当执行完子组件生命周期中的componentDidMount 时会回到父组建继续执行父组建未完成的生命周期。

原文地址