重新加载组件 - React

Question

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

class Test extends Component 
{

    componentDidMount()
    {
        console.log('component did mount');
    }

    reload = () => 
    {
        //RELOAD COMPONENT
    };

    render()
    {
        return (<Button onPress={this.reload}/>)
    }

}

- Ali Faris

---

唯一可能的方法是卸载组件，然后重新渲染。请看这个链接：https://tylermcginnis.com/an-introduction-to-life-cycle-events-in-react-js/ - JJJ

我认为卸载组件不是一个好主意。我更愿意建议您使用componentWillReceiveProps生命周期方法来执行您在componetDidMount中要执行的任何操作。 - Ajay Gaur

你能否发布一下你的根本问题？我认为更多的人可以帮助你，因为你想要做的事情可能不应该被做。当你发布你的根本问题时，我们可以更好地帮助你。 - Daniel

Answer 1

您可以显式调用生命周期方法。

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

如果您想重新启动生命周期，您需要将其从DOM中移除并重新添加。

- Kunukn

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来切换可用性。正如我之前所说，这不是最佳实践，只是一个权宜之计。

- Sajith Edirisinghe

---

可能这个可以工作，但不是我所希望的，无论如何还是谢谢。 - Ali Faris

我认为你应该使用setTimeout而不是setInterval。看起来你正在通过首先将它从DOM中删除然后重新添加来触发componentDidMount。 - Kunukn

谢谢。已更新答案。根据 OP 的要求，重新启动组件生命周期的唯一方法是将其从 DOM 中删除，然后再添加回去。 - Sajith Edirisinghe

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()
})

- Bohan Chen

---

你能否请添加解释？ - Nilambar Sharma