08 2018 档案

【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)