react中使用hook有哪些好處

今天小編給大家分享一下react中使用hook有哪些好處的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

創(chuàng)新互聯(lián)成都網(wǎng)站建設(shè)按需開發(fā)，是成都營(yíng)銷推廣公司,為成都?jí)w彩繪提供網(wǎng)站建設(shè)服務(wù),有成熟的網(wǎng)站定制合作流程，提供網(wǎng)站定制設(shè)計(jì)服務(wù)：原型圖制作、網(wǎng)站創(chuàng)意設(shè)計(jì)、前端HTML5制作、后臺(tái)程序開發(fā)等。成都網(wǎng)站營(yíng)銷推廣熱線：13518219792

react中使用hook的好處：1、簡(jiǎn)化邏輯復(fù)用，能更容易復(fù)用代碼，Hook讓開發(fā)者可以在無需修改組件結(jié)構(gòu)的情況下復(fù)用狀態(tài)邏輯；2、Hook能夠讓針對(duì)同一個(gè)業(yè)務(wù)邏輯的代碼聚合在一塊，讓業(yè)務(wù)邏輯清晰地隔離開，讓代碼更加容易理解和維護(hù)。

本教程操作環(huán)境：Windows7系統(tǒng)、react17.0.1版、Dell G3電腦。

Hook是React 16.8新增的特性，專門用在函數(shù)式組件，它可以代替class組件中react的其他特性，是實(shí)際工作中要常用到的。

什么是 Hooks

Hooks 譯為鉤子，Hooks 就是在函數(shù)組件內(nèi)，負(fù)責(zé)鉤進(jìn)外部功能的函數(shù)。

React 提供了一些常用鉤子，React 也支持自定義鉤子，這些鉤子都是用于為函數(shù)引入外部功能。

當(dāng)我們?cè)诮M件中，需要引入外部功能時(shí)，就可以使用 React 提供的鉤子，或者自定義鉤子。

比如在組件內(nèi)引入可管理 state 的功能，就可以使用 useState 函數(shù)，下文會(huì)詳細(xì)介紹 useState 的用法。

為什么要用 Hooks（使用hook的好處）

使用 Hooks 有 2 大原因：

• 簡(jiǎn)化邏輯復(fù)用；

• 讓復(fù)雜組件更易理解。

1. 簡(jiǎn)化邏輯復(fù)用，能更容易復(fù)用代碼

在 Hooks 出現(xiàn)之前，React 必須借用高階組件、render props 等復(fù)雜的設(shè)計(jì)模式才能實(shí)現(xiàn)邏輯的復(fù)用，但是高階組件會(huì)產(chǎn)生冗余的組件節(jié)點(diǎn)，讓調(diào)試更加復(fù)雜。

Hooks 讓我們可以在無需修改組件結(jié)構(gòu)的情況下復(fù)用狀態(tài)邏輯。

舉個(gè)例子，經(jīng)常使用的antd-table，用的時(shí)候經(jīng)常需要維護(hù)一些狀態(tài) ，并在合適的時(shí)機(jī)去更改它們:

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}
 />
}

每個(gè)table都要寫一些這種邏輯，那還有啥時(shí)間去摸魚。這些高度類似的邏輯，可以通過封裝一個(gè)高階組件來抽象它們。這個(gè)高階組件自帶這些狀態(tài)，并可以自動(dòng)調(diào)用server去獲取remote data。

用高階組件來實(shí)現(xiàn)的話會(huì)是這樣：

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}
      />
    )
  }
}

如果用hooks來實(shí)現(xiàn)的話，會(huì)是：

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}
      />
    )
}
/*

相對(duì)比高階組件“祖父=>父=>子”的層層嵌套，

hooks是這樣的：

const { brother1 } = usehook1; 
const { brother2} = usehook2;
*/

可以看到，hooks的邏輯更清晰，可讀性更好。

2. 讓復(fù)雜組件更易理解

在 class 組件中，同一個(gè)業(yè)務(wù)邏輯的代碼分散在組件的不同生命周期函數(shù)中，而 Hooks 能夠讓針對(duì)同一個(gè)業(yè)務(wù)邏輯的代碼聚合在一塊，讓業(yè)務(wù)邏輯清晰地隔離開，讓代碼更加容易理解和維護(hù)。

以上就是“react中使用hook有哪些好處”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享題目：react中使用hook有哪些好處
網(wǎng)頁(yè)路徑：http://bm7419.com/article14/jcspde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁(yè)設(shè)計(jì)公司、微信公眾號(hào)、面包屑導(dǎo)航、自適應(yīng)網(wǎng)站、定制網(wǎng)站、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)