当前位置:   article > 正文

使用react实现后台管理系统项目_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

声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop】
推荐阅读
相关标签
  

闽ICP备14008679号