随笔分类 - react
1
摘要：创建一个上下文对象 // my-context.js import { createContext } from 'react'; export default createContext(null); 注入到 根组件中，并传入值 value // app.tsx import { useState
阅读全文
摘要：一句话概括 memo、useMemo、useCallBack主要用于避免 React 组件的重复渲染，作为 性能优化 的一种手段，你可以根据场景合理的使用它们。 React组件的更新机制 在使用memo、useCallBack、useMemo前，我们需要先了解React组件的更新机制：React组件
阅读全文
摘要：学习成本和开发体验 Vue：Vue 它的设计理念就是“渐进式”，意思就是你学一点用一点 甚至可以 cdn 引入到 html 中使用。而且由于其简洁的 API 和文档，学习曲线相对较平缓，但是受限于模板语法限制 灵活性不如 react。 React：反观 react 它更倾向于你上来就使用 cli 创
阅读全文
摘要：前言 假设我自定义了一个组件 全局导入的 <myNewElement foo="123" /> 此时ts会报异常 react18 在react 19 之前，我们可以这么做 declare global { namespace JSX { interface IntrinsicElements { m
阅读全文
摘要：启动react项目的时候，一直给我推荐他家的开发工具： ‘Download the React DevTools for a better development experience: https://reactjs.org/link/react-devtools’ 以下代码可以隐藏这恶心的广告。
阅读全文
摘要：react 封装的渲染富文本的组件： RenderRtf.tsx import { useState, useEffect, useRef } from "react"; import parse from "html-react-parser"; import ReactDOM from "rea
阅读全文
摘要：新的开始 2023年3月17号 react官方文档正式更新，还顺带搬了个家，连网址都变了。 被嫌弃的CRA 不知道小伙伴有没有留意到了没：曾经官方推荐 创建项目的脚手架工具 create-react-app已经从新文档中删除了，反而推荐了 React 社区的其它几个知名框架来创建项目。 在 Beta
阅读全文
摘要：第一章：基础知识 1、hello world 一个简单的hello world <!DOCTYPE html> <html lang="en"> <body> <div id="container"></div> <script src="https://unpkg.com/react@16/umd
阅读全文
摘要：前言 以表单为主的页面（中后台）编写起来很是苦恼，涉及到大量表单状态维护和校验。 方案 但是这里有两个表单生成插件 start最多的： vue：http://www.form-create.com react：https://xrender.fun 教程 xrender https://blog.c
阅读全文
摘要：Toast组件 import ReactDomCli from 'react-dom/client'; import './style.css' import React from 'react'; const Toast = (props) => { return <div className='
阅读全文
摘要：前言 docusaurus是一款使用markdown编写手册文档的工具，同类竞品有vitePress (放弃不维护的vuepress吧) 目前来看，比后者多了10k个start。 docusaurus是基于react，而vitepress是基于vue的，使用什么取决于 看你技术栈或者要编写文档的内容
阅读全文
摘要：前言 其实两者是一个东西，只是叫法不通 而且显然这次是vue抄袭了react 为了对比，我举了两个例子，都用了一套数据 Mock.mock("/getStudent",options=>{ return Mock.mock({ "list|2":[{ id:()=>Random.guid(), na
阅读全文
摘要：下载项目通过脚手架，来初始化项目 npx react-native init AwesomeProject 当然，这个过程，在国内是巨慢无比的，所以我把项目传到了gitosc上，方便大家下载 git clone https://gitee.com/dshvv/rn_demo.git 安卓项目安装sd
阅读全文
摘要：简介 其实这不但单是个使用教程，同时我还做了idexdb的封装。 直接引用使用即可。 如果你不想理解库、表、记录的概念。 可以，因为我都默认给值了 你需要做的就是 indexdbHelper.saveOrUpdate({xx:xx}) // 即可存储数据 indexdbHelper.remove()
阅读全文
摘要：写的挺好，直接搬过来了，验证过，不是无脑搬运原文 & 参考 1.安装 craco/craco $ yarn add @craco/craco # OR $ npm install @craco/craco --save 2.修改 package.json 文件 "scripts": { // "st
阅读全文
摘要：1、build后部署会白屏出现白屏说明路径不对，类似于vue的basePathreact官方并没有给出明显的配置不过新版node的packge.json倒是支持一个homepage的属性如果设了此属性，那么文件资源应用路径将按照此属性的值，这对于前端的框架来说就很好用了 比如：比如我们用 creat
阅读全文
摘要：原因比如，我page要引入一个页面，那么引入起来就很麻烦。图片在src\assets\img\login\bg.jpg组件在src\pages\login\index.tsx引入代码如下： import React from 'react'; import style from './style.l
阅读全文
摘要：脚手架默认不支持lesscreate-react-app创建ts类型的react项目 // 全局安装脚手架工具 npm install -g create-react-app // 使用脚手架创建react项目 npx create-react-app demo --template typescr
阅读全文
摘要：父传子 子传父 存在孙辈的组件下层层传递要很多层，难道没有更好的解决方案了吗所以flux上场了，因为太复杂所以redux上场了。。然后为了提高性能PureRenderMixin跟着上场了。。再然后immutable.js也上场了。。。
阅读全文
1
