React 入门小结
前段时间用 Ant Design 做了一个项目,由于之前没有 React 基础,对于 ES6 也是一知半解,所以也是一边开发一边学习,好不容易把项目完成了,现在终于有时间沉下心来从头开始好好学一下 React 和 ES6,发现好多之前不懂的概念和思想现在都豁然开朗,正如《Iron Man》里面 Stark 说的"Run before you can walk",对于从事开发的工作者,这也算是一种很好的学习方式,即在实践中学习。那么下面就对 React 一些基础进行一个简单的归纳和小结。
React 涉及的主要概念:
- Component
- JSX
- Virtual DOM
- Data Flow
首先是 github 上 React 给出的一个例子:
import React, { Component } from 'react';
import { render } from 'react-dom'; class LikeButton extends Component {
constructor(props) {
super(props);
this.state = { liked: false };
} handleClick(e) {
this.setState({ liked: !this.state.liked });
} render() {
const text = this.state.liked ? 'like' : 'haven\'t liked';
return (
<p onClick={this.handleClick.bind(this)}>
You {text} this. Click to toggle.
</p>
);
}
} render(
<LikeButton />,
document.getElementById('example')
);
在这一段简单的代码中,基本上涉及到了 React 的主要的几个概念。
JSX
React 允许将 HTML 代码直接嵌入到 JS 代码中,对于长久以来一直被"表现与逻辑分离"的思想洗脑,要接受这种代码的书写方需要一定的过程,而一旦熟悉了这种在 JS 中支持 HTML 的写法,就会发现 JSX 的聪明之处。
传统的 MVC 是将模板放在其他地方,比如 <script>
标签或者模板文件,再在 JS 中通过某种手段引用模板(在Angular1中便是使用这种方式)。React 则把 HTML 模板直接嵌入到 JS 代码里面,做到了模板和组件的直接关联。
组件属性:为了和原生的 HTML 标签进行区分,组件变量使用大写开头,而且为了和原生属性以及 js 关键字区分,组件属性中的 class 要写成 className,submit 要写成 htmllType="submit" , for 要写成 "htmlFor",其他类推。
JS 表达式:组件属性中使用表达式,要用 {} 替换 " " ,同时在 JSX 进行注释要用 {} 包起来。
值得一提的是,对于长期使用 Sublime 的我,刚开始使用 JSX 也是十分的不适应,因为 sublime 没有自带对 JSX 语法的高亮插件,但是可以通过下载扩展插件来实现 JSX 的高亮,也就是—— Babel,下载方法就不说了,主要是在使用上,需要对需要高亮的文件进行设置,方法如下:
设置之后,便可以发现编辑器已经支持对 JSX 语法的高亮了:
Virtual DOM
当组件状态 state
有更改的时候,React 会自动调用组件的 render
方法重新渲染整个组件的 UI。但是如此大规模地操作 DOM ,会对性能造成很大的影响,因此 React 实现了一个 Virtual DOM,在 这个Virtual DOM 实现了一个 diff 算法,当 state 变化时,便通过 diff 寻找需要更新的节点,再把这个修改更新到浏览器的 DOM 节点上,相当于实现了局部的更新,在性能上比原生的 DOM 要快许多。
核心思想:封装组件
React 十分强调组件的概念,对于所有功能独立的模块都可以抽离成组件,然后在需要的地方 import ,降低了代码之间的耦合性,并且方便维护。
在React 中组件有两个概念:props 和 state。一个组件就是通过这两个属性的值在 render
方法里面生成这个组件对应的 HTML 结构。需要注意的是,一个组件只能有一个根节点(在这一点上,vue.js 也一样)
props:组件属性由外部通过 JSX 属性传入设置,比如由父组件传递过来的 id,通过路由获取到的 url 参数等等。props一旦设置完成,一般是不可更改的。
state:state
是组件的当前状态,可以把组件简单看成一个“状态机”,根据状态 state
呈现不同的 UI 展示。
一旦状态(数据)更改,组件就会自动调用 render
重新渲染 UI,这个更改的动作会通过 this.setState
方法来触发。
组件生命周期
装载
componentWillMount: 只会在装载之前调用一次,在 render
之前调用,你可以在这个方法里面调用 setState
改变状态,并且不会导致额外调用一次 render
componentDidMount:只会在装载完成之后调用一次,在 render
之后调用,从这里开始可以通过 ReactDOM.findDOMNode(this)
获取到组件的 DOM 节点。
更新
- componentWillReceiveProps
- shouldComponentUpdate
- componentWillUpdate
- componentDidUpdate
卸载
- componentWillUnmount
Data Flow
React 的架构方式是单向的数据绑定,在之前的开放过程中没有直接使用到这个功能,但是 Ant Design 组件已经封装好了大量的具有数据绑定功能的组件,因此使用起来也十分方便,在之后的项目中,随着应用的逐步扩大和复杂,单向数据绑定会变得十分实用。
React 入门小结的更多相关文章
- React入门 (1)—使用指南(包括ES5和ES6对比)
前言 本篇会简明扼要的介绍一下React的使用方法.代码会用JSX+ES5和JSX+ES6两种方式实现. React简介 React来自Facebook,于2013年开源.至今不断修改完善,现在已经到 ...
- react入门(3)
在第一篇文章里我们介绍了jsx.组件.css写法 点击查看react入门(1) 第二篇文章里我们介绍了事件.this.props.children.props....other.map循环 点击查 ...
- react入门(1)
这篇文章也不能算教程咯,就算是自己学习整理的笔记把. 关于react一些相关的简介.优势之类的,随便百度一下一大堆,我就不多说了,可以去官网(http://reactjs.cn/)看一下. 这片主要讲 ...
- react入门(2)
接着上一次的讲,如果没有看过上一篇文章的小伙伴可以先看一下http://www.cnblogs.com/sakurayeah/p/5807821.html React事件 可以先看一下官网讲解的内容h ...
- react入门(4)
首先还是来回顾一下前三篇讲的内容 react入门(1): jsx,组件,css写法 react入门(2):事件,this.props.children,props,...other react入门(3 ...
- react学习小结(生命周期- 实例化时期 - 存在期- 销毁时期)
react学习小结 本文是我学习react的阶段性小结,如果看官你是react资深玩家,那么还请就此打住移步他处,如果你想给一些建议和指导,那么还请轻拍~ 目前团队内对react的使用非常普遍,之 ...
- React 入门实例教程(转载)
本人转载自: React 入门实例教程
- React 入门实例教程
现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...
- React入门简单实践
参考文献: 1.React入门示例教程——阮一峰 2.React仅仅只是你的界限 React主要的优点就是增量更新(虚拟DOM)和组件化(状态机). <!DOCTYPE html> < ...
随机推荐
- centos配置npm全局安装
使用-g全局安装在服务器需要配置,下面看看配置方法 配置全局安装路径和缓存路径 cd /usr/local/nodejs mkdir node_global mkdir node_cache npm ...
- scrapy编写爬虫的时候出现缺少win32api
环境:python3.6 工具:pycharm2017.3 scrapy fetch http://www.baidu.com ModuleNotFoundError: No module named ...
- Android面试收集录 蓝牙与WiFi
1.打开手机中的蓝牙功能有哪些方法? 法1:使用Intent ==>new Intent(BluetoothAdaper.ACTION_REQUEST_ENABLE); startActivi ...
- Ubuntu无法安装vim怎么办?(Ubuntu 出现apt-get: Package has no installation candidate问题)
apt-get install vim 正在读取软件包列表... 完成 正在分析软件包的依赖关系树 正在读取状态信息... 完成 有一些软件包无法被安装.如果您用的是不稳定(unstable)发行版, ...
- uber司机已经激活了,就是还没有上传头
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- 安装和配置Sentry(收录)
安装和配置Sentry 本文主要记录安装和配置Sentry的过程,关于Sentry的介绍,请参考 Apache Sentry架构介绍 . 1. 环境说明 系统环境: 操作系统:CentOs 6.6 H ...
- Spring+quartz cron表达式(cron手册官方)完美理解
------------------------------------- 15 17/1 14/3 * * ? 从每小时的17分15秒开始 每分钟的15秒执行一次14:17:15 ...14:59: ...
- python基础训练营04-函数
任务四 函数的关键字 函数的定义 函数参数与作用域 函数返回值 一.函数的关键字: def 二.函数的定义: 在Python中,定义一个函数要使用def语句,依次写出函数名.括号.括号中的参数和冒号 ...
- android:保存用户名密码等应用程序数据
转自http://blog.sina.com.cn/s/blog_a73687bc0101dsjj.html (一)使用SharedPreferences 1.保存信息: SharedPrefere ...
- Long Short-Term Memory (LSTM)
Long Short-Term Memory (LSTM) Outline Background LSTM Network Extended LSTM LST ...