react
twinkle_J
这个作者很懒,什么都没留下…
展开
-
React性能优化 PureComponent 使用指南
为什么使用?转载https://wulv.site/2017-05-31/react-purecomponent.htmlReact15.3中新加了一个 PureComponent 类,顾名思义, pure 是纯的意思, PureComponent 也就是纯组件,取代其前身 PureRenderMixin , PureComponent 是优化 React 应用程序最重要的方法之一,易于实...转载 2018-10-15 16:38:41 · 374 阅读 · 0 评论 -
《深入React技术栈》个人总结之1.5React生命周期(打卡四)
React组件的生命周期根据广义定义描述:分为挂载,渲染和卸载这几个阶段。当渲染后的组件需要更新时,我们会重新去渲染组件,直至卸载组件。因此,React组件分为两大类:当组件在挂载或卸载时 当组件接收新的数据时,即组件更新时。React生命周期函数: 组件加载的时候触发的周期函数 constructor 数据初始化 componentWillMou...原创 2018-12-10 15:02:17 · 288 阅读 · 0 评论 -
《深入React技术栈》个人总结之1.3React组件(打卡二)
第一章第三小节:React组件今天学习了组件的发展历史,以及组件的定义,react组件的定义。1.3.1 组件的演变狭义上的组件(UI组件),比如Tabs组件。组件主要围绕在交互动作上的抽象,针对这些交互动作,利用javascript操作DOM结构或style样式来控制。(UI组件一定会有3部分组件:结构、样式和交互行为,分别对应着HTML、CSS、javascript。) 广义上...原创 2018-12-05 23:55:17 · 299 阅读 · 0 评论 -
《深入React技术栈》个人总结之1.4React数据流(打卡三)
其实单纯的react并不是一个框架,在其官网上就有这么说明:react是个view js 库。今天开始学习React数据流(之后会学习redux),接下来就会带领大家进入编码世界。在React中,数据是之上而下的单项数据流(vue也是单向数据流且是双向数据绑定“v-model”指令),即从父组件到子组件。这条原则让组件关系变的简单且可预测state与props是react组件中一个很重...原创 2018-12-08 18:50:00 · 285 阅读 · 0 评论 -
物流步骤UI组件(react)
突然间,发现自己写个好多组件,等闲下来,到时候,自己写个UI组件库,哈哈哈。这个组件还能进行优化,思路是有但是栏主感觉不好上手。废话不说啦看代码吧stepsFew.jsximport React,{ Component } from 'react'import './index.less'export default class StepsFew extends Comp...原创 2018-12-05 12:18:55 · 755 阅读 · 0 评论 -
react 上拉加载
今天项目有个上拉加载的需求,ui框架用的是antd-mobile,然而框架提供的上拉加载,看不懂,很想搬砖,但是怕在这块耗得时间过长,所以就自己造了个上拉加载轮子需要的可以参考下import React, { Component } from 'react';import './myFeedBack.less';import Header from '@/componen...原创 2018-11-23 15:50:46 · 674 阅读 · 0 评论 -
reactjs-swiper 在react项目中实现轮播
1.快速新建项目npx create-react-app swiper2.安装依赖yarn add reactjs-swiper axios --save-dev3.文件目录App.jsimport React, { Component } from 'react';import './App.scss';import SwiperBar from './Swip...原创 2018-11-14 16:50:19 · 4694 阅读 · 2 评论 -
react项目实现登录注册
eact项目中实现登录注册简单粗暴感悟全局安装react官方推荐脚手架 create-react-appnpm install create-react-app -g创建react项目create-react-app react-login-register进入项目并运行npm startimage.png安装此demo中各种依赖 npm i...转载 2018-11-05 17:16:44 · 13261 阅读 · 4 评论 -
react 引用antd的表单组件
/* * @Author: Twinkle * @Date: 2018-11-07 11:34:48 * @Last Modified by: Twinkle * @Last Modified time: 2018-11-07 14:29:15 */import React, { Component } from 'react';import './App.less';imp...原创 2018-11-07 14:37:11 · 1036 阅读 · 1 评论 -
Create-react-app+Antd+Less 在项目yarn eject 的情况下进行配置
一:创建一个react项目npx create-react-app project二:暴露所有内建的配置(注:我这里用的是yarn)yarn eject注:如果yarn eject 报错的解决的方法git add .git commit -m 'aa'yarn eject三:使用babel-plugin-import实现Antd按需加载,并修改package.jso...原创 2018-11-07 11:37:16 · 723 阅读 · 0 评论 -
react实现选项卡
一、首先是Showcase效果 传送门二、如何实现既然用React写,那么它就必然是一个组件,首先考虑你怎么使用这个组件,也就是这个组件的接口是怎么样的。<TabsControl> <Tab name="red"> <div className="red"/> </Tab> <Tab name="转载 2018-10-31 15:06:09 · 4669 阅读 · 0 评论 -
react ssr 服务器端渲染(一)
服务器端渲染的特性:页面上的内容在服务器上生成好了,浏览器从服务器上拿到内容,然后在页面上显示 客户端渲染与服务器端渲染流程客服端渲染不利于SEO(搜索引擎优化,网站排名)...原创 2018-10-24 14:13:25 · 413 阅读 · 0 评论 -
PureComponent的作用及一些使用陷阱
默认渲染行为的问题在React Component的生命周期中,有一个shouldComponentUpdate方法。这个方法默认返回值是true。这意味着就算没有改变组件的props或者state,也会导致组件的重绘。这就经常导致组件因为不相关数据的改变导致重绘,这极大的降低了React的渲染效率。比如下面的例子中,任何options的变化,甚至是其他数据的变化都可能导致所有cell的重...转载 2018-10-15 17:02:58 · 1399 阅读 · 0 评论 -
《深入React技术栈》个人总结之1.6React与DOM(打卡五)
在React组件的开发实现中,我们并不会用到ReactDOM,只有顶层组件以及由于React模型所限而不得不操作DOM的时候,才会使用它。1.6.1 ReactDOMfindDOMNode render unmoutComponentAtNode(很少使用,是个用于卸载的操作) 1.findDOMNodeDOM真正被添加到HTML中生命周期方法是componentDidMount...原创 2018-12-11 14:22:41 · 285 阅读 · 0 评论