編寫(xiě)一個(gè)高階組件

• 接受一個(gè) WrappedComponent 組件
• 返回一個(gè) HOC 的 withHeader 組件

import React, {Component} from 'react';

export default function withHeader(WrappedComponent) {

    return class HOC extends Component {
        render() {
            return <div>
                <div className=" header">我是標(biāo)題</div>
            </div>
        }
    }
}

高階組件也可以作為一個(gè)普通組件使用

@withHeader
export default class Demo extends Component {
    render() {
        return (
            <div>我是一個(gè)普通組件</div>
        );
    }
}

@withHeader 是 ES7 中的裝飾器語(yǔ)法残黑，相當(dāng)于下面的表達(dá)式

const EnhanceDemo = withHeader(Demo);

如果在某個(gè)組件中多次重復(fù)使用同一個(gè)高階組件，在調(diào)試時(shí)就會(huì)看到一大堆相同的高階組件斋否，可以在使用時(shí)保留高階組的原有名稱來(lái)區(qū)分梨水。

3.2 分類

高階組件的實(shí)現(xiàn)方式：屬性代理和反向繼承

• 屬性代理：通過(guò)返回包括原組件并添加額外功能來(lái)實(shí)現(xiàn)高階組件，最常見(jiàn)

const Container = (WrappedComponent) => class extends Components {
    render() {
        const newProps = {
            text: 'newText',
        }
        return <WrappedComponent> {...this.props} {...newProps} />
    }
}

• 反向繼承：通過(guò)返回繼承原組件來(lái)控制 render 函數(shù)茵臭，進(jìn)而實(shí)現(xiàn)高階組件疫诽。相對(duì)于屬性代理，反向繼承能訪問(wèn)到的區(qū)域和權(quán)限更多

const Container = (WrappedComponent) => class extends WrappedComponent {
    render() {
        return super.render();
    }

通過(guò)繼承 WrappedComponent旦委，可以使用 WrappedComponent 組件的 state奇徒、props、生命周期缨硝、render()等

3.3 命名與參數(shù)

displayName屬性：當(dāng)高階組件包裹普通組件時(shí)摩钙，普通組件的名稱和靜態(tài)方法都會(huì)丟失，為了避免這種情況妒牙，給普通組件添加標(biāo)組組件名稱的 displayName屬性

class HOC extends ...{
    static displayName = `HOC(${getDisplayName(WrappedComponent)})`;
}

// getDisplayName 方法
function getDisplayName(WrappedComponent) {
    return WrappedComponent.displayName ||
            WrappedComponent.name ||
            'Component';
}

柯里化：通過(guò)傳入不同的參數(shù)來(lái)得到不同的高階組件

function HOCFactoryFactory(...params) {
    // 通過(guò)改變 params 來(lái)顯示不同結(jié)果
    return class HOCFactory(WrappedComponent) {
        render() {
            return <WrappedComponent {...this.props} />
        }
    }
}

高階組件的缺點(diǎn)

可能會(huì)造成靜態(tài)方法丟失和 ref 屬性不能傳遞徒爹，所以在使用過(guò)程中需要遵循一下準(zhǔn)則

• 不要在組件的 render() 中使用高階組件，也盡量避免在組件的其他生命周期方法中使用高階組件
• 如果需要使用被包裝組件的靜態(tài)方法竣稽，那么必須手動(dòng)賦值靜態(tài)方法
• ref 應(yīng)避免傳遞給包裝組件

（四）組件通信

4.1 父子組件通信

父組件 --> 子組件

父組件通過(guò) props 將值傳遞給子組件

• 父組件傳值：params={this.state.params}

class Parent extends Component {
    state = {
        params: 'father send msg to child'
    };
    render() {
        return <Child params={this.state.params} />;
    }
}

• 子組件接收值：{this.props.params}

class Child extends Component { 
    render() {
        return <p>{this.props.params}</p>
    }
}

子組件 --> 父組件

• 回調(diào)函數(shù)【最常見(jiàn)】
• 自定義事件

回調(diào)函數(shù)方式：

1. 父組件將一個(gè)函數(shù)作為 props 傳遞給子組件长踊；
2. 組組件調(diào)用該回調(diào)函數(shù)便可以向父組件傳值功舀；

class Parent extends Component {
    constructor (props) {
        super(props);
        this.state = {
            params: 'child send msg to father'
        };
    }
    
    transMsg(types) {
        console.log(type);
    }
    
    render() {
        return <Child params={this.state.params} />;
    }
}

class Child extends Component {
    constructor(props) {
        super(props);
        console.log("params :", this.props.params);
        this.props.transMsg("hi, fathre");
    }
    
    render() {
        return <p>{this.state.params}</p>
    }
}

4.2 跨級(jí)組件通信

父組件與子組件的子組件或者是更深層的子組件進(jìn)行的通信。實(shí)現(xiàn)方式有兩種：

• 使用組件 props 逐層傳遞
• 使用 context 對(duì)象傳遞

使用組件 props 逐層傳遞 的缺點(diǎn)

• 每一層都需要傳遞 props
• 增加程序的復(fù)雜度
• 實(shí)際開(kāi)發(fā)中不建議使用

使用 context 對(duì)象傳遞

• 父組件需要聲明支持 context之斯，并提供一個(gè)函數(shù)來(lái)返回相應(yīng)的 context 對(duì)象
• 子組件聲明需要使用的 context 對(duì)象日杈，并提供需要使用的 context 屬性的 PropTypes

代碼

export default class GrandSon extends Component {
    // 子組件聲明自己需要使用的 context
    static contextTypes = {
        color : PropTypes.string,
    };
    static propTypes = {
        value : PropTypes.string,
    };

    render() {
        const { value } = this.props;
        return (
            <li style={{background: this.context.color}}>
                <span>{value}</span>
            </li>
        );
    }
}

export default class Father extends Component {
    // 聲明自己要使用的 context
    static fatherContextTypes = {
        color : PropTypes.string,
    };
    static propTypes = {
        name : PropTypes.string,
    };

    // 提供一個(gè)函數(shù), 用來(lái)返回 context 對(duì)象
    getFatherContext() {
        return {
            color : 'red',
        };
    }
    render () {
        const {list} = this.props;
        return (
            <div>
                <ul>
                    {
                        list.map((entry, index) =>
                            <GrandSon key={`list-${index}`} value={entry.text} />
                        )
                    }
                </ul>
            </div>
        );
    }
}

class GrandFather extends Component {
    render() {
        return(
            <div>
                <Father name='GrandFather'/>
            </div>
        );
    }
}

如果組件中使用了構(gòu)造函數(shù)，為了不影響跨級(jí)組件通信佑刷，還需要在構(gòu)造函數(shù)中傳入第二個(gè)參數(shù) context

constructor(props, context) {
    super(props, context);
}

context 的缺點(diǎn)

因?yàn)閏ontext可以代表任何東西莉擒，所以它的類型是無(wú)法確定的，所以在使用的過(guò)程中也是需要謹(jǐn)慎對(duì)待

【總結(jié)】在父子組件通信模型中

• 父組件 -> 子組件：使用變量
• 子組件 -> 父組件：父組件提供回調(diào)函數(shù)瘫絮，子組件調(diào)用回調(diào)函數(shù)

其實(shí)如果將回調(diào)函數(shù)也看成一個(gè)屬性涨冀，那么這兩個(gè)過(guò)程其實(shí)都是一樣的，都是子組件使用父組件提供的“屬性”（變量或回調(diào)函數(shù)）

4.3 非嵌套組件通信

沒(méi)有直接關(guān)系的兩個(gè)組件麦萤，例如兄弟組件（同一個(gè)父節(jié)點(diǎn)下的兩個(gè)節(jié)點(diǎn)）鹿鳖、完全不相干的兩個(gè)組件。

對(duì)于兄弟組件壮莹，也是不可以直接通信的翅帜，可以通過(guò)狀態(tài)提升來(lái)實(shí)現(xiàn)兄弟組件間的通信。提升狀態(tài)就是值通過(guò)父組件進(jìn)行中轉(zhuǎn)命满，但是當(dāng)層級(jí)較深時(shí)涝滴，中轉(zhuǎn)過(guò)程也會(huì)特別復(fù)雜，如何尋找公共父組件也是一個(gè)問(wèn)題胶台。

自定義事件

• 發(fā)布/訂閱模型
• 給事件對(duì)象上添加監(jiān)聽(tīng)器
• 通過(guò)觸發(fā)事件來(lái)實(shí)現(xiàn)組件之間的通信
• 在組件的 componentDidMount 中聲明自定義事件
• 在組件的 componentWillUnmount 中取消訂閱事件

安裝 events 模塊

通過(guò)自定義事件的方式來(lái)實(shí)現(xiàn)非嵌套組件間的通信歼疮，需要借助Node的events模塊，通過(guò)以下命令安裝 events 模塊

npm install events --save

然后在 src 目錄下創(chuàng)建一個(gè) events.js 文件

import { EventEmitter } from 'events';
export default new EventEmitter();

再創(chuàng)建一個(gè) ComponentA.js 文件

• 在組件ComponentA.js的 componentDidMount 中聲明自定義事件
• 在組件ComponentA.js的 componentWillUnmount 中取消訂閱事件

export default class ComponentA extends Component {
    constructor(props) {
        super(props);
        this.state = {
            message : 'ComponentA',
        };
    }

    // 聲明一個(gè)自定義事件
    componentDidMount() {
        this.eventEmitter = events.addListener('changeMessage', (message) => {
            this.setState ({
                message,
            });
        });
    }

    // 取消事件訂閱
    componentWillUnmount() {
        events.removeListener(this.eventEmitter);
    }

    render() {
        return (
            <div>
                {this.state.message}
            </div>
        );
    }
}

再創(chuàng)建一個(gè)組件ComponentB

• 添加一個(gè)點(diǎn)擊事件
• ComponentA 接收到 ComponentB 發(fā)過(guò)來(lái)的消息后诈唬，刷新界面

// 組件 ComponentB
export default class ComponentB extends Component {
    handleClick = (message) => {
        events.emit('changeMessage', message);
    };
    render() {
        return(
            <div>
                <button onClick={this.handleClick.bind(this, 'ComponentB')}>點(diǎn)擊發(fā)送信息</button>
            </div>
        );
    }
}

創(chuàng)建測(cè)試用例韩脏，模擬兩個(gè)非嵌套組件的通信

// 測(cè)試用例
export default class AppTest extends Component {
    render() {
        return (
            <div>
                <ComponentA />
                <ComponentB />
            </div>
        );
    }
}

【總結(jié)】原生通知了解下

• 組件 ComponentA 監(jiān)聽(tīng)通知
• 組件 ComponentB 發(fā)送通知

（五）事件處理

5.1 事件監(jiān)聽(tīng)與處理

React 事件 和 HTML 事件

• React 事件使用駝峰命名法，而非全部小寫(xiě)
• React中铸磅，可以傳遞一個(gè)函數(shù)作為事件的處理函數(shù)赡矢，而非一個(gè)簡(jiǎn)單的字符串

為按鈕添加一個(gè)事件

• 只需要給 React 元素添加 onClick、onKeyDown 函數(shù)即可

class demo extends Component {
    handleClick() {
        console.log('Click me')
    }

    render() {
        return(
            <button onClick={this.handleClick}>React 實(shí)戰(zhàn)</button>
        );
    }
}

事件攔截

HTML 中通過(guò) return false 來(lái)攔截事件

<a href="#" onclick="console.log('The link was clicked"); return false">
    Click me
</a>

React 使用虛擬DOM基礎(chǔ)上實(shí)現(xiàn)的合成事件 SyntheicEvent

• React 的時(shí)間處理程序接受的是 SyntheicEvent實(shí)例
• stopPrepagation()：阻止時(shí)間傳遞阅仔，目的是不讓事件分派到其他的 Document 節(jié)點(diǎn)济竹，但是默認(rèn)事件依然會(huì)執(zhí)行
• preventDefault()：通知瀏覽器不要執(zhí)行與事件關(guān)聯(lián)的默認(rèn)動(dòng)作，但事件依然會(huì)繼續(xù)傳遞霎槐。

function ActionLink() {
    function handleClick(e) {
        e.prevenDefault();
    }

    return (
        <a href="#" onClick={handleClick}>Click me</a>
    );
}

5.2 event 事件與 this 關(guān)鍵字

event 事件

1. React 在虛擬 DOM 的基礎(chǔ)上實(shí)現(xiàn)的一套合成事件
2. 處理監(jiān)聽(tīng)時(shí)送浊，需要傳入一個(gè) event 對(duì)象
3. 完全符合 W3C 標(biāo)準(zhǔn)，所以可以完全兼容瀏覽器丘跌，并擁有和瀏覽器一樣的事件接口

案例一：輸出按鈕的 innerHTML

class Demo extends Component {
    handleClick(e) {
        console.log(e.target.innerHTML)
    }

    render() {
        return(
            <button onClick={this.handleClick}>React 實(shí)戰(zhàn)</button>
        );
    }
}

函數(shù)與對(duì)象方法

先來(lái)看一個(gè)例子袭景，在上述方法中唁桩，如果輸出 this，this結(jié)果是 null 或者 undefined

handleClick(e) {
        console.log(this)   // `null` 或者 `undefined`
    }

原因： handleClick 是一個(gè)函數(shù)耸棒，并非是通過(guò)對(duì)象的方法調(diào)用的荒澡，而是直接的函數(shù)調(diào)用，所以在這個(gè)函數(shù)中与殃，就無(wú)法獲取到 this 所代表的類實(shí)例

解決辦法：將函數(shù)綁定到當(dāng)前實(shí)例上

render() {
        return(
            <button onClick={this.handleClick.bind(this)}>React 實(shí)戰(zhàn)</button>
        );
    }

bind方法

1. bind方式實(shí)現(xiàn)時(shí)間監(jiān)聽(tīng)非常常見(jiàn)单山；
2. bind是React在ES5引入的事件監(jiān)聽(tīng)機(jī)制；
3. bind格式：Function.prototype.bind()

bind原理

1. 當(dāng)調(diào)用函數(shù)對(duì)象的 bind() 方法時(shí)
2. 系統(tǒng)會(huì)重新創(chuàng)建一個(gè)函數(shù)幅疼，新函數(shù)的行為和原函數(shù)一樣
3. 因?yàn)樗麄兪怯芍付ǖ?this 和初始化參數(shù)構(gòu)造的原函數(shù)

bind傳參

• 格式：bind(this, arg1, arg2, ...)

function f() {
    return this.a;
}
var g = f.bind({a:"azertyp"});
console.log(g());   //azertyp
var h = g.bind({a:"yoo"});  // bind 只生效一次
console.log(h());   //azertyp

5.3 EventEmitter 在 React Native 中的應(yīng)用

EventEmitter 是用來(lái)處理原生和 React Native 之間通信的

iOS原生和 JavaScript 層交互關(guān)系表

• iOS 中使用 RCTEventEmitter
• Android 中使用 RCTDeviceEventEmitter

iOS 和 React Native 交互

iOS 中通過(guò) eventDispatcher 的 sendAppEventWithName 方法將消息傳遞個(gè) JavaScript

#import "CalendarManager.h"
#import "RCTEventDispatcher.h"

@implementation CalendarManager

@synchesize bridge=_bridge;

-(void)calendarEventReminderReceived:(NSNotification *)notification {
    NSString* eventName = notification.userInfo[@"name"];
    [self.bridge.eventDispatcher sendAppEventWithName"EventReminder" body:@{@"name" : eventName}];
}

@end

JavaScript 通過(guò) addListener 訂閱該事件米奸，注意保持 name 一致，iOS中發(fā)出來(lái)的name是 EventReminder爽篷，所以addListener監(jiān)聽(tīng)的也應(yīng)該是 EventReminder悴晰。

在事件使用完之后取消事件的訂閱，即在 conponentWillUnmount 聲明周期函數(shù)中取消事件的訂閱逐工。

import { NativeAppEventEmitter, NativeEventEmitter } from 'react-native';

var subscription = NativeEventEmitter.addListener(
    'EventReminder', (reminder) => console.log(reminder.name)
);
...
// 取消訂閱事件
conponentWillUnmount() {
    subscription.remove();
}

Android 和 React Native 交互

Android中铡溪，通過(guò) RCTDeviceEventEmitter 來(lái)注冊(cè)事件

getReactApplicationContext()
    .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
    .emit("EventReminder", null);

（六）React Hook

6.1 Hook 簡(jiǎn)介

1. React Hook 是為了解決 React 的狀態(tài)共享問(wèn)題；
2. 狀態(tài)共享也可以看成是邏輯復(fù)用的問(wèn)題泪喊；
3. 因?yàn)?React Hook 治共享數(shù)據(jù)處理邏輯棕硫，并不會(huì)共享數(shù)據(jù)本身；

在 React 應(yīng)用開(kāi)發(fā)中袒啼，狀態(tài)管理是組價(jià)你開(kāi)發(fā)必不可少的內(nèi)容哈扮。狀態(tài)管理的方式：

• 使用類組件
• 使用 redux 等狀態(tài)管理框架

案例【以前的做法】

class Example extends Component {
    constructor(props) {
        super(props);
        this.state = {
            count : 0
        };
    }    

    render() {
        return (
            <div>
                <p>You clicked {this.state.count} times</p>
                <button onClick={()=>this.state({ count: this.state.count+1 })}>Click me</button>
            </div>
        );
    }
}

案例【現(xiàn)在的做法】

• 使用 React Hook 提供的 State Hook 來(lái)處理狀態(tài)；
• 針對(duì)已經(jīng)存在的類組件瘤泪，也可以使用 State Hook 很好的進(jìn)行重構(gòu)；
• Example 變成了一個(gè)函數(shù)組件育八，有自己的狀態(tài)对途，還可以更新自己的狀態(tài)；
• useState函數(shù) 是 React 的一個(gè) hook 函數(shù)髓棋，它的作用是聲明狀態(tài)變量实檀。

function Hook() {
    const [count, setCount] = useState(0);
    return (
        <div>
            <p>You clicked {this.state.count} times</p>
            <button onClick={()=>this.state({ count: this.state.count+1 })}>Click me</button>
        </div>
    );
}

6.2 Hook API

Hook API 背景故事

1. 如何解決狀態(tài)組件的復(fù)用問(wèn)題？

一般都是通過(guò)自上而下傳遞的數(shù)據(jù)流來(lái)將大型的視圖拆分成獨(dú)立的可復(fù)用組件按声。但是在實(shí)際開(kāi)發(fā)中膳犹，如何復(fù)用一個(gè)帶有業(yè)務(wù)邏輯的組件讓讓是一個(gè)問(wèn)題。

2. 函數(shù)組件和類組件

前面介紹了他們的一些特性：函數(shù)組件缺少組件的 狀態(tài)签则、生命周期等特征须床，所以一直不受青睞

但是 Hool API 賦予了函數(shù)組件這些能力

React 提供了三個(gè)核心的 API

• State API：狀態(tài)API
• Effect API：聲明周期API
• Custom API：自定義API

useState 組件

用來(lái)定義和管理本地狀態(tài)

下面看一個(gè)計(jì)數(shù)器的小案例

• 函數(shù)組件的對(duì)象也可以是基礎(chǔ)類型值
• useState 返回的是一個(gè)數(shù)組，數(shù)組的第一個(gè)對(duì)象表示當(dāng)前狀態(tài)的值渐裂，第二個(gè)對(duì)象表示用于更改狀態(tài)的函數(shù)豺旬，類似于類組件的 setState

function App() {
    const [count, setCount] = useState(0);
    return (
        <div>
            <button onClick={ () => setCount(count+1)}>+</button>
            <span>{count}</span>
            <button onClick={ () => setCount(count-1)}>-</button>
        </div>
    )
}

export default App;

useState 的聲明方式

• 單次聲明多個(gè)對(duì)象

const [count, setCount] = useState({
    count1: 0,
    coutn2: 0
});

• 多次聲明多個(gè)對(duì)象

const [count1, setCount1] = useState(0);
const [count2, setCount2] = useState(0);

在實(shí)際使用中钠惩，多次聲明會(huì)更加方便，因?yàn)楦潞瘮?shù)采用的是替換而不是合并族阅。

如果要處理嵌套多層的數(shù)據(jù)邏輯篓跛，用 useState 就顯得力不從心了，需要使用 React 提供的 useReducer 來(lái)處理這類問(wèn)題

useReducer 的用法

import React, {useReducer} from 'react';

console reducer = function(state, action) {
    switch (action.type) {
        case "increment":   // 增加
            return {count: state.count+1};
        case "decrement":   // 減少
            return {count: state.count-1};
        default
            return {count: state.count};    
    }
};

function Example() {
    const [state, dispatch] = useReducer(reducer, {count:0});
    const {count} = state;
    return (
        <div>
            <button onClick={ () => dispatch({type: "increment"})}>+</button>
            <span>{count}</span>
            <button onClick={ () => dispatch({type: "decrement"})}>-</button>
        </div>
    );
}

export default Example;

• useReducer 接受 reducer 函數(shù)和默認(rèn)值兩個(gè)參數(shù)
• 返回當(dāng)前狀態(tài) state 和 dispatch 函數(shù)的數(shù)組
• 使用方式與 Redux 框架一致
• useReducer 沒(méi)有采用 Redux 方式設(shè)置默認(rèn)值坦刀，是因?yàn)镽eact認(rèn)為狀態(tài)的默認(rèn)值可能來(lái)自于函數(shù)組件的props

function Example({initialState = 0}) {
    const {state, dispatch} = useReducer(reducer, { count: initialState} );
    ...
}

Effct Hook 管理聲明周期

import React, {useState, useEffect} from 'react';


function Example() {
    const [count, setCount]= useState(0);

    useEffect( () => {
        console.log('componentDidMount...');
        console.log('componentDidUpdate...');
        return() => {
            console.log('componentWillUnmount...');
        }
    }
        
    );

    return (
        <div>
            <button onClick={ () => setCount(count+1)}>
                Click me
            </button>
        </div>
    );
}

export default Example;

每次點(diǎn)擊按鈕的時(shí)候愧沟，輸出的內(nèi)容為

componentDidMount...
componentDidUpdate...
componentWillUnmount...
componentDidMount...
componentDidUpdate...
...

• 每次執(zhí)行組件更新時(shí)，useEffect 中的回到函數(shù)都會(huì)被調(diào)用鲤遥；
• 在重新繪制前執(zhí)行銷毀操作沐寺，避免造成內(nèi)存泄漏；
• useEffect 可以被視為 componentDidMount, componentDidUpdate, componentWillUnmount 的數(shù)組渴频，并用它關(guān)聯(lián)函數(shù)組件的生命周期
• 類組件的 componentDidMount, componentDidUpdate 聲明周期函數(shù)都是在 DOM 更新后同步執(zhí)行的
• useEffect 不是同步執(zhí)行的芽丹，不會(huì)阻塞瀏覽器更新界面
• 需要模擬生命周期的同步執(zhí)行，可以使用 React 提供的 useLayoutEffect Hook

6.3 自定義 Hook

1. 自定義 Hook：函數(shù)名是以 use 開(kāi)頭的并調(diào)用其他 Hook 的封裝函數(shù)
2. 自定義 Hook 的每個(gè)狀態(tài)都是獨(dú)立的

使用 axios 實(shí)現(xiàn)一個(gè)自定義 Hook 的案例

import React, {useState, useEffect} from 'react';
import axios from 'axios';

export const useAxios = (url, dependecies) => {
    const [isLoading, setIsLoading] = useState(false);
    const [response, setReponse] = useState(null);
    const [error, setError] = useState(null);

    useEffect(() => {
        setIsLoading(true);
        axios.get(Url).then((res) => {
            setIsLoading(false);
            setReponse(res);
        }).catch((err) => {
            setIsLoading(false);
            setError(err);
        });
    }, dependecies);

    return [isLoading, response, error];
};

在 Example 中使用 axois 自定義 Hook 函數(shù)組件

import React, {useState, useEffect} from 'react';
import axios from 'axios';

export const useAxios = (url, dependecies) => {
    const [isLoading, setIsLoading] = useState(false);
    const [response, setReponse] = useState(null);
    const [error, setError] = useState(null);

    useEffect(() => {
        setIsLoading(true);
        axios.get(Url).then((res) => {
            setIsLoading(false);
            setReponse(res);
        }).catch((err) => {
            setIsLoading(false);
            setError(err);
        });
    }, dependecies);

    return [isLoading, response, error];
};

function Example() {
    let url = 'http://api.douban.com/v2/movie/in_theaters';
    const [isLoading, response, error] = useAxios(url, []);

    return (
        <div>
            {isLoading ? <div>Loading...</div> :
            (error ? <div> There is an error happned</div> : <div>Success {response}</div>
        }
        </div>
    );
}
 export default Example;

自定義 Hook 的優(yōu)勢(shì)

1. 簡(jiǎn)潔易讀
2. 不會(huì)引起組件嵌套的問(wèn)題

自定義 Hook 使用的注意事項(xiàng)

1. 不要在循環(huán)卜朗、條件或嵌套函數(shù)中使用 Hook拔第，并且只能在 React 函數(shù)的頂層使用 Hook，這是因?yàn)?React需要利用調(diào)用順序來(lái)正確更新相應(yīng)的狀態(tài)场钉，以及調(diào)用相應(yīng)的生命周期函數(shù)蚊俺。一旦在循環(huán)或條件分支語(yǔ)句中調(diào)用 Hook，就容易引起調(diào)用順序不一致,產(chǎn)生難以預(yù)料的后果
2. 只能在 React 函數(shù)式組件或自定義Hook中使用 Hook逛万。

eslint

避免在開(kāi)發(fā)中引起低級(jí)錯(cuò)誤,可以在項(xiàng)目中安裝一個(gè) eslint 插件

yarn add eslint-plugin-react-hooks --dev

然后在eslint的配置文件中添加如下配置:

{
    "plugins" : [
        // ...
        "react-hooks"
    ],
    "rules" : [
        // ...
        "react-hooks/rules-of-hooks" : "error",
        "react-hooks/exhaustive-deps" : "warn",
    ]
}

借助 React 提供的 Hook API泳猬，函數(shù)組件可以實(shí)現(xiàn)絕大部分類組件功能，并且 Hook 在共享狀態(tài)邏輯宇植、提高組件復(fù)用性上也有一定的優(yōu)勢(shì)得封。可以預(yù)見(jiàn)的是指郁，Hook將是 React 未來(lái)發(fā)展的重要方向忙上。