react+ts

Redux Alita深度解析:从安装到实践与高级应用
本文详细介绍了如何在React应用中使用Redux-alita进行状态管理,包括安装步骤、组件内Hook的运用,以及配合react-router-dom的路由配置。还涵盖了TS类型和关键概念如useState、useEffect的实践。
  • redux-alita 的使用
    安装redux-alita: yarn add redux-alita 或者 npm i redux-alita

    import { AlitaProvider } from 'redux-alita';
    	<AlitaProvider>
    		 <App />
    	</AlitaProvider>
    

    组件中使用

    import { useAlita } from 'redux-alita';
    function App() {
        let [count = 0, setAlita] = useAlita('count', { light: true });
        return (
            <div>
                <a onClick={() => setAlita({ stateName: 'count', data: ++count })}>+</a>
                 <a onClick={() => setAlita({ stateName: 'count', data: --count })}></a>
                 <div>count:{count}</div>
            </div>
        )
    }
    
  • HOOK—useState、useEffect的使用
    useState 类似定义一个初始值
    const [collapsed, setCollapsed] = useState<boolean>(false);
    useEffect会在每次渲染后调用,包括第一次渲染的时候;我们可以给useEffect传第二个参数。用第二个参数来告诉 react只有当这个参数的值发生改变时才执行我们传的副作用函数;

    useEffect(() => {
        let user = umbrella.getLocalStorage('user');
        user && setAlita('auth', user);
        setAlita('responsive', { isMobile: checkIsMobile() });
        handleResize((isMobile: boolean) => setAlita('responsive', { isMobile }));
        openFNotification();
        fetchSmenu((smenus: any[]) => setAlita('smenus', smenus));
    }, [setAlita]);
    
  • react-router-dom路由
    react基本路由配置

    import React from 'react';
    import { HashRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
    import NotFound from './components/pages/NotFound';
    import Login from './components/pages/Login';
    import App from './App';
    
    export default () => (
        <Router>
            <Switch>
                <Route exact path="/" render={() => <Redirect to="/app/dashboard/index" push />} />
                <Route path="/app" component={App} />
                <Route path="/404" component={NotFound} />
                <Route path="/login" component={Login} />
                <Route component={NotFound} />
            </Switch>
        </Router>
    );
    
  • TS 类型
    布尔类型
    let status: boolean = true
    数字类型
    let num: number = 1
    字符串
    let name: string = 'u'
    数组
    let list: number[] = [1, 2, 3]
    let list: Array<number> = [1, 2, 3]
    Any (在编程阶段还不清楚类型的变量指定一个类型)
    let notSure: any = 4 ; notSure = "maybe a string instead";
    Void (void类型像是与any类型相反,它表示没有任何类型)

    function getPermits(): void => {
        alert("This is Permits")
    };
    

    Null 和 Undefined

    let u: undefined = undefined;
    let n: null = null;
    

    Never (never类型表示的是那些永不存在的值的类型)

    function error(message: string): never {
        throw new Error(message);
    }
    

    类型断言 (类型断言有两种形式 as语法 尖括号语法)
    this[action](targetKey as string);
    const [collapsed, setCollapsed] = useState<boolean>(false);

    泛型

    function getGeneric<T>(value:T):T{
    	return value
    } 
    getGeneric<string>('getGeneric')
    getGeneric<number>(1)
    
### 创建 React + TypeScript 项目的方法 要创建一个使用 React 和 TypeScript 的简单项目,有多种方式可以选择。以下是几种主流方法: #### 1. 使用 `create-react-app` 创建项目 这是官方推荐的方法,适合大多数开发者快速搭建 React + TypeScript 项目。现在创建项目时需要使用 `--template typescript` 参数来启用 TypeScript 支持。 运行以下命令: ```bash npx create-react-app my-app --template typescript ``` 这将创建一个名为 `my-app` 的项目,并自动配置好 TypeScript 支持[^2]。 #### 2. 使用 Vite 创建项目 Vite 是一个现代化的前端构建工具,其创建 React + TypeScript 项目的速度比 `create-react-app` 更快。 运行以下命令: ```bash npm create vite@latest my-app --template react-ts ``` 此命令将创建一个基于 Vite 的 React + TypeScript 项目[^4]。 #### 3. 手动配置 React + TypeScript + Webpack 项目 如果希望更深入地了解构建过程,可以手动配置项目。首先,安装 React 和 TypeScript 相关依赖: ```bash npm install --save react react-dom npm install --save-dev typescript @types/node @types/react @types/react-dom @types/jest ``` 接着,需要手动配置 Webpack 和 Babel 来支持 TypeScript 文件的打包和转译[^3]。 #### 4. 使用 Webpack 构建项目 如果使用 `create-react-app` 创建的项目,Webpack 已经默认集成,但默认配置是隐藏的。如果需要自定义 Webpack 配置,可以通过 `eject` 命令暴露配置文件,或者使用第三方工具如 `react-scripts` 来扩展配置[^1]。 --- ### 示例代码:一个简单的 React + TypeScript 组件 以下是一个简单的 React + TypeScript 组件示例: ```tsx import React from 'react'; interface HelloProps { name: string; } const Hello: React.FC<HelloProps> = ({ name }) => { return <h1>Hello, {name}!</h1>; }; export default Hello; ``` --- ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值