Apakah kaedah untuk bertindak balas terhadap keadaan kemas kini?

Kaedah kemas kini keadaan React ialah: 1. Tukar subkomponen melalui kunci, kod seperti "1492b41c09660c2b4632e7ee0f654c12”;

Persekitaran pengendalian tutorial ini: sistem Windows 7, bertindak balas versi 17.0.1, komputer Dell G3.

Apakah kaedah untuk mengemas kini keadaan dalam React?

Banyak cara untuk mengemas kini keadaan anak apabila prop ibu bapa berubah dalam React

Sub-komponen:

class Children extends Component {
  constructor(props) {
     super(props);
     this.state = {
       a: this.props.a,
       b: this.props.b,
       treeData: '',
       targets: '',
     }
    }
  componentDidMount() {
   const { a, b } = this.state
   const data = {a,b}
   fetch('/Url', {
     data
   }).then(res => {
   if (res.code === 0) {
     this.setState({
     treeData: res.a,
     targets: res.b,
  })
  } else {
   message.error(res.errmsg)
  }
  })
  }
 test(item1, item2) {
   const data = { item1, item2 }
   fetch('/Url', {data}).then(res => {
     if (res.code === 0) {
       this.setState({
         treeData: res.a,
         targets: res.b,
       })
     } else {
       message.error(res.errmsg)
     }
   })
 }
}
export default Children

Kaedah 1: Penggunaan kunci yang bijak

<Children key={this.state.key} a={this.state.a} b={this.state.b} /> //父组件调用子组件

Kaedah ini ialah subkomponen akan dibuat semula apabila kunci berubah (kunci perubahan dalam React akan memusnahkan komponen Menghidupkan semula komponen)

Kaedah 2: Gunakan komponen induk ref untuk memanggil fungsi subkomponen (tidak mematuhi spesifikasi reka bentuk tindak balas, tetapi ia boleh dianggap sebagai escape hatch~)

class father extends Component {
    constructer(props) {
      super(props);
      this.state={
       a: '1',
       b: '2',
      }
      this.myRef
      this.test = this.test.bind(this)
    }
   change() {
     const { a,b } = this.state
     console.log(this.myRef.test(a,b)) // 直接调用实例化后的Children组件对象里函数
    }
render() {
 <Children wrappedComponentRef={(inst) => { this.myRef = inst } } ref={(inst) => { this.myRef = inst } } />  
 <button onClick={this.test}>点击</button>
}
}

Nota : wrappedComponentRef digunakan dalam react-router v4 untuk menyelesaikan masalah bahawa komponen tertib tinggi tidak dapat memperoleh ref dengan betul (komponen bukan pesanan tinggi perlu dikeluarkan)

Kaedah 3: Ibu bapa menghantar data kepada anak, dan anak hanya bertanggungjawab untuk membuat (Paling konsisten dengan konsep reka bentuk tindak balas) Disyorkan! !

Komponen induk:

class father extends Component {
    constructer(props) {
      super(props);
      this.state={
       a:'1',
       b:'2',
       data:'',
      }
    }
  getcomposedata() {
    const { a, b } = this.state
    const data = { a, b }
    fetch('/Url', {data}).then(res => {
      if (res.code === 0) {
        this.setState({
          data:res.data
        })
      } else {
        message.error(res.errmsg)
      }
    })
  }
render() {
 <Children data={this.state.data}} />  
}
}

Komponen anak:

  componentWillReceiveProps(nextProps) {
    const { data } = this.state
    const newdata = nextProps.data.toString()
    if (data.toString() !== newdata) {
      this.setState({
        data: nextProps.data,
      })
    }
  }

Nota: Kitaran componentWillReceiveProps React menggunakan prop yang diubah untuk menilai dan mengemas kini keadaannya sendiri

Pembelajaran yang disyorkan: "tutorial video bertindak balas"

Atas ialah kandungan terperinci Apakah kaedah untuk bertindak balas terhadap keadaan kemas kini?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!