![](https://img-blog.csdnimg.cn/20190918140213434.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
React
文章平均质量分 64
react前端开发技术栈学习
诗人远行
记住自己写博客的初心---好记性不如烂笔头,温故而知新
展开
-
在dva的subscription和componentDidMount调取接口的区别
一,前言1.在react使用class组件和dva模式下,我们通常在组件的componentDidMount或者dva的subscription调取接口,这两种方式目的相同,但存在区别。二,区别1.在subscription中调取接口会阻塞组件的渲染,当页面加载调取的接口较少时两者似乎没什么区别,但如果接口调取很多的时候,使用subscription的方式会让页面产生较长时间的白屏,而使用componentDidMount是在组件加载完成时执行,因此页面不会有白屏的情。2.使用subscriptio原创 2021-12-16 23:15:19 · 523 阅读 · 0 评论 -
antd库form表单
一,前言1.form表单用于进行数据的收集,校验,提交等功能。二,组件和属性介绍1.<Form><Form/>2.<Form.Item><Form.Item/>(1)lable: 表单元素前的lable(2)colon:是否显示lable后面的冒号三, Form.create()()1.使用from.create()(Demo)高阶组件,会自动给组件包装form属性。四,from属性1.getFieldDecorator(keys,opti原创 2021-05-30 21:59:02 · 1676 阅读 · 0 评论 -
react的class和style,动态添加类classnames库
一,前言1.在react中想要动态添加className时,通过就会使用classnames这个库。二,使用方法1.引入classnames: import classnames from classnames。2.classnames是一个函数,使用的形式较多,记住通常使用方法即可:(1)传入一个对象:classnames({class1:true,class2:false}) ,true表示相应的class生效,反之false表示不生效。(2)接受多个类名:classnames(class1原创 2021-05-16 20:19:08 · 7922 阅读 · 0 评论 -
React性能优化
一,class组件性能优化1:shouldComponentUpdate1.shouldComponentUpdate是react其中一个生命周期钩子,在页面要更新时调用。2.shouldComponentUpdate(nextProps,nextState)有两个参数,第一个是更新之后的组件的props,第二个是更新后的组件的自身的state。3.shouldComponentUpdate返回值为 false时组件不会更新,返回值为true时组件更新。4.根据以上我们可以拿nextProps和ne原创 2021-03-29 21:55:06 · 297 阅读 · 0 评论 -
react hook
一,简介1.Hook 是 React 16.8 的新增特性。2.在hook之前,react组件主要有函数组件和 class组件。3.其中函数组件可以被称为无状态组件,因为函数组件是没有自身的state的,组件内部状态的变化是通过外部props的变化而变化,并且函数组件是没有生命周期钩子的。4.hook的作用就是让函数组件拥有自己的状态和生命周期。二,hook 引入import React,{useState,useEffect} from 'react三,函数组件自身的状态:useState原创 2021-03-10 21:50:20 · 189 阅读 · 0 评论 -
react传送门portals
一,前言1.在react中,默认的我们可以认为组件的子元素及props.children是默认挂载在距离父组件最近的元素上。2.不过,react提供了一种传送门技术,让组件的子元素能够挂载在其他dom节点上二,ReactDOM.createPortal1.createPortal是ReactDOM上的API,2.ReactDOM.createPortal(componentt,dom节点),接收一个组件和组件要挂载的dom节点作为参数三,使用形式1.ReactDOM.createPortal不原创 2021-01-14 11:09:01 · 1231 阅读 · 0 评论 -
React--ref学习
一,什么是ref1.ref是react提供的一种方式可以直接获取元素的dom对象,或者组件的实例二,设置ref的限制1,可以在html元素设ref,这时可访问到元素的dom2.可以在class组件上设置ref,访问到组件实例3.不可以在函数组件上设置ref,因为函数组件没有实例三,如何设置ref,1,ref作为React元素的属性,2,方式1,使用React.creatRef创建ref,并作为react元素ref属性的值,可以获取dom或组件实例3.方式2,使用回调ref,方式,给reac原创 2020-08-08 21:16:23 · 427 阅读 · 0 评论 -
React组合(插槽)
一,“具名插槽”1.使用具体名字的props 传递一个 react元素,实现组件分发function Demo(props){ return <div>props.content</div>}<Demo content={<span>demo</span>}>二,props.children1.使用props.children可任意分发组件内容2.props.children的值有四种可能情况(1) 当无内容时,为undef原创 2020-08-05 21:25:12 · 6586 阅读 · 0 评论 -
表单的双向绑定
一,表单元素–受控组件–双向绑定1.HTML表单元素是有自己默认行为的,如<input>、 <textarea> 和 <select>)之类的表单元素通常自己维护 state,并根据用户输入进行更新。2.而在 React 中,可变状态(mutable state)通常保存在组件的 state 属性中,并且只能通过使用 setState()来更新。称之为受控组件,和vue的表单双向绑定类似。二,双向绑定实现1.为表单元素设置value绑定state,2.监听表单元原创 2020-08-02 22:53:40 · 1044 阅读 · 0 评论 -
条件渲染和列表渲染
一,条件渲染方式1.if判断2.三元表达式3.&&语法4.swich case:二,列表渲染1.map()三,总结1.react并不像vue专门为条件渲染和列表渲染设置特定的语法,完全遵循js的语法原创 2020-08-02 22:38:19 · 178 阅读 · 0 评论 -
React事件
一,react和原生事件的区别1.事件采用驼峰式命名2.不能再函数内部使用return false 来阻止事件默认行为3.事件接收一个函数声明,而不是函数调用的形式二,事件的注意事项1.事件函数内部的this指向问题,这个是js的this指向问题,可使用箭头函数或者在constructor里主动使用bind绑定this为当前对象。三,react事件传递参数1.两种方式,一种通过bind,一种通过箭头函数,注意,使用箭头函数需要主动传入事件对象e, 使用bind会隐式传入。<butto原创 2020-07-13 09:02:33 · 738 阅读 · 0 评论 -
React生命周期
一,react生命周期的三个阶段1.创建阶段:constructor(props) ;componentWillMount() ;render() ;componentDidMount() ;2.更新阶段componentWIllReceiveProps(nextProps) 针对子组件shouldComponentUpdate(nextProps, nextState) ; react性能优化非常重要的一环。组件接受新的state或者props时调用,我们可以设置在此对比前后两个prop原创 2020-07-08 14:41:31 · 192 阅读 · 0 评论 -
props和state
一,state的作用1.通常ui不是动态的,经常会变化。我们可以使用ReactDOM.render()来更新ui,但通常我们不会怎么做。2.对于传入组件的props我们不能修改,因此react有state的存在,用来更新UI二,使用state的注意事项1.我们在constructor中定义我们需要的state,构造函数是唯一可以定义state的地方。 constructor(props) { super(props); this.state = {date: new Date()原创 2020-07-08 10:34:24 · 512 阅读 · 0 评论 -
React组件
一,组件类型1,函数组件:三个要素:组件名首字母大写-----接收唯一的props作为参数------返回React元素function Component(props){ return <div>{props.name}<div>}2.class组件:两个要素:继承React.component-----React元素写在render函数中class Comp extends React.component{ construct(props){ super(原创 2020-07-08 10:06:32 · 1004 阅读 · 1 评论 -
React学习第二天元素渲染
一,root根节点1.在一个 React构建的应用 通常有一个root根节点,该节点内的所有内容都将由 React DOM 管理。二,ReactDOM.render() 渲染函数1.所有 React元素 需要使用ReactDOM.render()渲染到页面。2.ReactDOM.render(react元素,container [,callback])接收三个参数React元素: JSX ,使用React.createElement()container : DOM元素......原创 2020-07-07 17:28:16 · 271 阅读 · 0 评论 -
React学习第一天JSX语法
一,什么是JSX语法1.JSX是扩展的javascript语法,JSX 可以生成 React “元素”。二,JSX形式1.JSX语法类似于一个字符串和HTML元素,但又都不是,const element = <h1>好好学React</h1>三,JSX模板语法1.JSX有类似Vue的模板语法(1)使用大括号绑定HTML元素内容:const element = <h1> call me {maybe} </h1>(2)使用大括号绑定属性:原创 2020-06-19 15:03:55 · 181 阅读 · 0 评论 -
DVA学习
一,什么是Dva?1.由于react专注于ui渲染,功能较为单一。在实际开发过程中往往需要许多库的支持,例如用于控制数据状态的redux和redux-saga,和用于路由控制的react-router。2.dva 是 React 应用框架,将React-Router + Redux + Redux-saga三个 React 工具库包装在一起,简化了 API,让开发 React 应用更加方便和快捷。3.Dva = react-router + rudex + redux-saga二,Dva项目创建1原创 2020-08-30 00:36:31 · 2249 阅读 · 1 评论