React

工程架构

​ 搭环境 vue/cli create-react-app
​ 脚手架
​ 打包工具 webpack
​ 编译器 使用更新更高效的js/scss/jsx babel
​ 热更新HMR
​ ESLint
​ 本地服务器devServer，代理配置
​ 版本管理 git/svn
​ Node.js/npm

React安装配置

• 使用create-react-app脚手架生成react环境,或者使用webpack搭建

• create-react-app安装

  //安装
  npm install create-react-app -S
  //生成一个叫myApp的项目
  create-react-app myApp
  //
  

• 编辑webpack文件命令,将配置文件暴露出来. 命令npm run eject

项目架构

• 前端框架：react / react-dom
• 路由：react-router-dom
• 状态管理: mobx / mobx-react
• UI组件: ant-design / sass
• 前端后分离：axios

React组件

• 代码实例,创建第一个react组件

  import React, { Component } from 'react';
  //引入react component
  class A extends Component {
      //创建一个类
      render() {
          this.props.go()
          console.log("aaa",this.props);
          
          return (
              <div>
                  <h2>hello world</h2>
              </div>
          );
      }
  }
  //将组件抛出
  export default A
  

• 组件的引用

  import A from "A组件的路径"
  //将A组建放置在需要引入的位置
  <A></A>
  

JSX语法

• 什么是JSX

  React 使用 JSX 来替代常规的 JavaScript。JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。 元素是构成 React 应用的最小单位，JSX 就是用来声明 React 当中的元素

• jsx实例

  var myDivElement = <div className="foo" />;
  //将myDivElement渲染到root里面
  ReactDOM.render(myDivElement, document.getElementById('root'));
  

• JSX 中使用 JavaScript 表达式。

  • 表达式写在花括号 {} 中

  ReactDOM.render(
      <div>
          //表达式写在花括号中
        <h1>{1+1}</h1>
      </div>
      ,
      document.getElementById('example')
  );
  

  • JSX 中不能使用 if else 语句，但可以使用 conditional (三元运算)

  ReactDOM.render(
      <div>
        <h1>{i == 1 ? 'True!' : 'False'}</h1>
      </div>
      ,
      document.getElementById('example')
  );
  

  • JSX样式采用{{}}双大括号包裹

    <h1>style = {{myStyle}}</h1>
    

  • jsx注释

    ​ {/注释…/}

  • JSX 允许在模板中插入数组，数组会自动展开所有成员

    var arr = [
      <h1>hello</h1>,
      <h2>hello 2</h2>,
    ];
    ReactDOM.render(
      <div>{arr}</div>,
        //会将arr中标签渲染到页面中
      document.getElementById('example')
    );
    

React中，跨组件的数据解决方案

• 事件通信
• 状态提升
• Context上下文
• 状态管理工具：
• mobx mobx-react (Provider)
• redux react-redux

Mobx安装

npm install mobx -S
npm install mobx-react -S

使用两个 Babel 插件，支持ES6装饰器语法

npm install @babel/plugin-proposal-decorators -D
npm install @babel/plugin-proposal-class-properties -D

在 .babelrc 中配置如下

{
  "presets": ["@babel/preset-react"],
  "plugins": [
    ["@babel/plugin-proposal-decorators", {"legacy": true}],
    ["@babel/plugin-proposal-class-properties",{"loose": true}]
  ]
}

Store: 数据共享:

• 在store/order.js 编写
  调取接口
  然后抛出;
  index.js模块进行组装封装调用，然后抛出
  用App.js接收;
  在App.js里被 <Provider store={store}></Provider>包括在内的组件都可以用inject注入，
  observer把组件变为可被观察者操作注入的store的数据;

高阶组件

• 实例

  import React from 'react'
  // 入参是组件 返回也是组件
  function hocPlace(Component){
      return class hocPlace extends React.Component{
          render(){
              let newProps = {
                  name:"zhh",
                  go(){
                      console.log("高阶组件");
                  }
              }
              return (
                  <div>
                  <h1>高阶组件</h1>
                  <Component {...newProps }></Component>
                  </div>
              )
              }
      }
  }
  //抛出hocPlace
  export default hocPlace
  
  

• 说明

  (参数为组件，返回值为修饰完成的组件)
  在一个文件里面写一个函数，然后再其他的组件里面引入这个高阶组件，然后把组件当成一个参数引入高阶组 件函数,就可以对该组件进行修饰了。
  所谓的高阶组件函数就是定义一个公共的方法，谁需要它就直接引入进行修饰就行了，然后这个组件就在原来的基础上多出了高阶组件里面有的东西了。
  列：

  • import 引入高阶组件
    方法一: @hocplace(高阶组件)
    、、、
    export default B(该组件)
    方法二: 、、、
    export default hocplace(A)
    //A为要修饰的组件

React注意事项

最好每一个页面创建一个文件夹,里面放各个组件，然后每个文件夹里创建一个index.js文件进行整合，
然后再引入App.js文件里面去、一个页面写一个style.scss文件，这样修改页面起来就比较方便
一般只在src文件夹里面操作
创建一个公共的assets文件夹用来写一些全局的样式

时间工具Moment

• 使用及方法

  • 安装 ower install moment --save # bower

  • 常用方法

    moment().format("YYYY-MM-DD HH:mm:ss"); //当前时间
    moment().subtract(10, "days").format("YYYY-MM-DD"); //当前时间的前10天时间
    moment().subtract(1, "years").format("YYYY-MM-DD"); //当前时间的前1年时间
    moment().subtract(-1, "years").format("YYYY-MM-DD"); //当前时间的后1年时间
    moment().subtract(3, "months").format("YYYY-MM-DD"); //当前时间的前3个月时间
    moment().subtract(1, "weeks").format("YYYY-MM-DD"); //当前时间的前一个星期时间