重新加载组件 - 反应

Question

如何使组件重新加载，我的意思是不是重新渲染组件，但我想再次调用 componentDidMount（重新启动生命周期组件）

class Test extends Component 
{
    componentDidMount()
    {
        console.log('component did mount');
    }
    reload = () => 
    {
        //RELOAD COMPONENT
    };
    render()
    {
        return (<Button onPress={this.reload}/>)
    }
}

Answer 1

您可以明确调用生命周期方法

reload = () => 
{
    //RELOAD COMPONENT
    this.componentDidMount();
};

如果要重新启动生命周期，则必须从DOM中删除它并重新添加。

Answer 2

您想要做什么。但这不是最好的做法。基本上，您需要从父组件切换组件的可用性。如下所示，父组件具有一个状态属性来介绍子组件的可用性。

class Parent extends Component {
  constructor(props) {
    super(props);
    this.state ={
      showChild : true
    }
  }
  componentDidMount() {
      console.log('Parent Mounted');
  }
  reloadChild = () => {
      this.setState({
        showChild : false
      })
    
      setTimeout(() => {
        this.setState({
          showChild : true
        })
      },100);
      console.log("Reload Child Invoked")
  }
  render() {
    return ( 
      <div >
        {this.state.showChild?
          <Child reloadChild={this.reloadChild}/> : null
        }
      </div>
    );
  }
}

儿童组件看起来如下

class Child extends Component {
  constructor(props) {
    super(props);
  }
  componentDidMount(){
    console.log('Child component Mounted');
  }
  componentWillUnmount(){
    console.log('Child Component Unmounted');
  }
  onButtonClick = () => {
    console.log("Button Clicked")
    this.props.reloadChild();
  }
  render() {
    return ( 
      <button onClick={this.onButtonClick}>
        Click Me
      </button>
    );
  }
}

单击子组件的按钮时，它将调用父组件中的方法，该方法可切换子组件的可用性。请注意，我在ReloAdchild（）方法中使用了SetInterval来切换可用性。正如我之前说的那样，这不是最好的做法。只是一个解决方法。

Answer 3

每次创建和破坏组件时，将其放在全局变量componentArray中，以便外部称为所有生命周期方法。

class Test extends Component {
  constructor(props){
    super(props)
    // add 
    window.componentArray = window.componentArray || []
    this.index = new Date().getTime()
    window.componentArray.push(this)
  }
  componentDidMount(){
    console.log('componentDidMount')
  }
  componentWillUnmount(){
    // remove
    window.componentArray = window.componentArray || []
    window.componentArray = window.componentArray.reduce((pre,obj)=>{
      if(this.index != obj.index){
        pre.push(obj)
      }
      return pre
    },[])
  }
  reComponentDidMount(){
    this.componentDidMount()
  }
  render(){
    return <div>test</div>
  }
}

// outside like this run
componentArray.forEach(o=>{
   o.componentDidMount()
})