react
microcosm1994
这个作者很懒,什么都没留下…
展开
-
简单理解react hooks中的useMemo和useCallback使用
react组件重新渲染:1、组件内部state改变会重新渲染2、父组件传递的props发生变化会重新渲染3、父组件重新渲染useMemo使用场景:1、一个值需要大量计算,可以使用useMemo做一个缓存,只有在依赖项更新时才会重新计算2、一个组件只有在依赖项更新时才重新渲染,也可以使用useMemo在下面代码中点击age按钮,会打印“name更新了”,尽管name没有变化,但组件内部状态age改变也会导致组件全部重新渲染,包括Name组件。import React, { useMemo原创 2021-03-05 00:38:32 · 1694 阅读 · 1 评论 -
react项目打包部署map.js后缀文件过大解决办法以及cdn加速
减少map.js后缀文件体积在node_modules文件夹中找到react-scripts包/node_modules/react-scripts/config/webpack.config.prod.js找到sourceMap这个属性,把值改为false重新打包 new webpack.optimize.UglifyJsPlugin({ compress: { ...原创 2019-06-27 14:42:23 · 2075 阅读 · 0 评论 -
react本地配置域名启动
修改hosts127.0.0.1 localhost www.domin.com在webpack中加入域名路径:/node_modules/webpack-dev-server/lib/Server.js// always allow localhost host, for convienceif(hostname === "127.0.0.1" || hostname === "...原创 2019-06-22 15:40:12 · 4120 阅读 · 1 评论 -
react中使用antd得from表单组件
引用import {Form, Icon, Input, Button, Checkbox} from ‘antd’使用class Login extends Component{ constructor (props) { super(props) this.state = {} } // 提交信息 handleSubmi...原创 2019-06-25 12:31:47 · 2801 阅读 · 0 评论 -
react使用react-router-config
下载npm i react-router-config --save使用import { renderRoutes } from 'react-router-config'// App.js<div className="App"> <BrowserRouter> <Switch> {renderRoutes...原创 2019-06-25 12:25:59 · 9557 阅读 · 0 评论 -
react使用socket-client
下载nom i socket.io-client --save使用import io from 'socket.io-client'// 创建socket连接,http使用ws协议,https使用wss协议const socket = io('wss://www.dubo.world', { reconnectionAttempts: 10, query: ...原创 2019-06-25 12:03:25 · 5103 阅读 · 0 评论 -
react中引入大量图片
原文地址:React 引入大量本地图片const requireContext = require.context('../img', true, /^\.\/.*\.png$/)const images = requireContext.keys().map(requireContext)转载 2019-06-20 15:29:03 · 2200 阅读 · 0 评论 -
react控制子组件渲染
父组件import React, { Component } from 'react'import ChatWindow from "./chatWindow";class Home extends Component{ constructor (props) { super(props) this.state = { isr...原创 2019-06-05 17:32:30 · 2706 阅读 · 0 评论 -
react父组件调用子组件方法
实现父组件调用子组件方法:基本思路:父组件可以通过props把自己的函数方法传递给子组件调用,那么子组件通过这个函数把自己的组件实例传回给父组件,父组件只需要保存这些实例便可以调用子组件的方法父组件import React, { Component } from 'react'import {Layout } from 'antd'import Friends from './fri...原创 2019-06-05 17:23:26 · 17574 阅读 · 0 评论 -
react配置proxy出现报错:When specified, "proxy" in package.json must be a string. Instead, the type of "pro
原因可能是react-scripts版本太高,不支持,在package.json中查看react-scripts的版本号,把node_modules/react-scripts删除了,重新安装 :npm i react-scripts@1.1.1 --save原创 2019-05-09 10:54:06 · 5753 阅读 · 1 评论 -
react中实现数据双向绑定
vue实现双向数据绑定v-module就可以,但是react没有,我们使用event.target事件对象来更新react中的数据状态首先初始化状态this.state={"username":""}给输入框添加onChange事件<input type="text" onChange={this.handleChange} /><p>{this.s...原创 2018-07-11 21:53:44 · 10528 阅读 · 1 评论 -
在react中渲染html代码
有时候需要动态渲染后台传过来的html代码文本,但是react的JSX 防注入攻击使得大括号里的html代码全部变成字符串进行渲染,而不是html代码 例子:<div dangerouslySetInnerHTML={{__html: code}}></div>更多方式:function createMarkup() { return {__html: '...转载 2018-07-10 21:02:49 · 21250 阅读 · 0 评论 -
react设置反向代理
在React项目中package.json中配置在React项目中进行本地数据联调是有跨域问题的,我们需要自己配置反向代理。配置好之后我们就可以愉快的使用axios了,配置好切记一定要重新启动"proxy": { //配置项 "/api": {//我们可以在这里设置个口令 "target": "https://xxx.com/",//ta...原创 2018-07-02 20:41:43 · 10854 阅读 · 3 评论