前端组件 | 易学教程

React 中的 9 种优化技术

阅读更多关于 React 中的 9 种优化技术

React 中的 9 种优化技术使用React.Fragment 来避免向 DOM 添加额外的节点使用 React.Lazy 延迟加载组件使用React.Suspense 使用 shouldComponentUpdate() 防止不必要的重新渲染 6使用React.PureComponent 7使用 React.memo 来缓存组件 8使用 ComponentDidUnmount() 删除未使用的DOM 元素 9其他优化技术谷歌的数据表明，一个有 10 条数据 0.4 秒可以加载完的页面，在变成 30 条数据加载时间为 0.9 秒后，流量和广告收入减少了 20%。当谷歌地图的首页文件大小从 100kb 减少到 70~80kb 时，流量在第一周涨了 10%，接下来的三周涨了 25%。腾讯的前端工程师根据长期的数据监控也发现页面的一秒钟延迟会造成 9.4% 的 PV 的下降，8.3% 跳出率的增加以及 3.5% 转化率的下降。可以看出，性能优化商业上来说很重要。但是，更重要的还是屏幕前我们的用户，让用户在使用产品时有更快更舒适的浏览体验，这算是一种前端工程师的自我修养。所以今天就分享一下如何去优化我们的 React 项目，进而提升用户体验。使用React.Fragment 来避免向 DOM 添加额外的节点我们在写 React 代码时，会经常遇到返回一组元素的情况

精读《React Hooks 最佳实践》

阅读更多关于精读《React Hooks 最佳实践》

React 16.8 于 2019.2 正式发布，这是一个能提升代码质量和开发效率的特性，笔者就抛砖引玉先列出一些实践点，希望得到大家进一步讨论。然而需要理解的是，没有一个完美的最佳实践规范，对一个高效团队来说，稳定的规范比合理的规范更重要，因此这套方案只是最佳实践之一。精读环境要求拥有较为稳定且理解函数式编程的前端团队。开启 ESLint 插件：eslint-plugin-react-hooks。组件定义 Function Component 采用 const + 箭头函数方式定义： const App: React.FC<{ title: string }> = ({ title }) => { return React.useMemo(() => {title} , [title]); }; App.defaultProps = { title: ‘Function Component’ } 复制代码上面的例子包含了：用 React.FC 申明 Function Component 组件类型与定义 Props 参数类型。用 React.useMemo 优化渲染性能。用 App.defaultProps 定义 Props 的默认值。 FAQ 为什么不用 React.memo? 推荐使用 React.useMemo 而不是 React.memo

常用的插件

阅读更多关于常用的插件

转载 https://blog.csdn.net/aaronzzq/article/details/80936708 目录 UI组件开发框架实用库服务端辅助工具应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和WeUI的组件库 iview ★6634 - 基于 Vuejs 的开源 UI 组件库 mint-ui ★6253 - Vue 2的移动UI元素 muse-ui ★3705 - 三端样式一致的响应式 UI 库 vue-material ★3328 - 通过Vue Material和Vue 2建立精美的app应用 vuetify ★2925 - 为移动而生的Vue JS 2组件框架 Keen-UI ★2749 - 轻量级的基本UI组件合集 vonic ★1913 - 快速构建移动端单页应用 vue-multiselect ★1539 - Vue.js选择框解决方案 eme ★1529 - 优雅的Markdown编辑器 vueAdmin ★1455 - 基于vuejs2和element的简单的管理员模板 bootstrap-vue ★1267 - 应用于Vuejs2的Twitter的Bootstrap 4组件 Vue.Draggable ★1191 -

react学习：组件&props

阅读更多关于 react学习：组件&props

定义组件 1.函数定义组件：（此函数为有效的React组件，它接收一个单一的“props”对象并返回了一个React元素） function Welcome（props） { 　　return <div>hello , {props.name}</div> } 2.使用es6的class进行定义 class Welcome extends React.Component( 　　render( 　　　　return <div>hello , {this.props.name}</div> 　　) ) 小结：两种定义在react中是一样的。来源：博客园作者：前端小可爱链接：https://www.cnblogs.com/liyaping/p/11446165.html

vue续集1

阅读更多关于 vue续集1

1.vue组件 1.1局部组件的使用 var App = { tempalte:` <div class='app'></div>` }; //2.挂子 <App />单闭合双闭合都可以 new Vue({ el:"#app", //用子 template:<App /> components:{ App } }) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } body{ color: #fff; } .main{ width: 100%; } .head{ width: 100%; height: 70px; background-color: purple; text-align: center; font-size: 20px; line-height: 70px; } .wrap{ width: 100%; height: 1200px; } .wrap .aside{ width: 30%; height: 1200px; background-color: green; float: left; } .wrap .content{ width: 70%;

Vue-路由（router）

阅读更多关于 Vue-路由（router）

一、路由　　（一）前端路由　　　　每一个路由都是一个对象　　（二）路由模式：mode 　　　　1、hash路由，会带#号的哈希值（默认）　　　　2、history路由，不会带#号（要有后端支持），只在开发环境有效，在其他环境中，一旦刷新就会找不到，需要设置重定向　　（三）路由的常用配置项　　　　1、path：路由请求的路径　　　　2、component：路由匹配成功后需要渲染的组件或页面　　　　3、redirect：重定向　　　　4、children：路由嵌套　　　　5、name：命名路由　　　　6、alias：别名设置　　　　7、props：路由解耦，路由传参的一种方式，针对动态路由　　　　8、meta：路由元信息　　（四）路由嵌套　　　　children是一个数组，数组中存放对象，每一个对象都是下一级的路由配置项，配置项的属性与routes中的属性一样　　　　渲染二级页面时会保留一级页面内容，解决办法：1）定位；2）一级覆盖　　（五）路由跳转的方式　　　　*<router-view/>内置组件，使组件可以显示　　　　1、<a href="#/home"><a/> 　　　　2、<router-link :to="/home"><router-link/> 　　　　　　注：to的路径会与path进行匹配，若成功会通过<router-view

[转] vue 自定义组件使用v-model

阅读更多关于 [转] vue 自定义组件使用v-model

<input v-model="something"> v-model指令其实是下面的语法糖包装而成： <input :value="something" @:input="something = $event.target.value"> 在一个组件上使用 v-model 时，会简化为： <custom-input :value="something" @input="value => { something = value }"> </custom-input> v-model value input 利用 $emit 触发 input 事件： this.$emit('input', value); 组件1： Vue.component('my-component', { template: `<div> <input type="text" :value="currentValue" @input="handleInput"/> </div>`, computed:{ currentValue:function () { return this.value } }, props: ['value'], //接收一个 value prop methods: { handleInput(event) { var value = event.target.value; this.

vue 文件目录结构详解

本篇文章主要介绍了vue 文件目录结构详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧项目简介基于 vue.js 的前端开发环境，用于前后端分离后的单页应用开发，可以在开发时使用 ES Next、scss 等最新语言特性。项目包含：基础库: vue.js、vue-router、vuex、whatwg-fetch 编译/打包工具：webpack、babel、node-sass 单元测试工具：karma、mocha、sinon-chai 本地服务器：express 目录结构 ├―― README.md 项目介绍 ├―― index.html 入口页面 ├―― build 构建脚本目录 │ ├―― build-server.js 运行本地构建服务器，可以访问构建后的页面 │ ├―― build.js 生产环境构建脚本 │ ├―― dev-client.js 开发服务器热重载脚本，主要用来实现开发阶段的页面自动刷新 │ ├―― dev-server.js 运行本地开发服务器 │ ├―― utils.js 构建相关工具方法 │ ├―― webpack.base.conf.js wabpack基础配置 │ ├―― webpack.dev.conf.js wabpack开发环境配置 │ └―― webpack.prod.conf.js

vue组件定义、组件的切换、组件的通信

阅读更多关于 vue组件定义、组件的切换、组件的通信

全局定义的是挂在构造函数Vue上面的，所以实例化出的对象都可以使用这个功能 1、什么是组件？ ---从UI的角度把页面拆分成不同的部分，组件的优势：可复用，能够拆分vue实例代码，保证代码的可读性　　　模块化和前端组件化的区别：一个是从功能上拆分一个是从ui角度去拆分 2、定义vue组件　　全局组件定义的3种方式　　　　私有组件的定义　　　　使用的是components来定义私有组件　　　　　　　　　　　　 4、组件的切换　　　　　　　改造：如下　　　　　　　　　　　　组件切换的动画　　　　　5、组件之前的传值问题　　　　　　　　　　　　正确用法：　　　　　　　　　　　　注意：props数组里的值都是从父组件里传递过来的，只能是小写，只读不可改　　　　父组件向子组件传递事件---注意传递的是方法不是方法的结果，所以不要小括号　　　　 6、复习　　　　　　　　　　

VUE

阅读更多关于 VUE

vue 框架 1.vue vue 是一套构建用户界面的渐进式框架偏向于视图层 view (component 组件) API 齐全简单明了的前端框架 vue 采用自下而上的增量开发设计 vue 实现单页面应用 SPA single page appliaction 通过路由匹配组件和数据 (vue-router) 设计模式单例模式工厂模式代理模式发布订阅模式观察者模式设计思想 MVC ===> angular1/angular2 react M model 数据层 data V view 视图层组件/模板/html C controller 逻辑层函数 MVVM ===> vue (不完全遵循) M model 数据层 data binding V view 视图层 DOM listen VM viewmodel VM实例对象通过vue把数据 data 和视图 html 绑定在一起 MVP m model 数据层 v view 视图层 p presenter 逻辑层组件系统因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用组件就意味着由虚拟dom组成抽象层 virtual DOM 一个组件本质上是一个拥有预定义选项的一个 Vue 实例渲染函数 render vue render(createElement){ return

订阅前端组件