![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
文章平均质量分 67
无翼之雀
这个作者很懒,什么都没留下…
展开
-
antd pro(ProLayout) mix混合菜单不生效
一、问题描述antd pro的混合菜单模式,算是一种比较新的导航菜单模式,可以让顶部全局导航+侧边导航混合模式同时出现,满足一些特别的需求。ProLayout高级布局组件的API里有一个layout参数,可以设置layout的菜单模式,我们可以在config配置文件做配置。// layout的菜单模式。side:右侧导航,top:顶部导航,mix: 混合菜单layout: 'side' | 'top' | 'mix';那么问题来了,为什么我们把layout设置为mix后,界面的导航菜单看原创 2021-09-10 07:57:57 · 5001 阅读 · 3 评论 -
react函数式组件传值之子传父
在用react进行函数式编程时,父组件可以通过props向子组件传值,那么子组件怎么向父组件传值呢?首先,父组件需要向子组件传递一个函数,然后,子组件通过props获取函数并附上参数,最后,父组件通过函数拿到子组件传递的值。一、具体案例父组件:home.tsximport React, { useState } from 'react';import Child from './component/child';import './index.less';const Home: R原创 2021-08-10 11:07:32 · 24518 阅读 · 6 评论 -
react函数式组件传值之父传子
今天我们主要说下react函数式组件如何进行父组件向子组件传值。在开发过程中,为了提高可读性或者复用性,我们会进行组件的拆分。先说下,我们在引入子组件时,子组件的名字一定要大写,否则会报错(这是个babel编译机制问题)。那么,父组件在引入子组件后,如何传值呢?首先,父组件要将传递的参数写到子组件标签上,然后,子组件通过props接收父组件传过来的所有参数。具体看以下案例。一、具体案例案例主要实现一个简单的父组件Home向子组件Child传递count值,子组件通过props拿到此值并渲染出来.原创 2021-08-06 22:51:41 · 6708 阅读 · 0 评论 -
react hooks--useReducer用法
useReducer是useState的替代方案,我们可以用它来处理复杂逻辑的state。此外它还可以和useContxt结合实现Redux进行状态管理。基础用法:const [state, dispatch] = useReducer(reducer, initialState, initializer);state:状态变量;dispatch:用于触发reducer函数;reducer:reducer函数,该函数接受state和action两个参数......原创 2021-07-23 15:24:46 · 375 阅读 · 0 评论 -
react hooks--useRef用法
今天来讲一下useRef,我们可以通过它来获取组件实例对象或者DOM对象。除此外,我们还可以用它来进行定义变量,存放值等操作。下面我们来讲useRef最常用的操作,即访问DOM节点。useRef 返回一个可变的 ref 对象,对象里只有一个current属性,返回的 ref 对象在组件的整个生命周期内保持不变。原创 2021-07-12 22:48:58 · 4837 阅读 · 0 评论 -
react hooks--useCallback
useCallback类似于useMemo,一般用于做缓存并优化性能,但是需要提醒下大家,不要滥用(比如对一些简单的计算逻辑或许没必要使用它们),否则会适得其反。一、基础用法constmemoizedCallback=useCallback(()=>{doSomething(a,b);},[a,b])useCallback接受两个参数,第一个为回调函数,第二个参数是依赖的数组。我们会发现,useCallback和useMemo的用法很相似,但值得注意的是,u...原创 2021-07-06 16:41:02 · 1121 阅读 · 0 评论 -
react hooks--useMemo
在函数式组件开发过程中,我们会发现任何一个state值发生变化,组件都会重新渲染。当我们在一些特殊场景需要限定某个state值发生改变再进行渲染或者说项目越来越复杂需要进行渲染优化时,我们就会用到两个用于性能优化的hooks:useMemo和useCallback。今天我们先讲useMemo。一、基础用法constmemoizedValue=useMemo(()=>computeExpensiveValue(a,b),[a,b])useMemo接受两个参数,第一个为回...原创 2021-07-05 20:23:42 · 643 阅读 · 0 评论 -
react hooks--useContext
在开发过程中,什么时候用到useContext呢?当我们需要跨组件层级进行数据传递,实现共享时,useContext就能派上用场了。一、基础用法1. 声明。使用createContext 方法创建一个 Context 对象,并设置初始值。constMyContext=React.createContext(initialValue)2. 提供。使用Provider为所有子孙后代组件提供要传递的value值。<MyContext.Providervalue={curr...原创 2021-07-04 00:06:57 · 334 阅读 · 0 评论 -
react hooks--useEffect
useEffect的功能是可以让你在函数组件中执行副作用操作。他可以替代类组件的componentDidMount、componentDidUpdate 和 componentWillUnmount三个生命周期函数。一、基础用法用法1:在组件挂载完成后以及任何数据进行更新后执行,相当于componentDidMount和componentDidUpdate组合。useEffect(()=>{ // To do Something})用法2:useEffect第二个参原创 2021-07-02 17:18:23 · 710 阅读 · 0 评论 -
react hooks--useState
Hooks的作用:可以让你在不编写class 的情况下使用 state 以及其他的 React 特性。useState的功能:让你在函数式组件中使用state。const[state,setState]=useState<type>(initialValue)state:状态变量setState:用于修改状态的Setter 函数type:(ts)数据类型。当你使用ts的时候,可用此定义数据类型initialValue:状态的初始值,如不填则...原创 2021-07-01 12:42:48 · 635 阅读 · 0 评论 -
从0到1搭建react后台管理系统项目
如果我们需要从0到1搭建一个全新的企业级web后台管理系统,我们应该怎么做呢?今天我们要讲的是基于react框架,如何从0到1快速搭建一个后台管理系统。主要分为以下几步:1. 安装node.js(基本环境,自带npm);2. 安装git(版本管理);3. 安装VSCode(开发工具);4.使用Ant Design Pro搭建项目。原创 2021-06-27 22:29:14 · 3719 阅读 · 2 评论