重慶分公司
重慶分公司，新征程啟航
為企業(yè)提供網(wǎng)站建設(shè)、域名注冊(cè)、服務(wù)器等服務(wù)
react中使用hook有哪些好處
今天小編給大家分享一下react中使用hook有哪些好處的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。
創(chuàng)新互聯(lián)成都網(wǎng)站建設(shè)按需開(kāi)發(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)程序開(kāi)發(fā)等。成都網(wǎng)站營(yíng)銷推廣熱線：13518219792
react中使用hook的好處：1、簡(jiǎn)化邏輯復(fù)用，能更容易復(fù)用代碼，Hook讓開(kāi)發(fā)者可以在無(wú)需修改組件結(jié)構(gòu)的情況下復(fù)用狀態(tài)邏輯；2、Hook能夠讓針對(duì)同一個(gè)業(yè)務(wù)邏輯的代碼聚合在一塊，讓業(yè)務(wù)邏輯清晰地隔離開(kāi)，讓代碼更加容易理解和維護(hù)。
本教程操作環(huán)境：Windows7系統(tǒng)、react17.0.1版、Dell G3電腦。
Hook是React 16.8新增的特性，專門(mén)用在函數(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 讓我們可以在無(wú)需修改組件結(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 每個(gè)table都要寫(xiě)一些這種邏輯，那還有啥時(shí)間去摸魚(yú)。這些高度類似的邏輯，可以通過(guò)封裝一個(gè)高階組件來(lái)抽象它們。這個(gè)高階組件自帶這些狀態(tài)，并可以自動(dòng)調(diào)用server去獲取remote data。
用高階組件來(lái)實(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 如果用hooks來(lái)實(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 (
相對(duì)比高階組件“祖父=>父=>子”的層層嵌套，
hooks是這樣的：
const { brother1 } = usehook1;
const { brother2} = usehook2;
*/可以看到，hooks的邏輯更清晰，可讀性更好。
2. 讓復(fù)雜組件更易理解
在 class 組件中，同一個(gè)業(yè)務(wù)邏輯的代碼分散在組件的不同生命周期函數(shù)中，而 Hooks 能夠讓針對(duì)同一個(gè)業(yè)務(wù)邏輯的代碼聚合在一塊，讓業(yè)務(wù)邏輯清晰地隔離開(kāi)，讓代碼更加容易理解和維護(hù)。
以上就是“react中使用hook有哪些好處”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
文章名稱：react中使用hook有哪些好處
文章鏈接：http://www.xueling.net.cn/article/jcspde.html