![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
ReviewCode
这个作者很懒,什么都没留下…
展开
-
webpack+react+es2015轻松环境搭建,配置,运行项目
摘要: webpack的模块化,react的组件化,以及es2015的各种新特性都很吸引人,如何将他们联合起来写出让人身心愉悦的项目代码,这是本文的中心。 本文手把手教新手搭建环境创建项目,可能有的概念描述的不清楚,但绝对是能轻松运行起来的(ps:网上大多数教程都是偏概念的,经常按着教程走到后来还是运行不起来项目或者不支持es6的语法【ps:加载器的问题】等,但真正对新手困难的还是环境的搭建和配置转载 2017-02-20 11:46:15 · 1648 阅读 · 0 评论 -
React 生命周期
前言学习React,生命周期很重要,我们了解完生命周期的各个组件,对写高性能组件会有很大的帮助.Ract生命周期React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁初始化1、getDefaultProps()设置默认的props,也可以用dufaultProps设置组件的默认属性.2、getInitialState()在使用es6的class语法时是没有这个钩子函数的,可以直接在co...原创 2018-06-19 15:33:30 · 149 阅读 · 0 评论 -
深度剖析:如何实现一个 Virtual DOM 算法
目录:1 前言2 对前端应用状态管理思考3 Virtual DOM 算法4 算法实现4.1 步骤一:用JS对象模拟DOM树4.2 步骤二:比较两棵虚拟DOM树的差异4.3 步骤三:把差异应用到真正的DOM树上5 结语6 References1 前言本文会在教你怎么用 300~400 行代码实现一个基本的 Virtual DOM 算法,并且尝试尽量把 Virtua转载 2017-11-13 17:00:23 · 163 阅读 · 0 评论 -
Flux 架构入门教程
Flux 架构入门教程过去一年中,前端技术大发展,最耀眼的明星就是React。React 本身只涉及UI层,如果搭建大型应用,必须搭配一个前端框架。也就是说,你至少要学两样东西,才能基本满足需要:React + 前端框架。Facebook官方使用的是 Flux 框架。本文就介绍如何在 React 的基础上,使用 Flux 组织代码和安排内部逻辑,使得你的应用更易于开原创 2017-09-27 15:20:55 · 219 阅读 · 0 评论 -
React 组件基本使用(三) ---父子组件之间的通信
React 组件基本使用(三) ---父子组件之间的通信 当有多个组件需要共享状态的时候,这就需要把状态放到这些组件共有的父组件中,相应地,这些组件就变成了子组件,从而涉及到父子组件之间的通信。父组件通过props 给子组件传递数据,子组件则是通过调用父组件传给它的函数给父组件传递数据。 很简单的一个例子,我们在输入框中输入温度,输入框下面显示冷和热。这里就有两原创 2017-09-26 17:11:56 · 856 阅读 · 0 评论 -
React 组件基本使用(二)
React 组件基本使用(二) 条件渲染 React中的条件渲染和我们平常写的js 代码一样,都是用的if else, 只不过在if else 中它的返回值是jsx, 根据不同的条件渲染不同的UI. 先写两个组件 //登录的用户显示欢迎 function UserWelcome(){ return Welcome原创 2017-09-26 17:10:06 · 298 阅读 · 0 评论 -
React 组件基本使用(一)
React 组件基本使用(一) React 提供了两种方式来声明组件,一种是函数式,一种是类式,就是用es6 class, 我们所有的组件都继承自React.Component. 函数式很简单,就像我们平常写函数一个,接受一个参数作为输入,然后进行相应的输出,只不过它输出的jsx.// welcome 函数式组件。function Welcome(pr原创 2017-09-26 16:24:46 · 1865 阅读 · 0 评论 -
从零搭建React全家桶框架教程
写在前面当我第一次跟着项目做react项目的时候,由于半截加入的,对框架了解甚少,只能跟着别人的样板写。对整个框架没有一点了解。做项目,总是要解决各种问题的,所以每个地方都需要去了解,但是对整个框架没有一个整体的了解,实在是不行。期间,我也跟着别人的搭建框架的教程一步一步的走,但是经常因为自己太菜,走不下去。在经过各种蹂躏之后,对整个框架也有一个大概的了解,我就想把他写下来,让原创 2017-09-23 10:00:27 · 413 阅读 · 0 评论 -
掌握ES6/ES2015核心内容(上)
ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015。 也就是说,ES6就是ES2015。 虽然目前并不是所有浏览器都能兼容ES6全部特性,但越来越多的程序员在实际项目当中已经开始使用ES6了。所以就算你现在不打算使用ES6,但为了看懂别人的你也转载 2017-02-09 11:45:28 · 668 阅读 · 0 评论 -
ES6/ES2015核心内容(下)
在30分钟掌握ES6/ES2015核心内容(上)我们讲解了es6最常用的一些语法: let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments 俗话说打铁要趁热,今天我们继续讲es6其他几个非常有用的新特性。转载 2017-02-09 12:08:20 · 332 阅读 · 0 评论 -
babel将es6转换成es5
Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。这意味着,你可以现在就用ES6编写程序,而不用担心现有环境是否支持。下面是一个例子。// 转码前input.map(item => item + 1);// 转码后input.map(function (item) { return item + 1;});上原创 2017-02-10 11:18:26 · 6877 阅读 · 0 评论 -
Babel6.x的安装
1、首先安装babel-cli(用于在终端使用babel) npm install -g babel-cli 2、然后安装babel-preset-es2015插件 npm install --save babel-preset-es2015 注:Babel5版本默认包含各种转换插件,然而Babel6.x相关转换插件需要自己下载,如tran原创 2017-02-10 12:47:30 · 373 阅读 · 0 评论 -
React 源码剖析系列 - 不可思议的 react diff
目前,前端领域中 React 势头正盛,使用者众多却少有能够深入剖析内部实现机制和原理。本系列文章希望通过剖析 React 源码,理解其内部的实现原理,知其然更要知其所以然。React diff 作为 Virtual DOM 的加速器,其算法上的改进优化是 React 整个界面渲染的基础,以及性能提高的保障,同时也是 React 源码中最神秘、最不可思议的部分,本文从源码入手,深入剖析 React...转载 2018-06-19 15:56:45 · 217 阅读 · 0 评论