UI框架使用 react

最新推荐文章于 2025-06-11 16:09:49 发布

晕fufufu

最新推荐文章于 2025-06-11 16:09:49 发布

阅读量382

点赞数

CC 4.0 BY-SA版权

分类专栏： react 文章标签： react.js ui javascript

本文链接：https://blog.csdn.net/Paolooo/article/details/125194005

react 专栏收录该内容

7 篇文章

订阅专栏

本文详细解析了如何在项目中有效地使用React框架进行UI开发，涵盖了组件化设计、状态管理和渲染原理等关键点，旨在帮助开发者提升React UI构建的效率和质量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 react ui框架
      1 and design   适用pc页面构建
        1 安装and design
        npm i antd --save-dev
        2 在index.js 引入css样式文件
        import 'antd/dist/antd.css'
        3 在需要使用组件的文件中 引入对应的组件模板  然后可以直接使用组件标签
        import {Button} from 'antd'

        <Button></Button>

      2 and design pro  适用pc页面构建 （中后台项目开发）  若依
        1 使用yarn npm 安装项目
        npm i create-umi 项目名
        yarn crete umi 项目名
        2 进入项目 并且安装依赖包
        cd 项目名 && npm i
        cd 项目名 && yarn
        3 运行项目
        npm run start
        yarn start

redux
      Redux 是 JavaScript 状态容器，提供可预测化的状态管理。
      存储state状态 进行统一管理

      核心
        action
          在action中我们可以触发reducer 返回对应的数据
        reducer
          是执行逻辑判断 通过action发送的type类型进行判断 然后return相关的数据值
          里边使用的是 典型的switch case语句
        store
          相当于一个仓库 里边可以存储state
          getState() 获取数据
          dispatch() 发送数据
          subscribe  添加侦听器 侦听state 进行dom结构的实时更新

      当前项目如果组件数量比较多的时候 才使用redux 进行组件间状态管理

      使用：
        1 安装 redux  react-redux
        npm i redux react-redux --save-dev
    
        2 创建store.js文件
        import { createStore } from 'redux'
        import 自定义变量名 from 'reducer相对路径'

        const store = createStore(自定义变量名)

        3 在需要发送数据的组件中触发dispatch方法 发送我们的数据到reducers里边
        import store from './store.js'

        function 方法名() {
          store.dispatch({
            type: 'reducer里边的type类型',
            payload: 要发送的数据
          })
        }

        4 在reducers里边执行 switch判断 
          function 自定义名字(state = 初始化数据, action) {
            switch (action.type) {
              case 条件1:
                return 返回的数据
              default:
                return 默认值
            }
          }

          在需要接受数据的组件中 使用 store.getState()获取数据

        如果当前项目中有多个reducer 我们可以使用combineReducers合并输出
        import {createStore, combineReducers} from 'redux'
        import 自定义变量名1 from 'reducer路径'
        import 自定义变量名2 from 'reducer路径'

        const reducer=combineReducers({
          自定义属性名1：自定义变量名1,
          自定义属性名2：自定义变量名2 
          ...
        })

        const store=createStore(reducer)

        在需要接受数据的地方使用 store.getState().自定义属性名1

        流程
          在发送数据的组件中 store.dispatch()发送到 reducers里边进行逻辑判断 得到返回值存储在store里边
          然后再需要组件中使用 store.getState()获取数据