react
react笔记
Mosowe
vue(2/3),react,uniapp,小程序,javascript,typescript,node
展开
-
react: 动态设置ant-design/icons图标
antd 版本:V4@ant-design/icons 版本: V4在此版本中,icon的图标模式为标签形式,不像element那样可以通过改变class而改变icon的图标样式。在我使用umijs开发后端管理系统时候,需要用到动态的icon图标,系统配置的时候只会传递icon的标签名称,比如正常的图标标签为:<PlusCircleFilled />,系统存的是PlusCircleFilled string类型,我需要在页面上显示对应的图标。1.创建一个icon.ts文件,内容如下:i原创 2022-04-19 09:18:46 · 8069 阅读 · 2 评论 -
react的createContext及useContext 和 vue3的 provide 及 inject
这几个方法都是用于多层嵌套组件时,父组件向某个深层组件的传值,避免了props一层一层的传递。react createContext 和 useContext新建context.ts文件:import { createContext } from 'react'export const MyContext = createContext<any>(null)父组件:import {MyContext} from './context'import Child1 from './c原创 2022-04-08 16:31:51 · 2114 阅读 · 0 评论 -
react useRef和vue3的ref
在react中:function Home(props: any) { const dom = useRef(null) useEffect(() => { // useEffect是在浏览器渲染后执行的,此时可以拿到dom console.log(dom?.current) // <div class="Home">useRef</div> }, []) return ( <div className="Home" ref={原创 2022-04-08 15:15:56 · 1659 阅读 · 0 评论 -
react的useState 和 vue3的ref和reactive
react 的 useState使用useState声明一个响应式变量,返回一个 state,以及更新 state 的函数。const [state, setState] = useState(initialState);在初始渲染期间,返回的状态 (state) 与传入的第一个参数 (initialState) 值相同。setState 函数用于更新 state。它接收一个新的 state 值并将组件的一次重新渲染加入队列。setState(newState);更新方式普通更新:set原创 2022-04-08 14:48:19 · 2312 阅读 · 0 评论 -
react的useMemo 和 vue3的computed
react useMemo const total = useMemo(() => { return number * state }, [number, state])vue3 computedconst total = computed(() => { return number * state})两者都会根据number 和 state的改变而改变total,都是计算属性,都返回一个计算后的值。computed:可写计算属性const firstNam原创 2022-04-08 14:43:43 · 2297 阅读 · 0 评论 -
react的useEffect
react useEffectuseEffect类似vue中的watch侦听器,监听数据变化。会在浏览器绘制后延迟执行,但会保证在任何新的渲染前执行。useEffect常用的几种情况:1.只要页面更新就触发回调: useEffect(() => { // 搞事情 })2.只运行一次(组件挂载和卸载时执行),第二个参数传空数组[]: useEffect(() => { // 搞事情 },[])3.条件执行,第二个参数传值,可以是多个数据源的数组原创 2022-04-08 10:41:33 · 2392 阅读 · 0 评论 -
react 与 vue3 标签插入富文本方式
vue3在标签中显示富文本:<tempalte> <div v-html="richText"></div></tempalte><script setup lang="ts" name="test"> const richText = ref('<p style="color:#ff0000">测试</p>')</script>react中标签显示富文本:const test =原创 2022-04-08 10:39:11 · 727 阅读 · 0 评论 -
react:css样式穿透
假设我们有个index.tsx文件以及index.less样式文件index.less.rowSelectDisable{ .content{...}}index.tsx引入index.lessimport style from './index.less'index.tsx DOM<div className={style.rowSelectDisable}> <Detail></Detail> // 假设Detail组件里面有个类名:con原创 2021-10-21 16:49:37 · 11093 阅读 · 2 评论 -
基于vite搭建一个react移动端脚手架
基于移动端的配置。vite官网优点:光速启动热模块替换按需编译文章目录安装vite及react框架安装安装相关依赖启动打包环境变量路由安装使用页面创建路由配置router.ts路由权限校验配置routerConfig.tsx路由传参方式导航守卫- 离开前确认axios通信安装使用CSS及LESScssless安装less使用配置全局less变量浏览器前缀安装使用移动端单位换算安装使用[Ant Design Mobile](https://antd-mobile.gitee.io/)安装使原创 2021-10-18 16:20:03 · 2235 阅读 · 0 评论 -
react:父组件调用子组件方法
需要用到的几个关键字:useRef,useImperativeHandle,.current,forwardRef注意,如果直接在子组件上使用useRef,是拿不到想要的数据的。官网解释:refs 将不会透传下去。这是因为 ref 不是 prop 属性。就像 key一样,其被 React 进行了特殊处理。如果你对 HOC 添加 ref,该 ref 将引用最外层的容器组件,而不是被包裹的组件。我们可以使用 React.forwardRef API 明确地将 refs 转发到内部的 FancyButton原创 2021-09-23 14:49:07 · 1531 阅读 · 0 评论