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中文網其他相關文章！
