日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

一、基礎

俗話說的好：“授人以魚不如授人以漁”，今天我也不知道自己的是“魚”還是“漁”，就講述一下自己這幾天學習React語法的忐忑之路。

定制開發(fā)可以根據(jù)自己的需求進行定制，成都網(wǎng)站設計、網(wǎng)站建設、外貿網(wǎng)站建設構思過程中功能建設理應排到主要部位公司成都網(wǎng)站設計、網(wǎng)站建設、外貿網(wǎng)站建設的運用實際效果公司網(wǎng)站制作網(wǎng)站建立與制做的實際意義

看typescript中文文檔，然后總結了一波學習筆記。

總結完之后，發(fā)現(xiàn)ts里面有類型推斷的能力，很多在React這樣的框架項目上根本用不上呀!!!

開啟網(wǎng)上的瘋狂搜索功能，看看有沒有關于React這樣的文章，搜索了一下，確實有一些，講述有哪些React獨有的類型；

臥槽，難道我為了用Ts又要記這些新的API嗎?這不是坑爹嗎?

“柳暗花明又一村”，偶然的機會我點擊了一個函數(shù)Reducer,神奇的發(fā)生了跳轉，跳轉到index.d.ts；

這不就是聲明文件嗎?然后認真分析Reducer；

type Reducer = (prevState: S, action: A) => S;

這不就是個函數(shù)的類型別名嗎?其中兩個S和A分別是泛型，然后返回值是S，那如果這樣的話，我根本就不用記住很多這個類型了，當需要的時候直接點擊該函數(shù)，跳轉到對應的聲明文件然后仔細研讀一波就好了，哈哈，貌似就是這么回事。

【自己試了試，確實可以解決80%的問題】

不過為了提高開發(fā)效率，節(jié)省自己研究的成本，我還是寫出幾個常用的React中的ts語法，方便開發(fā)的時候套用。

二、 React中內置函數(shù)

React中內置函數(shù)由很多，我們就挑幾個常用的來學習一下。

2.1 React.FC< P >

React.FC<>是函數(shù)式組件在TypeScript使用的一個泛型，F(xiàn)C就是FunctionComponent的縮寫，事實上React.FC可以寫成React.FunctionComponent。

import React from 'react';

interface demo1PropsInterface {
    attr1: string,
    attr2 ?: string,
    attr3 ?: 'w' | 'ww' | 'ww'
};

// 函數(shù)組件，其也是類型別名
// type FC
 = FunctionComponent
;
// FunctionComponent是一個接口，里面包含其函數(shù)定義和對應返回的屬性
// interface FunctionComponent
 {
//      // 接口可以表示函數(shù)類型，通過給接口定義一個調用簽名實現(xiàn)
//      (props: PropsWithChildren
, context?: any): ReactElement | null;
//      propTypes?: WeakValidationMap
 | undefined;
//      contextTypes?: ValidationMap | undefined;
//      defaultProps?: Partial
 | undefined;
//      displayName?: string | undefined;
// }
const Demo1: React.FC = ({
    attr1,
    attr2,
    attr3
}) => {
    return (
        
hello demo1 {attr1}

    );
};

export default Demo1;

2.2 React.Component< P, S >

React.Component< P, S > 是定義class組件的一個泛型，第一個參數(shù)是props、第二個參數(shù)是state。

import React from "react";

// props的接口
interface demo2PropsInterface {
    props1: string
};

// state的接口
interface demo2StateInterface {
    state1: string
};

class Demo2 extends React.Component {
    constructor(props: demo2PropsInterface) {
        super(props);
        this.state = {
            state1: 'state1'
        }
    }

    render() {
        return (
            
{this.state.state1 + this.props.props1}

        );
    }
}

export default Demo2;

2.3 React.createContext、useContext、和useReducer中Ts使用

這三者經常一起使用，用來進行跨級組件間的數(shù)據(jù)傳輸，ts版如下所示：

• React.createContext

其會創(chuàng)建一個Context對象，當React渲染一個訂閱了這個Context對象的組件，這個組件會從組件樹中離自身最近的那個匹配的Provider中讀取到當前的context值。【注：只要當組件所處的樹沒有匹配到Provider時，其defaultValue參數(shù)參會生效】

const MyContext = React.createContext(defaultValue);

const Demo = () => {
  return (
      // 注：每個Context對象都會返回一個Provider React組件，它允許消費組件訂閱context的變化。
    
      // ……
    
  );
}

• useContext

接收一個 context 對象(React.createContext 的返回值)并返回該 context 的當前值。當前的 context 值由上層組件中距離當前組件最近的 的 value prop 決定。語法如下所示：「const value = useContext(MyContext);」

import React, {useContext} from "react";
const MyContext = React.createContext('');

const Demo3Child: React.FC<{}> = () => {
    const context = useContext(MyContext);
    return (
        

            {context}
        

    );
}

const Demo3: React.FC<{}> = () => {
    const [state, dispatch] = useReducer(reducer, initialState);

    return (
        
            
                
            
        
    );
};

• useReducer

useState的替代方案，接收一個形如(state, action) => newState的reducer，并返回當前state以及其配套的dispatch方法。語法如下所示：「const [state, dispatch] = useReducer(reducer, initialArg, init);」

import React, {useReducer, useContext} from "react";

interface stateInterface {
    count: number
};
interface actionInterface {
    type: string,
    data: {
        [propName: string]: any
    }
};

const initialState = {
    count: 0
};

// React.Reducer其實是類型別名，其實質上是type Reducer = (prevState: S, action: A) => S;
// 因為reducer是一個函數(shù)，其接受兩個泛型參數(shù)S和A，返回S類型
const reducer: React.Reducer = (state, action) => {
    const {type, data} = action;
    switch (type) {
        case 'increment': {
            return {
                ...state,
                count: state.count + data.count
            };
        }
        case 'decrement': {
            return {
                ...state,
                count: state.count - data.count
            };
        }
        default: {
            return state;
        }
    }
}

// React.createContext返回的是一個對象，對象接口用接口表示
// 傳入的為泛型參數(shù)，作為整個接口的一個參數(shù)
// interface Context {
//      Provider: Provider;
//      Consumer: Consumer;
//      displayName?: string | undefined;
// }
const MyContext: React.Context<{
    state: stateInterface,
    dispatch ?: React.Dispatch
}> = React.createContext({
    state: initialState
});

const Demo3Child: React.FC<{}> = () => {
    const {state, dispatch} = useContext(MyContext);
    const handleClick = () => {
        if (dispatch) {
            dispatch({
                type: 'increment',
                data: {
                    count: 10
                }
            })
        }
    };
    return (
        

            {state.count}
            增加
        

    );
}

const Demo3: React.FC<{}> = () => {
    const [state, dispatch] = useReducer(reducer, initialState);

    return (
        
            
        
    );
};

export default Demo3;

三、React中事件處理函數(shù)

React中的事件是我們在編碼中經常用的，例如onClick、onChange、onMouseMove等，那么應該如何用呢?

3.1 不帶event參數(shù)

當對應的事件處理函數(shù)不帶event參數(shù)時，這個時候用起來很簡單，如下所示：

const Test: React.FC<{}> = () => {
    const handleClick = () => {
        // 做一系列處理
    };
    return (
        

            按鈕
        

    );
};

3.2 帶event參數(shù)

老鐵們可以試試，當事件處理函數(shù)待event參數(shù)的時候，如果不做任何處理，鐵定報錯，此時就按照第一節(jié)的方法論來試一試：

• 帶上event參數(shù)，報錯；

const Test: React.FC<{}> = () => {
    // 報錯了，注意不要這么寫……
    const handleClick = event => {
        // 做一系列處理
        event.preventDefault();
    };
    return (
        

            按鈕
        

    );
};

• 點擊onClick參數(shù)，跳轉到index.d.ts文件；

// onClick是MouseEventHandler類型
onClick?: MouseEventHandler | undefined;

// 那MouseEventHandler又是啥？原來是個類型別名，泛型是Element類型
type MouseEventHandler = EventHandler>;

// 那么泛型Element又是什么呢？其是一個接口，通過繼承該接口實現(xiàn)了很多其它接口
interface Element { }
interface HTMLElement extends Element { }
interface HTMLButtonElement extends HTMLElement { }
interface HTMLInputElement extends HTMLElement { }
// ……

• 至此，就知道該位置應該怎么實現(xiàn)了；

const Test: React.FC<{}> = () => {
    const handleClick: React.MouseEventHandler = event => {
        // 做一系列處理
        event.preventDefault();
    };
    return (
        

            按鈕
        

    );
};

對于其它的事件一樣，按照上述三個步驟，就可以一篇搞定，不需要進行所謂的死記硬背。

四、普通函數(shù)

普通函數(shù)是通用的，但是還是在這個位置提一下。

• 一個具體類型的輸入輸出函數(shù)；

// 參數(shù)輸入為number類型，通過類型判斷直接知道輸出也為number
function testFun1 (count: number) {
    return count * 2;
}

• 一個不確定類型的輸入、輸出函數(shù)，但是輸入、輸出函數(shù)類型一致；

// 用泛型
function testFun2 (arg: T): T {
    return arg;
}

• async函數(shù)，返回的為Promise對象，可以使用then方法添加回調函數(shù)，Promise是一個泛型函數(shù)，T泛型變量用于確定then方法時接收的第一個回調函數(shù)的參數(shù)類型。

// 用接口
interface PResponse {
    result: T,
    status: string
};

// 除了用接口外，還可以用對象
// type PResponse = {
//      result: T,
//    status: string
// };

async function testFun3(): Promise> {
    return {
        status: 'success',
        result: 10
    }
}

當前題目：React+Ts，這樣學起來確實簡單?。?！
本文URL：http://www.5511xx.com/article/cddgcie.html