子組件不會更改道具

Question

我有以下結構：

class Parent extends React.Component {

  componentDidMount() {
    document.addEventListener('keydown', () => {
      this.value++;
    })
  }

  this.value = 0;

  render() {
    return (<ChildComponent value={this.value} />) 

ChildComponent僅呈現值：

class ChildComponent extends Component {
  render() {
    return (
        <div>
            {this.props.value}
        </div>
    );
  }}

我不想在每個KeyDown事件上都重新渲染Parent組件，這就是為什么我不給狀態賦值。

我希望ChildComponent在每個KeyDown事件上都重新渲染，但是ChildComponent僅呈現一次，因為它不會獲得更改的值，並且盡管this.value有所更改，但始終顯示0。

是否可以在更改ParentComponent的this.value時重新渲染ChildComponent，或者我應該使用setState將邏輯放入ChildComponent中以呈現正確的結果？

Answer 1

您應該將值添加到父狀態。 這只是React的工作方式。 即使您可以在子組件上手動觸發重新渲染，由於提供了0個道具，它仍將為0。 當React檢測到Parent組件的狀態發生變化時，它將計算所有子元素的虛擬dom，對虛擬dom與真實dom進行比較，然后使用這些值（僅是Child的內部文本）有選擇地更新真實dom組件div實際上是新的）。 React進行了令人難以置信的優化，可以使用虛擬dom處理重新渲染，因此您不必擔心這種情況下的性能損失。

Answer 2

值更改時未調用子組件的原因，因為您要覆蓋普通變量值，但不對組件狀態做出反應。 因此，為了在值更改時調用子組件，您需要在父組件的組件狀態下管理value屬性，因此無論何時使用setState修改其值，組件都將重新呈現

更改

   class Parent extends React.Component {

     componentDidMount() {
         document.addEventListener('keydown', () => {
            this.value++;
         })
    }

     this.value = 0;

     render() {
          return (<ChildComponent value={this.value} />) 
     }
   }

至

  class Parent extends React.Component {
      constructor(props){
           super(props);
           this.state = {
                 value: 0
           }
      }
    componentDidMount() {
        document.addEventListener('keydown', () => {
             this.setState({value: this.state.value++});
        })
    }

     render() {
          return (<ChildComponent value={this.state.value} />) 
     }
   }