5.React Native组件之生命周期-版本React16.4

目录

 

1.React 组件（Component）生命周期图解

2.组件(Component)生命周期说明

2.1实例化阶段函数分析

2.1.1constructor()

2.1.2getDerivedStateFromProps()

2.1.3componentDidMount()

2.2props或者state更新阶段函数分析

2.2.1getDerivedStateFromProps()

2.2.2shouldComponentUpdate()

2.2.3getSnapshotBeforeUpdate(prevProps, prevState)组件刷新前调用

2.2.3componentDidUpdate(prevProps, prevState, snapshot)更新后

2.3卸载阶段函数分析

2.3.1componentWillUnmount()

3.常用知识点分析:

4.什么是DOM diff算法

---

1.React 组件（Component）生命周期图解

通过以上React组件的生命周期图解可以发现，组件主要包含三个阶段（实例化阶段、状态或者属性更新显示阶段，卸载阶段），我们经常接触的是实例化阶段和状态或者属性更新显示阶段，实例化阶段主要完成组件的初始化、参数的初始化设置操作，状态或者属性更新显示阶段主要在组件（Component）运行过程中根据属性或者状态变化等更新界面显示的过程，我们需要根据这几个声明周期函数来完成页面显示和逻辑处理的任务；

2.组件(Component)生命周期说明

2.1实例化阶段函数分析

当一个组件被初始化创建是会按照如下方法调用：

constructor()
static getDerivedStateFromProps()
render()
componentDidMount()

注意:
这些方法将被认为是遗留的，您应该在新代码中避免使用它们：
UNSAFE_componentWillMount()

2.1.1constructor()

constructor构造器方法主要用于完成初始化state或者绑定方法，如果不需要做这些事情我们就不需要实现构造方法；当我们需要为React.Component子类实现constructor方法时，我们一定要在完成其他设置以前先调用super(props)方法，否则this.props没有在constructor中定义将会导致bug；

典型的，在React中constructors方法被使用仅仅有两个目的：

a.初始化state及调用示例

  constructor(props){
      super(props);
      //设置状态值
      this.state = {date: new Date()};
  }

  render(){
      return (
          <View>
              <Text>Hello, world!</Text>
              //读取状态值
              <Text>It is {this.state.date.toLocaleTimeString()}.</Text>
          </View>
      );
  }

  componentDidMount(){
        console.log("componentDidMount");
        //更新状态值
        this.setState({
            date: new Date()
        });
  }

注意：setState()方法不能在构造函数中调用，在constructor方法中需要使用this.state={}初始化状态值；初始化状态值this.state={}只能在constructor方法中调用，更新状态值setState()方法在其他方法中调用；一旦调用了this.setState方法，组件一定会调用render方法，对组件进行再次渲染，不过，React框架会根据DOM的状态自动判断是否需要真正渲染

b.给Component实例绑定方法

  constructor(props) {
        super(props);
        this.state = {isToggleOn: true};

        //事件绑定
        // This binding is necessary to make `this` work in the callback
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        this.setState(state => ({
            isToggleOn: !state.isToggleOn
        }));
    }

    render() {
        return (
            <TouchableOpacity onPress={this.handleClick}>
                <Text>{this.state.isToggleOn ? 'ON' : 'OFF'}</Text>
            </TouchableOpacity>
        );
    }

注意：

避免复制props给state，这是一个常见的错误：

constructor(props) {
 super(props);
 // Don't do this!
 this.state = { color: props.color };
}

这个问题是它既不必要（相反你可以直接使用this.props.color），并创建错误（更新color不会反映在状态中）。

如果您有意忽略prop更新，请仅使用此模式。 在这种情况下，将prop重命名为initialColor或defaultColor是有意义的。 然后，您可以通过在必要时 changing its key来强制组件“reset”其内部状态。

阅读我们