该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

react后台管理

介绍

typeScript+react+antd 后台管理

使用说明

  1. npx create-react-app name --typescript
    · npx 可以避免全局安装
  2. npm start 启动项目

知识点整理

  • 本项目中的webpack文件被脚手架隐藏了,封装到了react-script包中

  • 开发依赖 babel-plugin-import 实现antd的按需加载 http-server/http-proxy-middleware协助搭建mock

  • config-overrides.js 为实现antd按需加载

  • React.FC 在函数的参数中隐含声明了children属性 定义静态属性会有提示

  • 函数组件

  • 类组件

  • 高阶组件

    不能接受组件默认的参数 已知存在的问题,做限制是变成可选的
  • Hooks 代替类组件、多个hooks互不影响避免嵌套地狱,开发效率高

    1. 什么是hook
         Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。Hook 不能在 class 组件中使用 —— 这使得你不使用 class 也能使用 React。
         React 16.8.0 是第一个支持 Hook 的版本。升级时,请注意更新所有的 package,包括 React DOM。 React Native 从 0.59 版本开始支持 Hook。
         hook的本质是javaScript函数
    
    1. State Hook
            useState类似于类组件中的this.setState
            import React, { useState } from 'react';
    
            function Example() {
            // 声明一个叫 “count” 的 state 变量。
            const [count, setCount] = useState(0);
    
            return (
                <div>
                <p>You clicked {count} times</p>
                <button onClick={() => setCount(count + 1)}>
                    Click me
                </button>
                </div>
            );
            }
        声明多个state变量
            function ExampleWithManyStates() {
                // 声明多个 state 变量!
                const [age, setAge] = useState(42);
                const [fruit, setFruit] = useState('banana');
                const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
                }
    
    1. Effect Hook(不容易理解)
        useEffect 就是一个 Effect Hook,给函数组件增加了操作副作用(数据获取、订阅或者手动修改过 DOM)的能力
        它类似于class组件中componentDidMount、componentDidUpdate、componentWillUnmount具有相同的用途,只不过合并成了一个API
        import React, { useState, useEffect } from 'react';
    
        function Example() {
        const [count, setCount] = useState(0);
    
        // 相当于 componentDidMount 和 componentDidUpdate:
        useEffect(() => {
            // 使用浏览器的 API 更新页面标题
            document.title = `You clicked ${count} times`;
        });
    
        return (
            <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
            </div>
        );
        }
    
    1. Hook使用规则
        hook本质是JavaScript函数,有两个规则:
            (1) 只能在函数最外层调用Hook。不要在循环、条件判断或子函数中调用
            (2) 只能在React的函数组件中调用Hook。不要在其他JavaScript函数中调用
    
    1. 自定义Hook

--- 未完待续 ---

空文件

简介

使用typeScript+react+antd 技术栈 的后台管理系统 展开 收起
JavaScript
取消

发行版

暂无发行版

贡献者

全部

近期动态

不能加载更多了
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化