react
DellYounger
漂泊极客geek
展开
-
【react自制全家桶】一、Webstrom+React+Ant Design+echarts搭建react项目
前言一、React是Facebook推出的一个前端框架,之前被用于著名的社交媒体Instagram中,后来由于取得了不错的反响,于是Facebook决定将其开源。出身名门的React也不负众望,成功成为当前最火热的三大前端框架之一。相比于Angular,React更加轻量。而相对于另一个轻量级前端框架Vue来说,React虽然学习和使用起来难度稍微大一些,但是React的社区相对来说人气更旺,...原创 2018-07-28 16:44:05 · 718 阅读 · 0 评论 -
【React自制全家桶】二、分析React的虚拟DOM和Diff算法
一、React如何更新DOM内容:1. 获取state 数据2. 获取JSX模版3. 通过数据 +模版结合,生成真实的DOM, 来显示,以下行代码为例(简称代码1) 1 <div id=' abc '><span>hello world</ span></div> 4.生成代码1对应的虚拟DOM (简称代码2):(解...原创 2018-08-01 14:00:33 · 232 阅读 · 0 评论 -
【React自制全家桶】三、React使用ref操作DOM与setState遇到的问题
在React中同时使用ref操作DOM与setState常常会遇到比如操作的DOM是setState更新之前的DOM内容,与想要的操作不一致。导致这样的原因是setState函数是异步函数。就是当ref的操作执行结束后,可能setState函数才执行。解决方案:将有关ref操作的放在setState函数的回调函数里。代码示例:handleBtnClick(){ ...原创 2018-08-02 01:15:23 · 544 阅读 · 0 评论 -
【React自制全家桶】四、React中state与props的分析与比较
一.state 1.state的作用 state是React中组件的一个对象.React把用户界面当做是状态机,想象它有不同的状态然后渲染这些状态,可以轻松让用户界面与数据保持一致. React中,更新组件的state,会导致重新渲染用户界面(不要操作DOM).简单来说,就是用户界面会随着state变化而变化. 2.state工作原理 常用的通知Reac...原创 2018-08-02 01:16:52 · 172 阅读 · 0 评论 -
【React自制全家桶】五、React组件的生命周期函数详解
一、总览React组件的生命周期函数 什么是生命周期函数:简单的来说就是 在某个时刻会自动执行的函数 二、React的生命周期函数主要由四块组成分别是:组件初始化、组件挂载、组件更新、组件卸载 三、生命周期之组件初始化作用:组件初始时设置props和state 四、生命周期之组件挂载作用:组件挂载时执行的操作 //在组件即将被挂载到页面上时自动...原创 2018-08-02 01:18:30 · 178 阅读 · 0 评论 -
【React自制全家桶】九、Redux入手
一、React项目中为什么要用Redux 上图:左图当使用纯React开发稍微大点的项目,因为React数据是瀑布式的,只能通过父子组件传递数据,所以实现关系不大的两React的组件之间的数据传递就会让你非常难受,操作起来非常复杂。如右图,由此应运而生了Redux数据流框架,专门解决数据流问题,Redux的基本原理就是React的所有组件涉及到的数据全部都存储在共用的Store中...原创 2018-08-11 01:32:51 · 464 阅读 · 0 评论 -
【React自制全家桶】六、React性能优化(持续更新总结)
一、通过虚拟DOM来提升性能(自动) 底层讲解见【React自制全家桶】二、分析React的虚拟DOM和Diff算法 二、将多次setState合并为一次执行(自动) 底层讲解见【React自制全家桶】二、分析React的虚拟DOM和Diff算法 三、将bind绑定放置在constructor上(手动)constructor(props){ // ...原创 2018-08-02 23:49:16 · 182 阅读 · 0 评论 -
【React自制全家桶】七、React实现ajax请求以及本地数据mock
一、下载axios插件yarn add axios 二、React的ajax请求代码如何放置建议放置在生命周期函数之componentDidMount()中 三、ajax之get请求 axios.get('url') .then(()=>{ // 成功 alert(...原创 2018-08-02 23:50:40 · 1015 阅读 · 2 评论 -
【React自制全家桶】八、React动画以及react-transition-group动画库的使用
React动画通常有三种方法实现从易到难为:1、transition(CSS3自带)2、animation(CSS3自带)3、react-transition-group动画库(需要引入插件) 一、transition(CSS3自带)1、用法示例:.hide{ /*过渡动画效果*/ opacity: 1; transition: all 1s ease-in...原创 2018-08-03 00:02:54 · 1464 阅读 · 0 评论