筆記：面試 - 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 時會回到父組建繼續執行父組建未完成的生命週期。

原文地址