随笔分类 - react
摘要：react-rnd 是一个React 组件库，可以提供一个可调整大小与可拖拽的组件。 一、安装 使用 npm npm i -S react-rnd 使用 yarn yarn add react-rnd 二、使用方法 基本用法 <Rnd default={{ x: 0, y: 0, width: 32
阅读全文
摘要：##react-json-view ###react-json-view示例 // import the react-json-view component import ReactJson from 'react-json-view' // use the component in your ap
阅读全文
摘要：#拖动属性dropToGap,dropPosition ##属性解释： dropToGap： boolean类型，true代表拖拽到节点之间的缝隙中，false代表拖拽到节点上，即节点的内容区。 dropPosition： 拖拽的时候，针对一个节点有三种情况，即拖拽到节点之上，拖拽到节点上，拖拽到节
阅读全文
摘要：immer基础介绍 github主页 https://github.com/immerjs/immer 文档 https://immerjs.github.io/immer ##为什么immer让人眼前一亮 immer是一个简单易用的immutable结构生成库，在react的生态里，需要通过imm
阅读全文
摘要：#setTimeout、useEffect执行顺序 ##情况1： const App = () => { const [count, setCount] = useState(0) const [total, setTotal] = useState(0) const sayVar = useCal
阅读全文
摘要：##前言 之前在 React Hook 相关内容 中跟大家提过诸如 useCallback、useMemo 等钩子，其实他与原来 Class 组件时用的 React.PureComponent、shouldComponentUpdate、React.memo 都是密切相关的。 本篇我们就从 useC
阅读全文
摘要：##一、React.memo() ####1、React.memo 的使用方式 React.memo() 文档地址：链接 在 class component 时代，为了性能优化我们经常使用 PureComponent，每次对props 进行一次浅比较。当然，除了 PureComponent 外， 我
阅读全文
摘要：##useReducer介绍 useState 的替代方案，它更适合一些逻辑较复杂且包含多个子值，或者下一个 state 依赖于之前的 state 等的特定场景 类似 Redux 中的功能 reducer。 它接收一个形如 (state, action) => newState 的reducer，并
阅读全文
摘要：##useCallback介绍 useCallback 可以说是 useMemo 的语法糖，能用 useCallback 实现，都可以用 useMemo，常用语 react 的性能优化。 在 react 中我们经常面临一个子组件渲染优化的问题，尤其是在向子组件传递函数 props 时，每次 rend
阅读全文
摘要：##useMemo介绍 useMemo用于性能优化，通过记忆值来避免在每个渲染上执行高开销的计算。 const memoizedValue = useMemo(callbanck, array) 返回一个memoized 值 callback是一个函数用于处理逻辑 array 控制 useMemo
阅读全文
摘要：useContext介绍 接收一个 context 对象（React.createContext 的返回值）并返回该 context 的当前值。当前的 context 值由上层组件中距离当前组件最近的 <MyContext.Provider> 的 value prop 决定。 当组件上层最近的 <M
阅读全文
摘要：React的Ref功能 1.String Ref String Ref是个过时的API。因为String类型的Ref存在一些问题，将在未来的某个版本中被遗弃，不建议使用。 使用方式：this.refs.XXX获取DOM元素节点： 获取普通标签： import React, { Component }
阅读全文
摘要：react hooks 是 React 16.8 的新增特性。 它可以让我们在函数组件中使用 state 、生命周期以及其他 react特性，而不仅限于 class 组件。react hooks 的出现，标示着 react中不会在存在无状态组件了，只有类组件和函数组件。具体可查看官网。 优势： 函数
阅读全文
摘要：一、useReducer 与 useState useReducer 可以传给子组件个 dispatch 函数，子组件可以通过传递不同的 action，来达到不一样的处理（比如加 1 或 减 1），而用 useState 就要定义多个并且传递多个 二、为什么 useState 返回的是个数组，而不是
阅读全文
摘要：最近需要开发一个webApp，在 vue 和 react 之间犹豫很久，考虑到项目的小程序应用是基于 Taro 开发的，但是由于前期开发没有考虑转 H5 的需求，导致现在项目过于庞大，转 H5 需要大量的时间和精力处理兼容性问题。考虑到语法上的相似型（方便复制粘贴代码），所以还是选择搭建 一个 Re
阅读全文
摘要：.ant-tabs-ink-bar { background-color: transparent !important; } .ant-tabs-top .ant-tabs-ink-bar-animated:before { content: " "; background: url(~@/ass
阅读全文
摘要：在一些复杂的场景，需要多个组件共同工作，这样就需要使用mbox这些组件来完成。 mobx在mobx6之后，刷新界面需要设置makeObservable(this);这个函数，这样当数据刷新后，组件的界面才能刷新。下面我们直接上代码： store/index.js的代码： import app fro
阅读全文
摘要：创建仓库还是和之前一样，在 store/index.js 中 import { observable } from "mobx"; class store { @observable a = "1154545"; @observable count = 1; @action setCount = (
阅读全文
摘要：jsonp只能解决GET类型的ajax请求跨域问题 jsonp请求不是ajax请求，而是一般的get请求 基本原理 浏览器端： 动态生成<script>来请求后台接口(src就是接口的url) 定义好用于接受响应数据的函数(fn),并将函数名通过请求参数提交给后台(如：callback=fn) 服务
阅读全文
摘要：下载依赖包axios npm i axios -d //在packge.json内配置proxy，配置请求基础路径 "proxy":"http://localhost:5000" 最基本的axios异步请求 /api/ajax.js /* 能发送异步ajax请求的函数模块 封装 axios库 函数的
阅读全文
浙公网安备 33010602011771号