React共享单车后台管理系统开发(记录笔记1)——内容概述

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_34829447/article/details/81706831

本文基于React共享单车后台管理系统的开发进行学习记录,内含React生态系统的整体介绍及相关内容,最终成果物代码请参见最后一章。
项目整体架构
- 核心框架库:React16、Router4.0、Redux
- 中间件、插件:Axios、Map、Echarts、AntD
- 公共机制:菜单、权限、Header、Footer、ETable、EForm、Loading、Api…

1.React介绍

  • Facebook开源的一个JavaScript库
  • React结合生态库构成一个MV*框架(只关注视图View层+数据层Model)
  • React特点
    • Declarative(声明式编码)
    • Component-Based(组件化编码)
    • 高效的DOM Diff算法,最小化页面重绘
    • 单向数据流
  • 生态介绍
    • Vue生态:Vue+Vue-Router+Vuex+Axios+Babel+Webpack
    • React生态:React+React-Router-Redux+Axios+Babel+Webpack
  • 实现方式
    • 编程式实现(传统)
    • 需要以具体代码表达在哪里做什么,如何实现
    • 声明式实现(React)
    • 只需要声明在哪里做什么,而无需关心如何实现

2.React脚手架、Yarn介绍

  • 如何安装React脚手架(辅助工具,提升开发效率)

    • 安装命令
    npm install -g create-react-app //-g表示全局安装,create-react-app是官方提供的脚手架
    craete-react-app  my-app
    cd my-app
    npm start
    • 在脚手架创建的项目中可以看出没有webpack相关配置(这也就是脚手架的魅力),已经帮我们封装好了webpack的相关配置。如果相对webpack进行修改时,可以使用eject暴露配置。
  • 什么是Yarn,为什么要使用Yarn

    • Yarn是新一代包管理工具
    • 安装Yarn
    npm install -g yarn
    • Yarn与npm比较
    • 速度快
    • 安装版本统一、更安全
    • 更简洁的输出
    • 更好的语义化(错误提示、安装提示很简洁)
  • 如何使用Yarn

    • 使用命令
    yarn init //初始化项目
    yarn add 项目名 //添加包
    yarn remove 项目名 //移除包
    yarn/yarn install //安装当前项目所有依赖包
    yarn start //启动项目

3.React生命周期介绍

  • React生命周期有哪些

    • getDefaultProps
    • getInitialState
    • componentWillMount
    • render
    • componentDidMount
    • componentWillReceiveProps
    • shouldComponentUpdate
    • componentWillUpdate
    • componentDidUpdate
    • componentWillUnmount

    这里写图片描述

  • 示例代码及相关知识点内容

    • 知识点

      • 在jsx中,js语法使用一个括号{}去表示;style使用两个括号(原因:里面其实是一个对象)

      • 为组件绑定事件时,函数需要使用bind(this)绑定this为当前实例化对象;如果没有使用bind(this)则需要使用箭头函数方式声明函数,才可以使用其中的this。

      【注意:此处为JavaScript相关特性,详细原因请参见React事件处理函数必须使用bind(this)的原因

      • componentWillMount()常用于完成初始化内容

      • componentWillReceiveProps(newProps)中只要修改了父组件传递的props内容,则会调用此生命周期方法

      • shouldComponentUpdate()如果return false后面的生命周期方法将不继续走

    • 实例代码

    //Life.js
    import React from 'react';
    import Child from './Child';
    export default class Life extends React.Component{
        constructor(props){
            super(props);
            this.state = {
                count:4
            };
        }
        render(){
            var style = {
                padding:'10px',
                color:'red',
                fontSize:'30px'
            }
            return (
                <div style={style}>{/*注意js语法使用一个括号{}去表示,style使用两个括号,原因里面其实是一个对象*/}
                    <p>React生命周期介绍</p>
                    <button onClick={this.handleAdd}>无bind点击一下</button>
                    <button onClick={this.handleClick.bind(this)}>有bind点击一下</button>
                    <p>{this.state.count}</p>
                    <Child name={this.state.count}></Child>
                </div>
            )
        }
        handleAdd = ()=> {
            this.setState({
                count:5
            })
        }
        //如果调用时有使用bind(this),原因是由于this的指向不同,jsx中的this指向的是组件的实例。而直接functionName(){...}声明的函数,其中this指向的是window对象。故需要使用bind(this)改变函数中的this指向。
        handleClick(){
            this.setState({
                count:6
            })
        }
    }
    
    //Child.js
    import React from 'react';
    export default class Child extends React.Component{
        constructor(props){
            super(props); 
        }
        componentWillMount(){//完成初始化内容
            console.log('will mount')
        }
        componentDidMount(){
            console.log('did mount')
        }
        componentWillReceiveProps(newProps){//只要修改了传递的props内容,则会调用此生命周期方法
            console.log('will receive props'+newProps.name)
        }
        shouldComponentUpdate(){
            console.log('should update');
            return true;//如果return false后面的生命周期方法将不继续走
        }
        componentWillUpdate(){
            console.log('will update')
        }
        componentDidUpdate(){
            console.log('did update')
        }
        render(){
            return(
                <div>
                    <p>这是里子组件,测试子组件的生命周期</p>
                    <p>{this.props.name}</p>
                </div>
            )
        }
    }
    • 页面显示内容

这里写图片描述

展开阅读全文

没有更多推荐了,返回首页