Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Apakah faedah menggunakan cangkuk sebagai tindak balas
Faedah menggunakan cangkuk dalam tindak balas: 1. Permudahkan penggunaan semula logik dan memudahkan penggunaan semula kod membolehkan pembangun menggunakan semula logik keadaan tanpa mengubah struktur komponen 2. Cangkuk membenarkan Kod untuk logik perniagaan yang sama diagregatkan bersama untuk memisahkan logik perniagaan dengan jelas dan menjadikan kod lebih mudah difahami dan diselenggara.
Persekitaran pengendalian tutorial ini: sistem Windows 7, bertindak balas versi 17.0.1, komputer Dell G3.
Cangkuk ialah ciri baharu React 16.8 Ia digunakan khas dalam komponen berfungsi Ia boleh menggantikan ciri tindak balas lain dalam komponen kelas dan biasanya digunakan dalam kerja sebenar.
Apakah Cangkuk
Cangkuk diterjemahkan sebagai cangkuk ialah fungsi dalam komponen fungsi yang bertanggungjawab untuk menyambung ke fungsi luaran.
React menyediakan beberapa cangkuk biasa, dan React juga menyokong cangkuk tersuai ini digunakan untuk memperkenalkan fungsi luaran kepada fungsi.
Apabila kita perlu memperkenalkan fungsi luaran ke dalam komponen, kita boleh menggunakan cangkuk yang disediakan oleh React atau menyesuaikan cangkuk.
Sebagai contoh, jika anda memperkenalkan fungsi mengurus keadaan dalam komponen, anda boleh menggunakan fungsi useState Penggunaan useState akan diperkenalkan secara terperinci di bawah.
Mengapa menggunakan Cangkuk (faedah menggunakan cangkuk)
Terdapat 2 sebab utama untuk menggunakan Cangkuk:
Ringkaskan penggunaan semula logik;
Jadikan komponen kompleks lebih mudah difahami.
1 Permudahkan penggunaan semula logik dan memudahkan penggunaan semula kod
Sebelum Hooks muncul, React terpaksa meminjam komponen tertib tinggi dan menghasilkan Corak reka bentuk yang kompleks seperti prop boleh mencapai penggunaan semula logik, tetapi komponen tertib tinggi akan menjana nod komponen berlebihan, menjadikan penyahpepijatan lebih rumit.
Cangkuk membenarkan kami menggunakan semula logik keadaan tanpa mengubah suai struktur komponen.
Sebagai contoh, jadual antd yang kerap digunakan selalunya perlu mengekalkan beberapa keadaan dan mengubahnya pada masa yang betul:
componentDidMount(){ this.loadData(); } loadData = ()=>{ this.setState({ current: xxx, total: xxx, pageSize: xxx, dataSource: xxx[] }) } onTableChange = ()=>{ this.setState({ current: xxx, total: xxx, pageSize: xxx, }) } render(){ const {total,pageSize,current,dataSource} = this.state; return <Table dataSource={dataSource} pagination={{total,pageSize,current} onChange={this.onTableChange} /> }
Setiap jadual mesti ditulis Dengan logik jenis ini, apakah adakah masa untuk memancing? Logik yang sangat serupa ini boleh disarikan dengan merangkum komponen peringkat lebih tinggi. Komponen pesanan tinggi ini disertakan dengan keadaan ini dan boleh memanggil pelayan secara automatik untuk mendapatkan data jauh.
Jika ia dilaksanakan dengan komponen tertib tinggi, ia akan menjadi seperti ini:
import { Table } from 'antd' import server from './api' function useTable(server) { return function (WrappedComponent) { return class HighComponent extends React.Component { state = { tableProps: xxx, }; render() { const { tableProps } = this.state; return <WrappedComponent tableProps={tableProps} />; } }; }; } @useTable(server) class App extends Component{ render(){ const { tableProps } = this.props; return ( <Table columns={[...]} // tableProps包含pagination, onChange, dataSource等属性。 {...tableProps} /> ) } }
Jika ia dilaksanakan dengan cangkuk, ia akan menjadi:
import { Table } from 'antd' import server from './api' function useTable(server) { const [tableProps, setTableProps] = useState(xxx); return tableProps; } function App { const { tableProps } = useTable(); return ( <Table columns={[...]} // tableProps包含pagination, onChange, dataSource等属性 {...tableProps} /> ) } /*
Berbanding dengan komponen tertib tinggi "Atuk=>Ayah=>Anak" bersarang lapisan demi lapisan
cangkuk adalah seperti ini:
const { brother1 } = usehook1; const { brother2} = usehook2; */
Seperti yang anda lihat, mata kail. logik cangkuk lebih jelas dan lebih mudah dibaca.
2. Jadikan komponen kompleks lebih mudah difahami
Dalam komponen kelas, kod logik perniagaan yang sama bertaburan dalam fungsi kitaran hayat komponen yang berbeza dan Cangkuk boleh membuat Kod untuk logik perniagaan yang sama diagregatkan bersama untuk memisahkan logik perniagaan dengan jelas dan menjadikan kod lebih mudah difahami dan diselenggara.
[Cadangan berkaitan: Tutorial video Redis]
Atas ialah kandungan terperinci Apakah faedah menggunakan cangkuk sebagai tindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!