react基础插件

2021-01-19 22:58:21 阅读：131 来源： 互联网

热加载

在项目的入口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
    }))
}

标签：插件,userId,app,基础,react,props,组件
来源： https://blog.csdn.net/m0_50950992/article/details/112847931

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9