使用react实现后台管理系统项目_react后台管理系统

一.开发React必须依赖三个库

    1.react：包含react所必须的核心代码

    2.react-dom：react渲染在不同平台所需要的核心代码

    3.babel：将jsx转换成React代码的工具

二.React的依赖引入

    1.方式一：直接CDN引入

    2.方式二：下载后，添加本地依赖

        1).在html中引入
            a.react.js
            b.react-dom.js
            c.babel.min.js

    3.方式三：通过npm管理（后续脚手架再使用）

三.定义组件化

1.react有两种方式定义组件

    1）.采用class类来实现

    2）.采用hook（函数）的方式来实现（定义组件首字母要大写，必须要继承React.Component）

    3）.函数组件（function）

2.setState内部会做两件事情: 1.将state中的值改掉 2.自动执行render函数渲染页面

3.输出und，原因使用babel来去编译的话，意味着在严格模式下编译，那么在严格模式下得函数内部this指向und，

所以this也是指向und

4.组件化方法

    1）.编写React的script代码中，必须添加 type="text/babel"，作用是可以让babel解析jsx的语法

    2）.使用ReactDOM.createRoot创建一个根节点用变量接收，把内容渲染到root上

        const root = ReactDOM.createRoot(document.querySelector('#root'))

    3）.定义组件

        const App

    4）.要渲染的根组件

        root.render(<App />)

    5）.然后再定义class类（定义的组件名必须要大写），继承React.Component

        class App extends React.Component {}

    6）.接着步骤5，里面有一个构造函数（子类继承父类）相当于data在构造函数中的state属性，this.state = {定义的数据}

        constructor（）{super() this.state = {msg: 'Hello World'}}

    7）.接着步骤6，render是渲染函数，相当于vue中的template（模板）
        render() {
                return (
                        <div>
                            <h1>{this.state.msg}</h1>
                        </div>
                )
            }

this.setState 来更新数据S

四.react项目文件认识

1.node_modules所有的依赖

2.src代码区域

    a.根组件

    b.index.js运行项目的主入口

3.package.json包管理文件

五.JSX（语法糖）

    1.JSX的使用

        1）.当变量是Number ，String，Array类型时，可以直接显示。

        2）.当变量是null，undefined，boolean时，内容为空。

            若希望显示，则需要转成字符串；

            转换方式：toString，和“”空字符串拼接，String(变量)等方式；

        3）.对象类型不能作为子元素(not valid as a React child)

    2.规范

         1) 需要使用（）包含，代表一个整体

               2) jsx只能有一个根节点

                3) 可以使用单标签和双标签，单标签需要/结束

    3.jsx绑定属性

         1）.绑定普通的属性，直接使用{}绑定
                        <a href={herfs}>百度一下</a>

                2）.绑定class属性，需要使用className而不是用class来说声明，class被占用了
                        <p className='aa bb'>我是p标签里的孩子</p>

                3）.绑定动态样式
                        <p className={bool?'active aa bb':'aa bb'}>我是p标签里的孩子的孩子</p>

                4）.采用数组的方式绑定动态样式active，由于数组会默认以逗号连接, 因此绑定class属性需要调用join方法, 让它们以空格拼接 
                        <p className={clas.join('')}>我是p标签里的孩子的孩子的孩子</p>

            5）.绑定内联样式
                        <p style={ {fontSize:'50px',color:'chocolate'}}>啦啦</p>
                        <p style={obj}>扩扩</p>

六.React事件绑定
    1.在react应用中，事件名都是用小驼峰格式进行书写，例如onclick要改写成onClick

、七.react条件渲染

    1.if 语句:如果有数据就显示组件，如果没有数据就不显示任何内容。posts 为需要渲染的列表

    2.三元运算符

    3.&&运算符:如果条件为真，则逻辑 && 运算符之后的表达式将是输出。如果条件为假，React 会忽略并跳过表达式.

八.react列表渲染

方式一：react vite创建npm create vite@latest

方式二：react脚手架创建

1.安装脚手架工具

    npm install create-react-app -g

2.检测项目

    create-react-app --version

3.创建项目

    create-react-app 项目名称（不能大写）

4.运行命令 npm start

5.注意：如果npm的镜像换成国内的镜像的话，会报一个会话超时的错误，原因是react的依赖需要访问国外的网络，但是我们的
npm镜像是国内的，所以会出现超时的错误，需要把npm镜像换回国外的镜像
npm config set registry https://registry.npmjs.org，再重新创建项目

九.生命周期

1.componentDidMount（）挂载后，react向后台接口获取数据需要在此周期上运行

2.componentDidUpdate（）更新后，指数据发生了变化

3.componentWillUnmount（）卸载后

4.shouldComponentUpdate（）state数据更新前会触发，此生命周期是返回一个true或者是false如果是true代表允许更新state数据，
 false是取消更新

十.React组件间的通信

    1.父组件传子组件：父组件通过 属性=传递的值 的形式来传递给子组件数据；子组件通过 this.props 参数获取父组件传递过来的数据；

    2.子组件传递父组件：在vue中是通过自定义事件来完成的；在React中同样是通过props传递消息，只是让父组件给子组件传递一个回调函数，在子组件中调用这个函数即可；

    3.插槽用法:props接收父组件传递的数据,children可以拿到父组件传递过来的标签

        const {children}=this.props//我是插槽传值

    4.context为了解决多层父子组件传值的问题(非父子之间传值)

        1）创建js文件，文件里面创建context对象，且赋值

            a.引入react

                import React from ‘react’

            b.创建context对象，且可以进行赋值，赋值是以对象的形式赋值的

                const ThemeContext=React。createContext（{context：1}）

            c.暴露出去

                export default ThemeContext

        2）在主组件中使用，使用方式是当做组件来使用

            a.引入ThemeContext.js文件

            b.然后当做组件来使用

        3）在需要的组件中进行挂载

            a.引入需要使用的js文件

                import ThemeeContext from ‘.../’

            b.给当前的类组件添加contextType属性

                Child.contextType=ThemeContext

            c.可以在render函数中直接使用this.context{this.context.age}

十一.ref获取dom三种方式

步骤构造函数创建ref语法：this.myRef名字=React.createRef()

绑定到元素上：<a>{this.myRef名字}</a>

获取DOM元素：this.myRef.cu