Terdapat beberapa cara untuk mengisytiharkan komponen tindak balas

Terdapat tiga cara untuk mengisytiharkan komponen tindak balas: 1. Gunakan kaedah berfungsi untuk menentukan komponen tanpa kewarganegaraan 2. Gunakan kaedah "React.createClass()" untuk menentukan komponen 3. Gunakan "React.Component(); " Kaedah menentukan komponen dalam gaya ES6.

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

Cara tindak balas mengisytiharkan (mencipta) komponen:

Selepas React dilancarkan, terdapat tiga cara untuk menentukan komponen tindak balas atas sebab yang berbeza . Kaedah, pendekatan yang berbeza membawa kepada matlamat yang sama; React.createClass( ) Tentukan komponen

React.Component() Tentukan komponen
Walaupun terdapat tiga cara untuk mentakrifkan komponen tindak balas, maka ini tiga cara untuk menentukan komponen Apakah perbezaannya? Dalam erti kata lain, mengapa definisi yang sepadan muncul? Berikut adalah pengenalan ringkas.

• Komponen Fungsi Tanpa Status

• Mencipta komponen fungsi tanpa kewarganegaraan mula muncul dalam React versi 0.14. Ia digunakan untuk mencipta komponen paparan tulen, yang hanya bertanggungjawab untuk memaparkan berdasarkan prop yang masuk dan tidak melibatkan operasi negeri. Komponen fungsi tanpa kewarganegaraan khusus, kata pegawai itu:

Dalam kebanyakan kod React, kebanyakan komponen ditulis sebagai komponen tanpa kewarganegaraan, yang boleh dibina ke dalam komponen lain melalui gabungan ringkas A ini dianjurkan; yang berbilang aplikasi mudah digabungkan menjadi satu aplikasi besar.

Komponen fungsi tanpa kewarganegaraan secara rasmi diwakili sebagai kelas komponen dengan hanya satu kaedah pemaparan Ia dicipta dalam bentuk fungsi atau fungsi anak panah ES6, dan komponen itu tanpa kewarganegaraan. Borang ciptaan khusus adalah seperti berikut:

Bentuk penciptaan komponen tanpa kewarganegaraan menjadikan kod lebih mudah dibaca, dan mengurangkan banyak kod berlebihan, memudahkannya kepada hanya satu kaedah render, yang sangat meningkatkan Selain itu untuk kemudahan menulis komponen, komponen tanpa kewarganegaraan juga mempunyai ciri ketara berikut:

Bentuk penciptaan komponen tanpa kewarganegaraan menjadikan kod lebih mudah dibaca dan mengurangkan banyak kod berlebihan Kod dikurangkan kepada hanya satu pemaparan kaedah, yang sangat meningkatkan kemudahan menulis komponen Selain itu, komponen tanpa kewarganegaraan mempunyai ciri-ciri ketara berikut:

Komponen tidak disegerakan, prestasi pemaparan keseluruhan dipertingkatkan

Oleh kerana komponen dipermudahkan kepada fungsi kaedah render Memandangkan ia adalah komponen tanpa kewarganegaraan, komponen tanpa kewarganegaraan tidak akan berada dalam proses instantiasi komponen Proses bukan instan tidak perlu memperuntukkan lebihan memori. jadi prestasi dipertingkatkan ke tahap tertentu.

function HelloComponent(props, /* context */) {
  return <div>Hello {props.name}</div>
}
ReactDOM.render(<HelloComponent name="Sebastian" />, mountNode)

Komponen tidak boleh mengakses objek ini

Komponen tanpa status tidak mempunyai proses instantiasi, jadi mereka tidak boleh mengakses objek dalam komponen ini, seperti: this.ref, this.state Tiada boleh mengaksesnya. Jika anda ingin mengakses, anda tidak boleh menggunakan borang ini untuk mencipta komponen

• Komponen tidak boleh mengakses kaedah kitaran hayat
  Kerana komponen tanpa kewarganegaraan tidak memerlukan pengurusan dan status kitaran hayat komponen Pengurusan, jadi apabila pelaksanaan asas bentuk komponen ini tidak melaksanakan kaedah kitaran hayat komponen. Oleh itu, komponen tanpa negara tidak boleh mengambil bahagian dalam pelbagai pengurusan kitaran hayat komponen.

• Komponen tanpa status hanya boleh mengakses prop input yang sama akan mendapat hasil pemaparan yang sama tanpa kesan sampingan

• Komponen Tanpa Status digalakkan. ditulis semudah mungkin dalam projek besar untuk memisahkan komponen yang asalnya besar Pada masa hadapan, React juga akan melaksanakan satu siri pengoptimuman untuk komponen tanpa kewarganegaraan, seperti semakan tidak bermakna dan peruntukan memori, jadi apabila boleh, Gunakan komponen tanpa kewarganegaraan apabila boleh.

  React.createClass

• React.createClass ialah cara untuk mencipta komponen yang disyorkan pada permulaan react Ini ialah komponen React yang dilaksanakan dalam JavaScript asli ES5. Bentuknya Seperti berikut:

Berbanding dengan komponen tanpa kewarganegaraan, React.createClass dan React.Component yang akan diterangkan kemudian kedua-duanya mencipta komponen stateful dan boleh mengakses kaedah kitaran hayat . Walau bagaimanapun, dengan pembangunan React, masalah dengan borang React.createClass itu sendiri telah terdedah:

React.createClass akan mengikat sendiri kaedah fungsi (tidak seperti React.Component yang hanya mengikat perkara yang anda perlu ambil berat tentang) berfungsi) menyebabkan overhed prestasi yang tidak perlu dan meningkatkan kemungkinan kod menjadi usang.

Bauran React.createClass tidak cukup semula jadi dan intuitif; dalam bentuk yang lebih intuitif Fungsi yang lebih berkuasa, dan HOC adalah JavaScript tulen, tidak perlu risau tentang ia ditinggalkan. Untuk HOC, sila rujuk "Komponen Tanpa Status dan Komponen Pesanan Tinggi".

var InputControlES5 = React.createClass({
    propTypes: {//定义传入props中的属性各种类型
        initialValue: React.PropTypes.string
    },
    defaultProps: { //组件默认的props对象
        initialValue: ''
    },
    // 设置 initial state
    getInitialState: function() {//组件相关的状态对象
        return {
            text: this.props.initialValue || 'placeholder'
        };
    },
    handleChange: function(event) {
        this.setState({ //this represents react component instance
            text: event.target.value
        });
    },
    render: function() {
        return (
            <div>
                Type something:
                <input onChange={this.handleChange} value={this.state.text} />
            </div>
        );
    }
});
InputControlES6.propTypes = {
    initialValue: React.PropTypes.string
};
InputControlES6.defaultProps = {
    initialValue: &#39;&#39;
};

React.Component

• React.Component是以ES6的形式来创建react的组件的，是React目前极为推荐的创建有状态组件的方式，最终会取代React.createClass形式；相对于 React.createClass可以更好实现代码复用。将上面React.createClass的形式改为React.Component形式如下：

  class InputControlES6 extends React.Component {
      constructor(props) {
          super(props);
  
          // 设置 initial state
          this.state = {
              text: props.initialValue || 'placeholder'
          };
  
          // ES6 类中函数必须手动绑定
          this.handleChange = this.handleChange.bind(this);
      }
  
      handleChange(event) {
          this.setState({
              text: event.target.value
          });
      }
  
      render() {
          return (
              <div>
                  Type something:
                  <input onChange={this.handleChange}
                 value={this.state.text} />
              </div>
          );
      }
  }
  InputControlES6.propTypes = {
      initialValue: React.PropTypes.string
  };
  InputControlES6.defaultProps = {
      initialValue: &#39;&#39;
  };

  推荐学习：《react视频教程》

  Atas ialah kandungan terperinci Terdapat beberapa cara untuk mengisytiharkan komponen tindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!