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!