API komponen bertindak balas

Dalam bab ini kita akan membincangkan API Komponen Reaksi. Kami akan menerangkan 7 kaedah berikut:

Tetapkan keadaan: setState
Ganti keadaan: replaceState
Tetapkan set atributProps
Ganti atribut replaceProps
Kemas kini paksa: forceUpdate
Dapatkan Nod DOM: findDOMNode
Tentukan status pemasangan komponen: isMounted

Tetapkan keadaan: setState

setState(object nextState[, function callback])

Parameter huraian

nextState, keadaan baharu yang akan ditetapkan, yang akan digabungkan dengan keadaan semasa
panggilan balik, parameter pilihan, fungsi panggil balik. Fungsi ini akan dipanggil selepas setState berjaya ditetapkan dan komponen dipaparkan semula.

Gabungkan nextState dan keadaan semasa, dan paparkan semula komponen. setState ialah kaedah utama untuk mencetuskan kemas kini UI dalam fungsi pengendalian acara React dan meminta fungsi panggil balik.

Mengenai setState

Anda tidak boleh mengubah suai keadaan melalui this.state di dalam komponen, kerana keadaan akan diganti selepas memanggil setState().

setState() tidak segera menukar this.state, tetapi mencipta keadaan yang akan diproses. setState() tidak semestinya segerak Untuk meningkatkan prestasi, React akan melaksanakan keadaan dan pemaparan DOM dalam kelompok.

setState() akan sentiasa mencetuskan lukisan semula komponen melainkan beberapa logik pemaparan bersyarat dilaksanakan dalam shouldComponentUpdate().

Instance

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>php中文网 React 实例</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
 <body>
    <div id="message" align="center"></div>

    <script type="text/babel">
      var Counter = React.createClass({
        getInitialState: function () {
          return { clickCount: 0 };
        },
        handleClick: function () {
          this.setState(function(state) {
            return {clickCount: state.clickCount + 1};
          });
        },
        render: function () {
          return (<h2 onClick={this.handleClick}>点我！点击次数为: {this.state.clickCount}</h2>);
        }
      });
      ReactDOM.render(
        <Counter />,
        document.getElementById('message')
      );
    </script>
  </body>
</html>

Run instance »

Klik butang "Run Instance" untuk melihat instance dalam talian

Dalam contoh, mengklik teg h2 meningkatkan pembilang klik sebanyak 1.

Ganti keadaan: replaceState

replaceState(object nextState[, function callback])

nextState, keadaan baharu yang akan ditetapkan, yang akan menggantikan keadaan semasa .
panggilan balik, parameter pilihan, fungsi panggil balik. Fungsi ini akan dipanggil selepas replaceState berjaya ditetapkan dan komponen dipaparkan semula. Kaedah

replaceState() adalah serupa dengan setState(), tetapi kaedah tersebut hanya akan mengekalkan keadaan dalam nextState . Tetapkan sifat: setProps

setProps(object nextProps[, function callback])

nextProps

props
Gabung
panggilan balik
setProps
berjaya ditetapkan dan komponen dipaparkan semula. Tetapkan sifat komponen dan tunjukkan semula komponen.

props

adalah bersamaan dengan aliran data komponen, yang sentiasa diturunkan daripada komponen induk kepada semua komponen anak. Apabila menyepadukan dengan aplikasi JavaScript luaran, kami mungkin perlu menghantar data kepada komponen atau memberitahu komponen

React.render()

bahawa ia perlu dipaparkan semula Anda boleh menggunakan setProps(). . Untuk mengemas kini komponen, saya boleh memanggil React.render() sekali lagi pada nod, atau saya boleh menukar sifat komponen melalui kaedah

setProps()

untuk mencetuskan komponen untuk membuat semula. Ganti sifat: replaceProps

replaceProps(object nextProps[, function callback])

nextProps

props semasa
.
panggilan balik
replaceProps
berjaya ditetapkan dan komponen dipaparkan semula. Kaedah
replaceProps()

setProps

, tetapi ia akan memadamkan rreee asal kemas kini paksa : forceUpdate

props

Perihalan parameter

panggilan balik

render()
dipanggil. Kaedah forceUpdate() akan menyebabkan komponen memanggil kaedah render() sendiri untuk memaparkan semula komponen, dan subkomponen komponen juga akan memanggil render() mereka sendiri. Walau bagaimanapun, apabila komponen itu dipaparkan semula, this.props dan this.state masih akan dibaca Jika keadaan tidak berubah, React hanya akan mengemas kini DOM.

Secara umum, anda harus cuba mengelak daripada menggunakan forceUpdate() dan hanya membaca keadaan daripada this.props dan this.state dan minta React mencetuskan panggilan render().

Dapatkan nod DOM: findDOMNode

forceUpdate([function callback])

Nilai pulangan: elemen DOM DOMElement

Jika komponen telah dipasang dalam DOM , kaedah ini mengembalikan elemen DOM penyemak imbas tempatan yang sepadan. Apabila membawa mengembalikan null atau false, this.findDOMNode() juga akan mengembalikan null. Kaedah ini berguna apabila membaca nilai daripada DOM, seperti mendapatkan nilai medan borang dan melakukan beberapa operasi DOM.

Tentukan status pemasangan komponen: isMounted

DOMElement findDOMNode()

Nilai pulangan: true atau false, yang menunjukkan komponen Sama ada ia telah dipasang dalam kaedah DOM

isMounted() digunakan untuk menentukan sama ada komponen telah dipasang dalam DOM. Kaedah ini boleh digunakan untuk memastikan setState() dan forceUpdate() tidak akan salah apabila dipanggil dalam senario tak segerak.

Rujukan untuk artikel ini: http://itbilu.com/javascript/react/EkACBdqKe.html