Chad97的博客

Monorepo: 是指单一代码库那既然有 单一代码库与之对应的就是即：MultiReposMicroService： 微服务架构Monorepo LinkMonorepo 不是一个新的东西，在软件开发行业它已经存在很久了，许多开源项目已经成功使用了单一代码库 👇🏻Larave：一个用于Web开发的PHP框架。Babel：一个用户Web开发的流行的JavaScript编译器，其单一代码库包含了完整的项目及其所有插件。React、Ember、Meteor 等前端框架都使用单一代码库。可见性（Visibi..

记-react-connect中使用forwardRef 问题。最近在dvajs中使用onRef的过程中，需要给 绑定connect 的组件 透传 forwardRef类似这样的形式：import React, { forwardRef, useImperativeHandle, useState, useEffect } from 'react';import { connect } from 'dva'const C2 = forwardRef((props, ref) => {

缘起在这个 find a job 地狱难度的时间，整理一份 React 核心指南，共勉之目录结构文章目录缘起目录结构壹、Contextfor example贰、Refs & DOMfor example叁、Refs转发 forwardRef肆、 Fragments伍、高阶组件（HOC）for example注意事项除了导出组件，另一个可行的方案是再额外导出这个静态方法。陆、Por...

最近 antd 更新到v4 到大版本了, 顺手更新了一波 记于此此次 antdv4 更新 细则就不谈，可移步官网查看几个注意点：IE 最低支持版本为 IE 11React 最低支持版本为 React 16.9，部分组件开始使用 hooks 进行重构升级项目 React 16.12.0 以上Start upgrading更新依赖包上面也说了，此次更新版本较新 我索性...

缘起在使用 npx create-react-app xx-app 的时候创建项目后没有scr 文件夹,看了一下package.json也不对然后顺势检查来一下 nodejs npm yarn 什么的都是正常的, 非常疑惑，然后去github 翻了翻问题原因是因为官方已经弃用了独立安装包 create-react-app 这个 cli 脚手架，如果没有及时卸载 就会出现这个问题。解决卸...

缘起我原先是使用的hexo的，这里我们从hexo ==> Gatsby的原因如下：都是静态页面框架，SEO，部署等，静态页面的优势使用现代化框架开发 —— React ，可以不断的迭代社区资源成熟，目前Gatsby的插件已经非常成熟 链接性能强悍，相比其他的静态页面框架，Gatsby的性能比较出众GraphQL 来请求数据， 灵活 优雅，待会介绍install安装全...

Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案。ReactDOM.createPortal(child, container)第一个参数（child）是任何可渲染的 React 子元素，例如一个元素，字符串或 fragment。第二个参数（container）是一个 DOM 元素。简单粗暴 小栗子????const Toast:React.FC = (p...

@本文章作者 Ruoduan.cn 转载请注明出处缘起公司中台系统要新增公司项目 —— IM即时聊天 的后台管理，由本人全程负责，前端技术选型 想采用目前比较新比较hot的技术 —— reactHook + react-Router5 + Typescript + （mobx | useContext + useState）,至于括号内的稍后解答，个人觉得可以一定程度上替代 mo...

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=%...

缘起起来原是当我在另外一台电脑 clone 项目 develop 时，报错如下：Taro TypeError: (0 , _index.genCompid)比较坑，在终端并没有报错，而是在小程序Tool 的 console 报错 Taro TypeError: (0 , _index.genCompid)原因是：Taro-Cli 的版本和项目的Taro 版本不一致我这里是使用...

Reason在我们对我们的react项目进行打包上线的时候可能我们的文件夹 build 并不是在更不了下，这样的情况就好出现服务器访问 index 找不到static 下面的资源，仔细看我们会发现访问路径变成了根文件例如：www.test/build/static/cs.css# 变成www.test/static/cs.css因为我们的webpack 默认以项目为根目录ho...

缘起做个记录npm run eject 保留配置文件找到webpack.config.js样式文件正则表达式// style files regexesconst cssRegex = /\.css$/;const cssModuleRegex = /\.module\.css$/;const sassRegex = /\.(scss|sass|less)$/;con...

Suspense，lazy 是 React 16.x 的新特性 话不多说让我们开始吧在你的应用中引入代码分割的最佳方式是通过动态 import() 语法。注意:动态 import() 语法目前只是一个 ECMAScript (JavaScript) 提案， 而不是正式的语法标准。预计在不远的将来就会被正式接受。Webpack 解析到该语法时，它会自动地开始进行代码分割。如果你使用...

react 调用子（孙）组件方法在不是用redux的情况下，我们要使用子（孙）组件上的方法，或者属性调用子组件import React, {Component} from 'react';export default class Parent extends Component { render() { return( <div&...

小栗子：例如：我们的路由格式如下:let router = [ { path: '/', component: Rhome, exact: true, }, { path: '/user', component: User, routes: [ //嵌套路由 ...

Redux and React-redux 莞式教程（新手必看）为了方便使用者使用，这里就redux和react-redux 一并讲究使用了，会了react-redux，redux也就没问题了，只不过稍微封装了一下教程方式我们先讲理论，先明白 render、action、 store 、connect 、 dispatch 、{ mapStateToProps mapDispat...

你听过 React Fragments吗 ?React 中常见模式是为一个组件返回多个元素。为了包裹多个元素你肯定写过很多的 div 和 span，进行不必要的嵌套，无形中增加了浏览器的渲染压力。版本1515以前，render 函数的返回必须有一个根节点，否则报错，为满足这一原则我会使用一个没有任何样式的 div 包裹一下。import React from 'react';exp...

引子每个改进都是为了解决问题。现在我在开发中碰到了问题，我先描述下问题：我们现在做前后端完全分离的应用，前端写前端的，后端写后端的，他们通过API接口连接。前端同学心理路程：“后端同学接口写的好慢，我都没法调试了。”是不是有这个问题呢？一般我们怎么解决？第一种：自己这边随便造点数据，等后端接口写好了之后，再小修改,再调试。第二种：想想我们之前获得用户信息的dist/api/user...

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...

Mobx-basic(快速上手)莞式教程之前写过一篇redux的教程 可以参考redux的教程本篇讲通过通俗易懂的方式让你快速上手mobx 的基本使用，虽然已经可以满足大部分开发中的需求但是详细 请参考中文官方文档本篇配教程代码 https://github.com/Chad97/mobx-basic如果对想要快速入门的你有所帮助请给点个小小的start吧~概述本篇采用的是...

React中的状态提升概括来说,就是将多个组件需要共享的状态提升到它们最近的父组件上.在父组件上改变这个状态然后通过props分发给子组件.function BoilingVerdict(props) { if (props.celsius >= 100) { return <p>water boil</p>; } return <p&...

React 最棒的部分之一是引导我们思考如何构建一个应用。在这篇文档中，我们将会通过 React 构建一个可搜索的产品数据表格来更深刻地领会 React 哲学。本文参考官方文档文档链接从产品应用思考技术实现例如我们有这样一个设计稿json[ {category: "Sporting Goods", price: "$49.99", stocked: true, na...

React手动实现数据双向绑定和vue 相比 react 并没有提供向 v-model 这样的指令来实现文本框的数据流双向绑定，因为react的设计思路就是单向数据流，所以我们需要借助 onChange 和 setState 来实现一个双向的数据流实现思路大致如下：↓如这样一个 input&lt;input ref="txt" onChange={ (e)=&gt;this....