![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
文章平均质量分 94
$(薛定谔的喵)
这个作者很懒,什么都没留下…
展开
-
Monorepo[单一代码库] 与MicroService[微服务] 架构
Monorepo: 是指单一代码库那既然有 单一代码库与之对应的就是即:MultiReposMicroService: 微服务架构Monorepo LinkMonorepo 不是一个新的东西,在软件开发行业它已经存在很久了,许多开源项目已经成功使用了单一代码库 👇🏻Larave:一个用于Web开发的PHP框架。Babel:一个用户Web开发的流行的JavaScript编译器,其单一代码库包含了完整的项目及其所有插件。React、Ember、Meteor 等前端框架都使用单一代码库。可见性(Visibi..原创 2022-06-28 14:23:56 · 1794 阅读 · 0 评论 -
记-react-connect中使用forwardRef 问题。
记-react-connect中使用forwardRef 问题。最近在dvajs中使用onRef的过程中,需要给 绑定connect 的组件 透传 forwardRef类似这样的形式:import React, { forwardRef, useImperativeHandle, useState, useEffect } from 'react';import { connect } from 'dva'const C2 = forwardRef((props, ref) => {原创 2020-09-25 11:43:41 · 2505 阅读 · 2 评论 -
[助力job]React-mode[进阶] (React模式梳理 )
缘起在这个 find a job 地狱难度的时间,整理一份 React 核心指南,共勉之目录结构文章目录缘起目录结构壹、Contextfor example贰、Refs & DOMfor example叁、Refs转发 forwardRef肆、 Fragments伍、高阶组件(HOC)for example注意事项除了导出组件,另一个可行的方案是再额外导出这个静态方法。陆、Por...原创 2020-04-07 22:54:10 · 294 阅读 · 0 评论 -
antdv4 升级指北
最近 antd 更新到v4 到大版本了, 顺手更新了一波 记于此此次 antdv4 更新 细则就不谈,可移步官网查看几个注意点:IE 最低支持版本为 IE 11React 最低支持版本为 React 16.9,部分组件开始使用 hooks 进行重构升级项目 React 16.12.0 以上Start upgrading更新依赖包上面也说了,此次更新版本较新 我索性...原创 2020-03-06 18:53:12 · 1648 阅读 · 0 评论 -
create-react-app 没有[src] 文件夹(记一次问题)
缘起在使用 npx create-react-app xx-app 的时候创建项目后没有scr 文件夹,看了一下package.json也不对然后顺势检查来一下 nodejs npm yarn 什么的都是正常的, 非常疑惑,然后去github 翻了翻问题原因是因为官方已经弃用了独立安装包 create-react-app 这个 cli 脚手架,如果没有及时卸载 就会出现这个问题。解决卸...原创 2020-02-13 14:03:28 · 2896 阅读 · 2 评论 -
Gatsby精粹,面向未来的blog
缘起我原先是使用的hexo的,这里我们从hexo ==> Gatsby的原因如下:都是静态页面框架,SEO,部署等,静态页面的优势使用现代化框架开发 —— React ,可以不断的迭代社区资源成熟,目前Gatsby的插件已经非常成熟 链接性能强悍,相比其他的静态页面框架,Gatsby的性能比较出众GraphQL 来请求数据, 灵活 优雅,待会介绍install安装全...原创 2020-01-18 14:54:05 · 1071 阅读 · 0 评论 -
React 传送门 Portals
Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案。ReactDOM.createPortal(child, container)第一个参数(child)是任何可渲染的 React 子元素,例如一个元素,字符串或 fragment。第二个参数(container)是一个 DOM 元素。简单粗暴 小栗子????const Toast:React.FC = (p...原创 2019-12-23 23:01:23 · 844 阅读 · 0 评论 -
《reactHook+Typescript 从入门到实践》让这篇文章带你飞
@本文章作者 Ruoduan.cn 转载请注明出处缘起公司中台系统要新增公司项目 —— IM即时聊天 的后台管理,由本人全程负责,前端技术选型 想采用目前比较新比较hot的技术 —— reactHook + react-Router5 + Typescript + (mobx | useContext + useState),至于括号内的稍后解答,个人觉得可以一定程度上替代 mo...原创 2019-12-03 12:49:21 · 1723 阅读 · 0 评论 -
react-native(ios) 环境处理 boost 和 CocoaPods 和 最新版xcode, run-ios 报错error Could not find "iPhone X" s
boostact-native/scripts/ios-install-third-party.sh 查看官方版本下载依赖文件https://pan.baidu.com/s/1kVDUAZ9?errno=0&errmsg=Auth%20Login%20Sucess&&bduss=&ssnerror=0&traceid=#list/path=%...原创 2019-10-04 12:12:32 · 660 阅读 · 0 评论 -
Taro TypeError: (0 , _index.genCompid) is not a function 报错解决
缘起起来原是当我在另外一台电脑 clone 项目 develop 时,报错如下:Taro TypeError: (0 , _index.genCompid)比较坑,在终端并没有报错,而是在小程序Tool 的 console 报错 Taro TypeError: (0 , _index.genCompid)原因是:Taro-Cli 的版本和项目的Taro 版本不一致我这里是使用...原创 2019-08-31 23:21:10 · 1570 阅读 · 0 评论 -
解决create-react-app build 后静态资源文件夹(static)路径不对
Reason在我们对我们的react项目进行打包上线的时候可能我们的文件夹 build 并不是在更不了下,这样的情况就好出现服务器访问 index 找不到static 下面的资源,仔细看我们会发现访问路径变成了根文件例如:www.test/build/static/cs.css# 变成www.test/static/cs.css因为我们的webpack 默认以项目为根目录ho...原创 2019-08-07 10:30:23 · 12971 阅读 · 3 评论 -
最新create-react-app增加sass or less loader【和旧版略有不同】
缘起做个记录npm run eject 保留配置文件找到webpack.config.js样式文件正则表达式// style files regexesconst cssRegex = /\.css$/;const cssModuleRegex = /\.module\.css$/;const sassRegex = /\.(scss|sass|less)$/;con...原创 2019-08-08 11:01:31 · 778 阅读 · 0 评论 -
React 的未来,Suspense,lazy 异步加载组件[性能优化]
Suspense,lazy 是 React 16.x 的新特性 话不多说让我们开始吧在你的应用中引入代码分割的最佳方式是通过动态 import() 语法。注意:动态 import() 语法目前只是一个 ECMAScript (JavaScript) 提案, 而不是正式的语法标准。预计在不远的将来就会被正式接受。Webpack 解析到该语法时,它会自动地开始进行代码分割。如果你使用...原创 2019-07-17 13:36:13 · 1815 阅读 · 0 评论 -
react 调用子(孙)组件方法
react 调用子(孙)组件方法在不是用redux的情况下,我们要使用子(孙)组件上的方法,或者属性调用子组件import React, {Component} from 'react';export default class Parent extends Component { render() { return( <div&...原创 2019-03-12 04:40:33 · 1343 阅读 · 1 评论 -
React-router 嵌套路由传值(render和children)
小栗子:例如:我们的路由格式如下:let router = [ { path: '/', component: Rhome, exact: true, }, { path: '/user', component: User, routes: [ //嵌套路由 ...原创 2019-04-16 18:49:24 · 7293 阅读 · 0 评论 -
Redux and React-redux 莞式教程(新手必看)
Redux and React-redux 莞式教程(新手必看)为了方便使用者使用,这里就redux和react-redux 一并讲究使用了,会了react-redux,redux也就没问题了,只不过稍微封装了一下教程方式我们先讲理论,先明白 render、action、 store 、connect 、 dispatch 、{ mapStateToProps mapDispat...原创 2019-04-25 18:44:31 · 9075 阅读 · 0 评论 -
你听过 React Fragments吗 ?(拒绝嵌套过多的div)
你听过 React Fragments吗 ?React 中常见模式是为一个组件返回多个元素。为了包裹多个元素你肯定写过很多的 div 和 span,进行不必要的嵌套,无形中增加了浏览器的渲染压力。版本1515以前,render 函数的返回必须有一个根节点,否则报错,为满足这一原则我会使用一个没有任何样式的 div 包裹一下。import React from 'react';exp...原创 2019-05-09 15:16:36 · 534 阅读 · 0 评论 -
React中使用Mockjs进行接口数据模拟
引子每个改进都是为了解决问题。现在我在开发中碰到了问题,我先描述下问题:我们现在做前后端完全分离的应用,前端写前端的,后端写后端的,他们通过API接口连接。前端同学心理路程:“后端同学接口写的好慢,我都没法调试了。”是不是有这个问题呢?一般我们怎么解决?第一种:自己这边随便造点数据,等后端接口写好了之后,再小修改,再调试。第二种:想想我们之前获得用户信息的dist/api/user...原创 2019-05-13 16:34:29 · 16241 阅读 · 1 评论 -
React-Native 打包Android.APK
1. 生成签名秘钥keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000输入一些必要信息namepassword…1.1直接使用 Android studio 进行签名傻瓜式 next 不做赘述2、设置g...原创 2019-05-30 18:45:19 · 530 阅读 · 0 评论 -
Mobx-basic(快速上手)莞式教程
Mobx-basic(快速上手)莞式教程之前写过一篇redux的教程 可以参考redux的教程本篇讲通过通俗易懂的方式让你快速上手mobx 的基本使用,虽然已经可以满足大部分开发中的需求但是详细 请参考中文官方文档本篇配教程代码 https://github.com/Chad97/mobx-basic如果对想要快速入门的你有所帮助请给点个小小的start吧~概述本篇采用的是...原创 2019-06-26 10:49:38 · 6647 阅读 · 0 评论 -
React状态提升[日常搬砖]
React中的状态提升概括来说,就是将多个组件需要共享的状态提升到它们最近的父组件上.在父组件上改变这个状态然后通过props分发给子组件.function BoilingVerdict(props) { if (props.celsius >= 100) { return <p>water boil</p>; } return <p&...原创 2019-07-18 14:18:57 · 242 阅读 · 0 评论 -
React 设计哲学
React 最棒的部分之一是引导我们思考如何构建一个应用。在这篇文档中,我们将会通过 React 构建一个可搜索的产品数据表格来更深刻地领会 React 哲学。本文参考官方文档文档链接从产品应用思考技术实现例如我们有这样一个设计稿json[ {category: "Sporting Goods", price: "$49.99", stocked: true, na...原创 2019-07-18 15:15:16 · 351 阅读 · 0 评论 -
React实现数据双向绑定
React手动实现数据双向绑定和vue 相比 react 并没有提供向 v-model 这样的指令来实现文本框的数据流双向绑定,因为react的设计思路就是单向数据流,所以我们需要借助 onChange 和 setState 来实现一个双向的数据流实现思路大致如下:↓如这样一个 input<input ref="txt" onChange={ (e)=>this....原创 2019-03-03 19:24:23 · 14259 阅读 · 0 评论