Apakah yang dimaksudkan dengan komponen tertib tinggi bertindak balas?

Sebagai tindak balas, komponen tertib tinggi ialah fungsi, teknologi canggih untuk menggunakan semula logik komponen digunakan untuk menerima komponen sebagai parameter dan mengembalikan komponen baharu ini gunakan Komponen yang diserahkan kepadanya berfungsi sebagai subkomponen, dan komponen peringkat lebih tinggi boleh dilaksanakan menggunakan proksi harta dan warisan terbalik.

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 17.0.1, komputer Dell G3.

Apakah yang dimaksudkan dengan komponen tertib tinggi bertindak balas?

Komponen tertib tinggi ialah fungsi (bukan komponen) yang menerima komponen sebagai parameter dan mengembalikan komponen baharu. Komponen baharu ini akan menggunakan komponen yang anda hantar sebagai komponen anak - Dipetik daripada buku React.js

Komponen Pesanan Tinggi ialah teknologi canggih dalam React untuk menggunakan semula logik komponen. HOC sendiri bukan sebahagian daripada API React. Ia adalah corak yang muncul daripada sifat konsep React.

Apabila menggunakan rangka kerja react-redux dalam projek kami, terdapat konsep sambung Sambung di sini sebenarnya merupakan komponen tertib tinggi. Juga termasuk konsep yang serupa dengan denganRouter dalam react-router-dom

Membina hoc mudah

function hello (){
    console.log("hello i  love react ")
}
function hoc(fn){
    return ()=>{
          console.log("first");
          fn();
          console.log("end");
    }
}
hello = hoc(hello);
hello();

Kaedah untuk melaksanakan komponen tertib tinggi

Terdapat dua cara untuk melaksanakan komponen tertib tinggi:

• Proksi atribut. Komponen tertib lebih tinggi mengendalikan prop

• warisan terbalik melalui komponen React yang dibalut. Komponen tertib tinggi mewarisi daripada komponen React yang dibalut

Seterusnya kami akan menerangkan kedua-dua kaedah ini masing-masing.

Proksi atribut

Proksi atribut ialah kaedah pelaksanaan komponen tertib tinggi biasa dalam tindak balas kami, kami akan menggambarkannya melalui contoh:

import React,{Component} from 'react';
const MyContainer = (WraooedComponent) => 
    class extends Component {
        render(){
            return <WrappedComponent {...this.props} />
        }
    }

Bahagian paling penting untuk dilihat di sini ialah kaedah pemaparan mengembalikan komponen React yang dihantar ke WrappedComponent. Dengan cara ini, kita boleh menghantar prop melalui komponen tertib lebih tinggi. Kaedah ini dipanggil proksi atribut.

Sememangnya, menjadi sangat mudah untuk kita menggunakan komponen tertib tinggi MyContainer:

import React,{Component} from 'react';
class MyComponent extends Component{
    //...
}
export default MyContainer(MyComponent);

Dengan cara ini, komponen boleh dipanggil sebagai parameter lapisan demi lapisan, dan yang asal komponen mempunyai Pengubahsuaian oleh komponen peringkat lebih tinggi. Semudah itu, mengekalkan pengkapsulan satu komponen sambil mengekalkan kemudahan penggunaan. Sudah tentu, kita juga boleh menggunakan penghias untuk menukar.

Apabila membina komponen tertib lebih tinggi menggunakan proksi hartanah, susunan panggilan berbeza daripada mixin. Proses melaksanakan kitaran hayat di atas adalah serupa dengan panggilan tindanan:

didmount ->HOC didmount ->(HOCs didmount)->(HOCs will unmount)->HOC will unmount -> unmount

Warisan terbalik

Cara lain untuk membina komponen tertib tinggi dipanggil warisan terbalik , Secara harfiah, ia mesti ada kaitan dengan warisan. Mari kita lihat juga pelaksanaan yang mudah.

const MyContainer = (WrappedComponent)=>{
    class extends WrappedComponent {
        render(){
            return super.render();
        }
    }
}

Sama seperti kod di atas. Komponen yang dikembalikan oleh komponen peringkat tinggi mewarisi daripada WrappedComponent. Oleh kerana WrappedComponent diwarisi secara pasif, semua panggilan akan diterbalikkan, yang juga merupakan asal kaedah ini.

Kaedah ini tidak sama dengan proksi atribut. Ia dilaksanakan dengan mewarisi WrappedComponent, dan kaedah boleh dipanggil secara berurutan melalui super. Kerana ia bergantung pada mekanisme pewarisan. Urutan panggilan HOC adalah sama seperti baris gilir.

didmount -> HOC didmount ->(HOCs didmount) -> will unmount ->HOC will unmount ->(HOCs will unmount)

Dalam kaedah pewarisan terbalik, komponen tertib tinggi boleh dirujuk menggunakan WrappedComponent, yang bermaksud ia boleh menggunakan keadaan dan prop WrappedComponent. Kitaran hayat dan kaedah render. Tetapi ia tidak menjamin bahawa pokok subkomponen yang lengkap dihuraikan. Ia mempunyai dua ciri utama, yang akan kita bincangkan di bawah.

Rampasan pemaparan

Rampasan pemaparan bermakna komponen peringkat lebih tinggi boleh mengawal proses pemaparan WrappedComponent dan menghasilkan pelbagai hasil. Dalam proses ini, kita boleh membaca, menambah, mengubah suai dan memadam prop dalam hasil output mana-mana elemen React, atau membaca atau mengubah suai pepohon elemen React, atau paparan bersyarat. Atau balut pepohon elemen dengan gaya

Keadaan kawalan

Komponen tertib lebih tinggi boleh membaca, mengubah suai atau memadamkan keadaan dalam contoh WrappedComponent dan tambahkannya jika perlu keadaan .

Penamaan komponen

Apabila membungkus komponen tertib lebih tinggi, kami kehilangan nama paparan bagi WrappedComponent asal, dan nama komponen ialah atribut penting yang memudahkan pembangunan dan penyahpepijatan.

Parameter komponen

Kadangkala, apabila kita memanggil komponen tertib lebih tinggi, kita perlu lulus dalam beberapa parameter, yang boleh dicapai dengan cara yang sangat mudah.

import React from 'react'
function HOCFactoryFactory(...params){
    return function HOCFactory(WrappedComponent){
        return class HOC extends Component{
            render(){
                return <WrappedComponent {...this.props} />
            }
        }
    }
}

Apabila anda menggunakannya, anda boleh menulis:

HOCFactoryFactory(params)(WrappedComponent)
//or
@HOCFactoryFactory(params)class WrappedComponent extends React.Component{}

Ini juga mengambil kesempatan daripada ciri-ciri pengaturcaraan berfungsi. Dapat dilihat bahawa dalam proses abstraksi React, bayang-bayangnya dapat dilihat di mana-mana.

Pembelajaran yang disyorkan: "tutorial video bertindak balas"

Atas ialah kandungan terperinci Apakah yang dimaksudkan dengan komponen tertib tinggi bertindak balas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!