react中使用hook的好處是什麼
- 青灯夜游原創
- 2022-03-22 16:23:194468瀏覽
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都要寫一些這種邏輯，那還有啥時間去摸魚。這些高度類似的邏輯，可以透過封裝一個高階元件來抽象化它們。這個高階元件自帶這些狀態，並且可以自動呼叫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 如果用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 (
相對比高階元件「祖父=> ;父=>子」的層層嵌套，
hooks是這樣的：
const { brother1 } = usehook1;
const { brother2} = usehook2;
*/可以看到，hooks的邏輯更清晰，可讀性更好。
2. 讓複雜元件更容易理解
在class 元件中，同一個業務邏輯的程式碼分散在元件的不同生命週期函數中，而Hooks 能夠讓同一個業務邏輯的程式碼聚合在一塊，讓業務邏輯清楚地隔離開，讓程式碼更容易理解和維護。
【相關推薦：Redis影片教學】
#以上是react中使用hook的好處是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！