前言 对于网页系统来说，表单提交是一种很常见的与用户交互的方式，比如提交订单的时候，需要输入收件人、手机号、地址等信息，又或者对系统进行设置的时候，需要填写一些个人偏好的信息。 表单提交是一种结构化的操作，可以通过封装一些通用的功能达到简化开发的目的。本文将讨论Form表单组件设计的思路，并结合有赞的ZentForm组件介绍具体的实现方式。本文所涉及的代码都是基于React v15的版本。 Form组件功能 一般来说，Form组件...
如果你使用过 Redux 开发 React，你一定听过 容器组件（Smart/Container Components） 或 展示组件（Dumb/Presentational Components），这样划分有什么样的好处，我们能否能借鉴这种划分方式来编写 Vue 代码呢？这篇文章会演示为什么我们应该采取这种模式，以及如何在 Vue 中编写这两种组件。 为什么要使用容器组件? 假如我们要写一个组件来展示评论，在没听过容器组件之前，我们的代码一般都是这样写的： components/CommentList...
需求背景最近有个需求，需要在项目中添加一个消息通知弹窗，告知用户一些信息。用户看过消息后，就不再弹窗了。 问题很明显，这个需要后端的介入，提供相应的接口（这样可扩展性更好）。 在开发过程中，遇到个问题：由于我们的系统是多页面的，所以每次切换页面，都会去请求后端的消息接口。。有一定的性能损耗。 因为是多页面系统，使用单例组件貌似也没啥意义（不过是个机会学习学习单例组件是怎么写的）。 于是，想到使用浏览器...
React Native日期时间选择组件：react-native-datepicker，支持安卓和IOS双平台，支持单独选择日期、单独选择时间和选择日期和时间，支持自定义日期格式。 效果图安装方法 npm install react-native-datepicker --save示例代码 <Text style={styles.instructions}>time: {this.state.time}</Text><DatePickerstyle={{width: 200}}date={this.state.datetime}mode="datetime"format="YYYY-MM-DD HH:mm"confirmBtnText="确定"cancelB...
前言：此文需要有一定react，redux基础，具体学习资料请科学上网。 使用create-react-app脚手架 具体基础配置请参考 配合antd组件实现的管理系统demo,线上地址 开发前反思 1. 按需加载 webpack的 import 动态加载的模块的函数，import(参数)，参数为模块地址。 注意： import 后会返回一个promise对象。 import(/components/chart).then(mud => {dosomething(mod) }); 本demo构建了异步加载组件Bundle,具体代码请见 class Bundle e...
开始 写了一年多vue，感觉碰到了点瓶颈，学习下react找找感觉。刚好最近使用vue写了个基于cropperJS的图片裁剪的组件，便花费了几个晚上的功夫用react再写一遍。代码地址项目是使用create-react-app来开发的，省去了很多webpack配置的功夫，支持eslint，自动刷新等功能，使用前npm install并npm start即可。推荐同样是新学习react的人也用用看。项目写的比较简陋，自定义配置比较差，不过也是完成了裁剪图片的基本功能，希望可以帮...
React Native悬浮按钮组件：react-native-action-button，纯JS组件，支持安卓和IOS双平台，支持设置子按钮，支持自定义位置和样式和图标。效果图安装方法npm i react-native-action-button --save react-native link react-native-vector-icons因为用到了react-native-vector-icons图标组件，需要做下link。如果你项目中已经使用了react-native-vector-icons，那就不需要这步了。 示例代码<View style={styles.container}><Text st...
React Native 图片查看组件：react-native-image-viewer，纯JS组件，小巧快速的图标查看组件。支持图片放大缩小，支持图片加载失败设置替代图片，支持将图片保存到本地等功能。 效果图安装方法 npm i react-native-image-zoom-viewer --save使用示例 const images = [{url: https://avatars2.githubusercontent.com/u/7970947?v=3&s=460,},{url: https://avatars2.githubusercontent.com/u/7970947?v=3&s=460,},{url: https://avat...
React组件的this是什么 通过编写一个简单组件，并渲染出来，分别打印出自定义函数和render中的this： import React from react;const STR = 被调用，this指向：;class App extends React.Component{constructor(){super()}//测试函数handler() {console.log(`handler ${STR}`,this);}render(){console.log(`render ${STR}`,this);return(<div><h1>hello World</h1><label htmlFor = btn>单击打印函数handler中this的指向</label><i...
基于目前React和Vue比较火，开发react-to-vue 工具的目的是为了进一步提高组件的可复用用性，让组件复用不仅仅局限在一个框架里面 简介 对于react-to-vue工具，转化的是基本的react component，而不是全部的react应用。而基本react component的定义更多是基于props和state来渲染的组件，其中也可以包括发请求。 本文先介绍两个框架的组件共性和不兼容的地方，再介绍react-to-vue的使用和原理。在实际业务中，陆金所100多个的react基...
高德纳: "我们应该忘记忽略很小的性能优化，可以说97%的情况下，过早的优化是万恶之源，而我们应该关心对性能影响最关键的另外3%的代码。" 不要将性能优化的精力浪费在对整体性能提高不大的代码上，而对性能有关键影响的部分，优化并不嫌早。因为，对性能影响最关键的部分，往往涉及解决方案核心，决定整体的架构，将来要改变的时候牵扯更大。 1. 单个React组件的性能优化React利用Virtual DOM来提升渲染性能，虽然每一次页面更新都...
当我刚开始写React的时候，我看过很多写组件的方法。一百篇教程就有一百种写法。虽然React本身已经成熟了，但是如何使用它似乎还没有一个“正确”的方法。所以我（作者）把我们团队这些年来总结的使用React的经验总结在这里。希望这篇文字对你有用，不管你是初学者还是老手。 开始前： 我们使用ES6、ES7语法如果你不是很清楚展示组件和容器组件的区别，建议您从阅读这篇文章开始如果您有任何的建议、疑问都清在评论里留言 基于类的...
ref顾名思义我们知道，其实它就可以被看座是一个组件的参考，也可以说是一个标识。作为组件的属性，其属性值可以是一个字符串也可以是一个函数。 其实，ref的使用不是必须的。即使是在其适用的场景中也不是非用不可的，因为使用ref实现的功能同样可以转化成其他的方法来实现。但是，既然ref有其适用的场景，那也就是说ref自有其优势。关于这一点和ref的适用场景，官方文档中是这样说的： 在从 render 方法中返回 UI 结构之后，你可...
我们都知道，有许多的web组件可以被用户的交互发生改变，比如：<input>，<select>，或者是我现在正在使用的富文本编辑器。这些组件在日常的开发中很不显眼，我们可以很轻易的通过输入一些内容或者设置元素的value属性来改变组件的值。但是，因为React是单向数据流绑定的，这些组件可能会变得失控： 1.一个维护它自己state里的value值的<Input>组件无法从外部被修改； 2.一个通过props来设置value值的<Input>组件只能通过外部控制来...
最近针对日常业务需求使用react封装了一套[组件库], 大概记录下整个开发过程中的心得。由于篇幅原因，在这里只对开发过程中比较纠结的选型和打包等进行讨论，后续再对具体组件的封装进行讨论。概述我们都知道，组件化的开发模式对于我们的开发效率有着极大的提升，针对我们日常使用的基本组件进行封装，可以大量的简化我们对于基本UI的关注度，让我们的工作聚焦在业务逻辑上，很好的分离业务与基础UI的代码，使得整个项目更有调理，...