react基础插件

热加载

在项目的入口index.js文件中最后面写上一段代码

if(module.hot) {
	module.hot.accept()
}

类组件和函数组件

1.函数组件

函数组件没有this，没有生命周期。
快捷创建rfc
通过函数的参数来接受props。

2.类组件

快捷创建rcc
必须有render方法，返回我们的DOM内容，同时需要继承react.component,成为一个组件。
内组件有默认属性。this.props，里面包含了关于路由的一些参数。
this问题，通常在绑定事件时，我们会添加一个bind(this),来将this指向我们定义的组件，这样，我们在定义该方法时，就可以直接正常书写函数function。
组件库包含的内容
react 库
react-dom 组件内容
react-dom.render 组件的render方法。

事件传值

默认最后一个参数为事件对象，如果用户传值，则按顺序接受传值

react中属性传值的校验规则

1.安装属性类型检查插件： cnpm i -S prop-types
2.使用方法

//类组件，在类里面书写
// 静态变量，不需要实例化就可以直接使用
static propTypes = {
    // userId : propTypes.array  //会报错
    userId: propTypes.string.isRequired       //定义属性类型,并且必传
}
static defaultProps = {
        userName: '默认名字'  //默认属性值
    }

//函数组件  写在函数方法外面
import React from 'react'
import PropTypes from 'prop-types'
export default function Node(props) {
    return (
        <div>
            <span>{props.userId}</span>
            <p>{props.userName}</p>
        </div>
    )
}
Node.propTypes = {
    userId: PropTypes.string
}
Node.defaultProps = {
    userName: 'ugly.wu'
}

样式书写

1.在jsx对象中使用style属性进行书写

//里面的大括号是一个对象，属性名使用驼峰命名
<span style={{backgroundColor: 'red'}}>{props.userId}</span>
//或者
export default function Node(props) {
   const style = {color: 'red', marginTop: '20px',fontSize: 40}
   return (
       <div>
           <span style={style}>{props.userId}</span>
           <p>{props.userName}</p>
       </div>
   )
}

2.使用classNames插件来给定样式名
cnpm i -S classnames

//如果使用react自带的className，如果有多个变量，只会加载最后一个变量,所以可以通过带空格的字符串来书写多个类名
<p className="title-cls active disable">{props.userName}</p>

import classnames from 'classnames'
//就可以实现统一管理，并且以对象的形式书写
  const title = classnames({
       "title": true,
       active: active,
       disable: !active 
   })
   return (
       <div>
           {/* <span style={style}>{props.userId}</span>
           <p className={"title-cls active disable"}>{props.userName}</p> */}
           <p className={title}>hello word!</p>
       </div>
   )

less样式预处理器

在react的webPack中，已经集成了sass样式预计sass样式的预处理器，如果使用sass来书写样式，可以不用安装sass已经sass-loader
less
安装插件
cnpm i -D react-app-rewired less less-loader customize-cra
react-app-rewired ：重新加载，覆盖webpack的配置，

//在我们的package.json同级目录下，新建一个文件： config-overrides.js，文件名必须为这个。
//在该文件中，引入自定义脚手架配置项插件，使用overrider方法，导出对象，再把对应的库加载到这个方法里面去，更改了脚手架的基本配置。
const { override,addLessLoader } = require('customize-cra')
module.exports = override(
    addLessLoader()
)
//修改启动项 package.json中
 "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build"
  }

虚拟DOM

在react中，虚拟Dom节点，使用createElement（type, props，children）方法 三个参数必传，不能不传

我们的render方法最终都会转换为createElement方法

createElement(
	'div',//标签
	{},//属性
	“这里是div标签内容”,
	createElement(   //从第三个参数开始，同级排列的参数都为div标签的子元素
        'p',//标签
        {},//属性
        “这里是p标签内容”, //从第三个参数开始，同级排列的参数都为p标签的子元素
	)
	“这里是div标签的第二个内容”
)

配置请求代理

安装服务器代理插件
cnpm i -D http-proxy-middleware

//：配置setupProxy文件，在src路径下进行一个setupProxy.js文件，默认导出一个函数对象，这个函数有一个入参，为我们的express实例对象，通过这个对象，使用插件，引入我们的http-proxy-middleware库，然后使用createProxyMiddleware方法。
这里注意：app.use（），可以传入一个插件，或者定义一个插件，（定义一个插件第一个参数为，变量名，第二个参数为，处理内容）
//多服务器代理
const { createProxyMiddleware } = require('http-proxy-middleware')
module.exports = app => {
    app.use('/apis',createProxyMiddleware({
        target: 'http://www.shuiyue:12300',
        pathRewrite: {'/apis': ''},
        changeOrigin: true
    })),
    app.use('/market',createProxyMiddleware({
        target: 'http://www.shuiyue.info:12600',
        pathRewrite: {'/market': ''},
        changeOrigin: true
    }))
}