随笔分类 -  React

使用前端主流框架之React遇到的各种问题
前端组件化思想与实践
摘要：前端组件化思想与实践 组件化思想 什么是组件化？ 简单的说组件就是：将一段UI样式和其对应的功能作为独立的整体去看待，无论这个整体放在哪里去使用，它都具有一样的功能和样式，从而实现复用，这种整体化的思想就是组件化。 简单的说组件就是：将一段UI样式和其对应的功能作为独立的整体去看待，无论这个整体放在 阅读全文
posted @ 2019-08-14 00:34 dellyoung 阅读(1895) 评论(0) 推荐(0)
React TypeScript
摘要：配置一套宽松的tslint tsconfig 阅读全文
posted @ 2019-05-12 10:53 dellyoung 阅读(533) 评论(1) 推荐(0)
ant-pro使用Form表单验证上传图片出现的问题
摘要：1、复现：用antd的Form表单验证上传图片必填项时出现问题：复现过程，先提交，提示图片需要上传，上传成功后，依旧提示：图片未上传 2、表单验证原理：先理解一下antd的Form表单验证的表层原理，每个表单getFieldDecorator配置项都有个名字，比如就叫goodsSkuImg，这个go 阅读全文
posted @ 2019-03-08 23:53 dellyoung 阅读(1716) 评论(0) 推荐(0)
前端项目编程规范
摘要：1、CSS/HTML 编码规范 原文：http://codeguide.co/ 译文： http://zoomzhao.github.io/code-guide/ 2、JavaScript 编码规范： 原文：https://standardjs.com/rules.html 译文：https://s 阅读全文
posted @ 2019-03-08 18:42 dellyoung 阅读(173) 评论(0) 推荐(0)
ant-design-pro中引入bizcharts报错：BizCharts is not defined 解决
摘要：解决方法： 在config.js 中的 externals 配置项中进行了如下配置修改： 阅读全文
posted @ 2019-03-03 02:35 dellyoung 阅读(2523) 评论(0) 推荐(0)
react封装基于axios的API请求
摘要：一、最近做的一个后台管理项目，基于antd-pro做的，需要封装基于axios请求，便于开发，直接上代码。 二、另外项目统一管理api请求，将api请求都放在了api.js目录下 示例： 三、使用api方法 总结：上面的就是项目中api的用法，可以完全按照这样来写 阅读全文
posted @ 2019-01-13 13:34 dellyoung 阅读(12093) 评论(0) 推荐(0)
react中使用map时onClick事件失效
摘要：分享一些踩过的坑 react中使用map时onClick事件失效 这样是真的失效吗 不，只是不会用而已 其实把函数改成箭头函数就能用啦 顺便说一下 .bind相当于箭头函数 阅读全文
posted @ 2019-01-07 13:10 dellyoung 阅读(1909) 评论(0) 推荐(0)
react中回车enter事件处理
摘要：对于常见的搜索需求业务场景，用户输入完成后，点击enter事件请求数据，要求不提交页面，实现数据局部更新，这需要用到react中的表单Forms。 处理方法： （1）html书写 form标签中去掉action参数，定义onSubmit方法，如下所示： （2）事件处理 关键的是阻止掉页面默认提交： 阅读全文
posted @ 2018-12-08 00:13 dellyoung 阅读(9470) 评论(0) 推荐(0)
React中跨域问题的完美解决方案
摘要：针对react版本^16.6.0有多种解决方案 方案一：package.json中加上proxy代理配置 在packge.json加入 然后你页面中的请求fetch('/api/userdata/')就会转发到proxy中的地址 也就是真实的请求是http://0.0.2.89:7300/api/u 阅读全文
posted @ 2018-11-28 20:32 dellyoung 阅读(21021) 评论(0) 推荐(1)
react+laravel与服务端渲染的几点思考
摘要：一、前后端完全分离 1、用React.js做MVC中的V，剩下的交给Laravel 2、Laravel用来做API接口开发。 3、好处：实现了前后端开发的分离，从而加快前后端开发效率。另外若是多端的如web+android+IOS则更有必要，这样三端共用一个后端，加快开发效率。 4、仔细想下： 用  阅读全文
posted @ 2018-11-24 15:32 dellyoung 阅读(1793) 评论(0) 推荐(0)
【React自制全家桶】九、Redux入手
摘要：一、React项目中为什么要用Redux 上图： 左图当使用纯React开发稍微大点的项目，因为React数据是瀑布式的，只能通过父子组件传递数据，所以实现关系不大的两React的组件之间的数据传递就会让你非常难受，操作起来非常复杂。如右图，由此应运而生了Redux数据流框架，专门解决数据流问题， 阅读全文
posted @ 2018-08-11 01:31 dellyoung 阅读(434) 评论(0) 推荐(0)
【React自制全家桶】八、React动画以及react-transition-group动画库的使用
摘要：React动画通常有三种方法实现从易到难为： 1、transition（CSS3自带） 2、animation（CSS3自带） 3、react-transition-group动画库（需要引入插件） 一、transition（CSS3自带） 1、用法示例： 含义：透明度在1s内从0渐变为1 2、tr 阅读全文
posted @ 2018-08-02 23:45 dellyoung 阅读(2696) 评论(0) 推荐(0)
【React自制全家桶】七、React实现ajax请求以及本地数据mock
摘要：一、下载axios插件 二、React的ajax请求代码如何放置 建议放置在生命周期函数之componentDidMount()中 三、ajax之get请求 解析：get内放置url，then后是请求成功的回调函数，catch是请求失败的回调函数 四、本地mock（模拟）请求 web开发时，一般都是 阅读全文
posted @ 2018-08-02 13:02 dellyoung 阅读(2569) 评论(0) 推荐(0)
【React自制全家桶】六、React性能优化（持续更新总结）
摘要：一、通过虚拟DOM来提升性能（自动） 底层讲解见【React自制全家桶】二、分析React的虚拟DOM和Diff算法 二、将多次setState合并为一次执行（自动） 底层讲解见【React自制全家桶】二、分析React的虚拟DOM和Diff算法 三、将bind绑定放置在constructor上（手 阅读全文
posted @ 2018-08-02 11:23 dellyoung 阅读(213) 评论(0) 推荐(0)
【React自制全家桶】五、React组件的生命周期函数详解
摘要：一、总览React组件的生命周期函数 什么是生命周期函数：简单的来说就是 在某个时刻会自动执行的函数 二、React的生命周期函数主要由四块组成 分别是：组件初始化、组件挂载、组件更新、组件卸载 三、生命周期之组件初始化 作用：组件初始时设置props和state 四、生命周期之组件挂载 作用：组件 阅读全文
posted @ 2018-08-02 01:13 dellyoung 阅读(538) 评论(0) 推荐(0)
【React自制全家桶】四、React中state与props的分析与比较
摘要：一.state 1.state的作用 state是React中组件的一个对象.React把用户界面当做是状态机,想象它有不同的状态然后渲染这些状态,可以轻松让用户界面与数据保持一致. React中,更新组件的state,会导致重新渲染用户界面(不要操作DOM).简单来说,就是用户界面会随着state 阅读全文
posted @ 2018-08-02 00:21 dellyoung 阅读(353) 评论(0) 推荐(0)
【React自制全家桶】三、React使用ref操作DOM与setState遇到的问题
摘要：在React中同时使用ref操作DOM与setState常常会遇到 比如操作的DOM是setState更新之前的DOM内容，与想要的操作不一致。导致这样的原因是setState函数是异步函数。 就是当ref的操作执行结束后，可能setState函数才执行。 解决方案： 将有关ref操作的放在setS 阅读全文
posted @ 2018-08-01 23:36 dellyoung 阅读(790) 评论(0) 推荐(0)
【React自制全家桶】二、分析React的虚拟DOM和Diff算法
摘要：一、React如何更新DOM内容： 1. 获取state 数据 2. 获取JSX模版 3. 通过数据 +模版结合，生成真实的DOM, 来显示，以下行代码为例（简称代码1） <div id=' abc '><span>hello world</ span></div> 4.生成代码1对应的虚拟DOM 阅读全文
posted @ 2018-08-01 13:58 dellyoung 阅读(332) 评论(0) 推荐(0)
【React自制全家桶】一、Webstrom+React+Ant Design+echarts搭建react项目
摘要：前言 一、React是Facebook推出的一个前端框架，之前被用于著名的社交媒体Instagram中，后来由于取得了不错的反响，于是Facebook决定将其开源。出身名门的React也不负众望，成功成为当前最火热的三大前端框架之一。相比于Angular，React更加轻量。而相对于另一个轻量级前端 阅读全文
posted @ 2018-07-28 16:01 dellyoung 阅读(4989) 评论(1) 推荐(0)