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 能夠讓同一個業務邏輯的程式碼聚合在一塊，讓業務邏輯清楚地隔離開，讓程式碼更容易理解和維護。

【相關推薦：Redis影片教學】

#

以上是react中使用hook的好處是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！