如何對子組件進行 React forceUpdate()？

Question

我可以使用this.forceUpdate()強制重新加載父組件，但是如何為子組件執行此操作？

即以下反應 class 方法：

buttonClick = () => {
   //This updates parent (this) component
   this.forceUpdate(); 

  //This causes runtime error ("..not a function in buttonClick...")
   Rtable.forceUpdate();
}

render () {
  <div>
     <RTable />
  </div>
}

Answer 1

如果子組件沒有被記憶，那么渲染它的父組件將渲染子組件。

如果子組件被記憶，你可以強制更新它的引用。

當然，將不同的屬性傳遞給一個孩子，改變它的 state，會重新渲染它。

更改密鑰將卸載組件，就像在其上進行條件渲染一樣。

這是一個演示所有提到的示例：

class Child extends React.Component {
  componentDidMount() {
    console.log("mounted");
  }
  render() {
    console.log("rendered");
    return <div>Child</div>;
  }
}

class App extends React.Component {
  state = {
    counter: 0
  };

  childRef = React.createRef();
  onClick = () => this.forceUpdate();
  onCounter = () => this.setState({ counter: this.state.counter + 1 });
  onRef = () => this.childRef.current.forceUpdate();

  render() {
    return (
      <>
        <Child key={this.state.counter} ref={this.childRef} />
        <button onClick={this.onClick}>Render</button>
        <button onClick={this.onCounter}>Update Key</button>
        <button onClick={this.onRef}>Render with ref</button>
      </>
    );
  }
}

Answer 2

<RTable key={some variable that changes between renders} />

正如下面所指出的，這將導致卸載，這會導致子級丟失其 state 並且還會運行componentWillUnmount 、 componentDidMount和constructor方法（當您想要重新訂閱時可能很有用）。

文檔https://reactjs.org/docs/glossary.html#keys