react中使用hook有哪些好處

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

react中使用hook的好處：1、簡化邏輯復用，能更容易復用代碼，Hook讓開發者可以在無需修改組件結構的情況下復用狀態邏輯；2、Hook能夠讓針對同一個業務邏輯的代碼聚合在一塊，讓業務邏輯清晰地隔離開，讓代碼更加容易理解和維護。

本教程操作環境：Windows7系統、react17.0.1版、Dell G3電腦。

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

什么是 Hooks

Hooks 譯為鉤子，Hooks 就是在函數組件內，負責鉤進外部功能的函數。

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

當我們在組件中，需要引入外部功能時，就可以使用 React 提供的鉤子，或者自定義鉤子。

比如在組件內引入可管理 state 的功能，就可以使用 useState 函數，下文會詳細介紹 useState 的用法。

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

使用 Hooks 有 2 大原因：

• 簡化邏輯復用；

• 讓復雜組件更易理解。

1. 簡化邏輯復用，能更容易復用代碼

在 Hooks 出現之前，React 必須借用高階組件、render props 等復雜的設計模式才能實現邏輯的復用，但是高階組件會產生冗余的組件節點，讓調試更加復雜。

Hooks 讓我們可以在無需修改組件結構的情況下復用狀態邏輯。

舉個例子，經常使用的antd-table，用的時候經常需要維護一些狀態 ，并在合適的時機去更改它們:

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

每個table都要寫一些這種邏輯，那還有啥時間去摸魚。這些高度類似的邏輯，可以通過封裝一個高階組件來抽象它們。這個高階組件自帶這些狀態，并可以自動調用server去獲取remote data。

用高階組件來實現的話會是這樣：

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來實現的話，會是：

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

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

hooks是這樣的：

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

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

2. 讓復雜組件更易理解

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

以上就是“react中使用hook有哪些好處”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。