react
文章平均质量分 68
理头 崴特
这个作者很懒,什么都没留下…
展开
-
Hook特性
一、什么是Hook特性目前React的组件定义方式主要有两种:函数组件和类组件。其中,类组件虽支持内部状态State并由于丰富的生命周期函数,但仍未改变JavaScript原型的本质;而函数组件虽是定义组件最简单的方式,但无法进行状态管理。在React 16.8版本中,推出了Hook特性。Hook是一个特殊的函数,它可以让你“钩入”React的特性,即在函数组件中也能使用State及其他的React特性,不必定义Class组件。二、针对State的Hook:State HookSta.原创 2022-03-31 13:23:32 · 703 阅读 · 0 评论 -
阿里iconfont使用
一、作为图标引用1、选择需要的icon,点击下载按钮,将icon以png格式下载至本地2、将下载好的图标放入项目对应文件夹中3、在需要使用对应图标的界面中先引入图标路径import diary from '../../assets/images/Flexbar/diary.png'4、 使用标签<img>引用图标<img src={diary} alt='' />二、作为代码引用1、将所需图标加入至购物车2、当选好..原创 2022-02-22 23:08:38 · 363 阅读 · 0 评论 -
Redux
一、组成(一)State-状态(数据)即为传递的数据,大致可分为三类:DomainDate:可以理解为服务器端的数据,比如:获取的用户信息,商品列表等 UI State:决定当前UI展示的状态,比如:弹窗的显示与隐藏,受控组件等 App State:App级别的状态,比如:当前当前是否请求loading,当前路由信息等可能被多个和组件去使用的到的状态 (二)Action-事件(存储数据)Action是把数据传到store的载体,它是store数据的唯一来源,一般来说,我们可以通...原创 2022-02-14 16:45:09 · 392 阅读 · 0 评论 -
清除React项目运行时控制台无用的警告
一、引入antd产生的黄色报错You are using a whole package of antd-mobile, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.原因是antd希望按需引入,但以import{TabBar}from"antd-mobile";形式引入时实际上会在底层将所有组件引入,因此会报此错误,目前找不到合适的方法来清除。二、A str...原创 2021-09-22 19:52:49 · 2274 阅读 · 0 评论 -
react 子组件无法跳转显示“push“underfind
由于此时的history需要父组件提供,因此在调用子组件时,父组件需进行传参:<FlexBar navs={navs} history={this.props.history} />同时子组件通过props.history.push(path)即可实现跳转:<Flex className="nav"> {props.navs.map(item => ( <Flex.Item key={item.id}原创 2021-09-20 22:23:21 · 161 阅读 · 0 评论 -
React项目搭建
一、创建项目1、cmd切换到目标文件夹2、初始化项目npx create-react-app init-mobile3、切换到对应目录根据提示启动项目二、配置项目文件目录调整项目中src目录结构如下:三、引入组件库antd-mobile1、安装npm install antd-mobile --save2、在App.js根组件中导入要使用的组件App.js中直接引用即可,无需加载import { Button } from 'antd-...原创 2021-09-18 08:54:43 · 240 阅读 · 0 评论 -
React原理
一、setState(一)异步性setState是异步更新数据的:以下代码执行结构中log打印出来的数据是1,表示setState是在log后被执行的,是一个异步操作state = { number: 1 } add = () => { this.setState({ number: this.state.number+1 }) console.log(this.state.number) // 1 }这种异步性会导致.原创 2021-09-13 22:04:31 · 101 阅读 · 0 评论 -
React-进阶
一、组件通讯1、父传子原创 2021-09-10 20:25:07 · 257 阅读 · 0 评论 -
React-Start
一、JSX(一)基本使用1、React元素的属性名使用驼峰命名法2、特殊属性名:class->className、for->htmlFor、tabindex->tabIndex3、推荐:使用小括号包裹JSX,从而避免JS中的自动插入分号陷阱(二)在JSX中嵌入JS表达式用{}包裹JS表达式1、调用变量const name = 'Bob'const dv = ( <div>Hello, my name is {name}</d.原创 2021-09-03 17:21:02 · 217 阅读 · 0 评论