---恢复内容开始---

第一章 React新的前端思维方式

1.1 初始化一个React项目

1、安装create-react-app

npm install --global create-react-app

2、创建一个react项目

create-react-app 项目名称

3、进入项目目录

cd 项目名

4、启动项目

npm start

1.2 增加一个新的React组件

创建一个显示点击次数的组件

第一步:

  找到入口文件src/index.js,修改index.js文件

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';
import ClickCounter from './ClickCounter'
// import * as serviceWorker from './serviceWorker'; // ReactDOM.render(<App />, document.getElementById('root')); ReactDOM.render(<ClickCounter />, document.getElementById('root'))

第二步:

  创建一个ClickCounter.js文件

import React, {Component} from  'react'
class ClickCounter extends Component{
constructor(props){
super(props)
this.onClickButton = this.onClickButton.bind(this)
this.state = {count:0}
} onClickButton(){
this.setState({count:this.state.count + 1})
} render() {
return (
<div>
<button onClick={this.onClickButton}>Click Me</button>
<div>
Click Count: {this.state.count}
</div>
</div>
)
}
} export default ClickCounter

1.2.1 JSX

  JSX是JavaScript的语法扩展(eXtension),让我们在JavaScript中可以编写像HTML一样的代码。

ReactDOM.render(<App />, document.getElementById('root'));中的<App/>就是一段JSX的代码。
HTML和JSX的不同:
  1、组件可被直接应用在JSX中,使用方法和其他元素一样,这一点是传统HTML做不到的。
  2、React判断一个元素是HTML元素还是React组件的原则就是看第一个字母是否大写,如果在JSX中我们不用ClickCounter而是用clickCounter,那就得不到我们想要的结果。
  3、JSX的onClick事件处理方式和HTML的onclick有很大不同。
    HTML中直接使用onclick不专业的原因:
    1、onclick添加的事件处理函数是在全局环境下执行的,这污染了合局环境,很容易产生意料不到的后果;
    2、给很多DOM元素添加onclick事件,可能会影响页面的性能,毕竟,网页需要的事件得理函数越多,性能就越低;
    3、对于使用了onclick的DOM元素,如果要动态的从DOM树中删掉的话,需要把对应的时间处理器注销,假如忘了注销,就可能造成内存泄漏,这种bug很难发现。
  上面说的这些问题JSX中都不存在
  首先,onClick挂载的每个函数,都可以控制在组件范围内,不会污染全局空间。使用了事件委托(event delegation)的方式处理点击事件,无论有多少个onClick出现,都只在DOM树上添加了一个事件处理函数,挂在最顶层的DOM节点上。
1.3 分解React应用
执行npm run eject命令,完成‘弹射’操作,注意:eject是不可逆的
此时会增加两个目录,scripts,config

webpack.config.dev文件中会我了一部分关于babel的定义。

并不是所有 的浏览器都支持所有 ES6语法,但是有了 babel,我们就可 以不用顾忌 太多,因为 babel会把 ES6语法的 JavaScript代码转译( transpile) 成浏览器普遍支持的 JavaScript代码

1.4 React的工作方式

1.4.1 参考另一篇jquery和React比较

1.4.2 Virtual Dom

React的实现方式,看起来像每次reander函数被调用,都要把整个组件重新绘制一次,有点浪费,但事实不是这样,React利用Virtual DOM,让每次渲染都只重新渲染最少的DOM元素。

有关DOM的渲染请参考此文章,个人觉得还不错,都是干货:https://mp.weixin.qq.com/s/OErtV9FBxIJszxYbGUL3Vg

Virtual Dom之所以称之为虚拟DOM,是因为不会触及浏览器部分,只存在于javascript空间的树形结构,自上而下渲染React组件时,会对比这一次产生的Virtual DOM和上一次渲染的Virtual DOM,然后修改真正的DOM树时只需要触及差别中的部分就行。

第一章 React新的前端思维方式的更多相关文章

  1. web前端学习python之第一章_基础语法(二)

    web前端学习python之第一章_基础语法(二) 前言:最近新做了一个管理系统,前端已经基本完成, 但是后端人手不足没人给我写接口,自力更生丰衣足食, 所以决定自学python自己给自己写接口哈哈哈 ...

  2. web前端学习python之第一章_基础语法(一)

    web前端学习python之第一章_基础语法(一) 前言:最近新做了一个管理系统,前端已经基本完成, 但是后端人手不足没人给我写接口,自力更生丰衣足食, 所以决定自学python自己给自己写接口哈哈哈 ...

  3. React开发实时聊天招聘工具 -第一章

    第一章 课程道学 6个页面 弱化css Antd-mobile作为组件库 Redux 状态管理 React-Router 路由 Axios异步请求 后端Express框架 Socket.io 数据库: ...

  4. 第一章、前端之html

    目录 第一章.前端之html 一. html介绍 第一章.前端之html 一. html介绍 web服务本质 import socket sk = socket.socket() sk.bind((& ...

  5. Android群英传》读书笔记 (1) 第一章 Android体系与系统架构 + 第二章 Android开发工具新接触

    第一章 Android体系与系统架构 1.Dalvik 和 ARTDalvik好比是一辆可折叠的自行车,平时是折叠的,只有骑的时候,才需要组装起来用.ART好比是一辆组装好了的自行车,装好就可以骑了. ...

  6. WEBGL 2D游戏引擎研发系列 第一章 <新的开始>

    WEBGL 2D游戏引擎研发系列 第一章 <新的开始> ~\(≥▽≤)/~HTML5游戏开发者社区(群号:326492427) 转载请注明出处:http://html5gamedev.or ...

  7. 萌新接触前端的第一课——HTML

    HTML web服务本质(好吧这个先不用知道也可以) import socket def main(): sock = socket.socket(socket.AF_INET, socket.SOC ...

  8. (转)iOS Wow体验 - 第一章 - iOS人机界面设计规范纵览

    本文是<iOS Wow Factor:Apps and UX Design Techniques for iPhone and iPad>第一章译文精选,其余章节将陆续放出. 关于本套译文 ...

  9. 《JavaScript高级程序设计(第3版)》阅读总结记录第一章之JavaScript简介

    前言: 为什么会想到把<JavaScript 高级程序设计(第 3 版)>总结记录呢,之前写过一篇博客,研究的轮播效果,后来又去看了<JavaScript 高级程序设计(第3版)&g ...

随机推荐

  1. Cholesky分解 平方根法

    一种矩阵运算方法,又叫Cholesky分解.所谓平方根法,就是利用对称正定矩阵的三角分解得到的求解对称正定方程组的一种有效方法.它是把一个对称正定的矩阵表示成一个下三角矩阵L和其转置的乘积的分解.它要 ...

  2. 李维对VCL理解的几个错误

    研读深入浅出VCL一书的时候,有不少地方被网友提出疑问,而且似乎是网友们正确.但这丝毫不动摇李维在大中华Delphi界的江湖地位,因为高手应该是对整个系统理解的高手,而不是对某一个疑问的高手.能花巨量 ...

  3. css3 3d特效汇总

    本篇全是实战,没有基础,如果不明白3d特效的原理,可能会看不懂,不过没关系,给你推荐一下 张鑫旭css3 3d转换,或者看我的另一篇博客  css3 2d转换3d转换以及动画的知识点汇总,看完这些3d ...

  4. 【Dairy】2016.11.5

    橘子洲一游

  5. linux下的C语言开发 进程创建 延伸的几个例子

    在Linux下面,创建进程是一件十分有意思的事情.我们都知道,进程是操作系统下面享有资源的基本单位.那么,在linux下面应该怎么创建进程呢?其实非常简单,一个fork函数就可以搞定了.但是,我们需要 ...

  6. [置顶][终极精简版][图解]Nginx搭建flv mp4流媒体服务器

    花了我接近3周,历经了重重问题,今日终于把流媒体服务器搞定,赶紧的写个博文以免忘记... 起初是跟着网上的一些教程来的,但是说的很不全面,一些东西也过时不用了(比如jwplayer老版本).我这次是用 ...

  7. 698C

    Description n个视频,长度为k的缓存,每次询问,每个视频以pi的概率被选,如果不在缓存区则加入,如果缓存区满了,则最先进缓存的出来,问10^100次操作以后每个视频在缓存的概率 Input ...

  8. 手推Apriori算法------挖掘频繁项集

    版权声明:本文为博主原创文章,未经博主允许不得转载. Apriori算法: 使用一种称为逐层搜索的迭代方法,其中K项集用于搜索(K+1)项集. 首先,通过扫描数据库,统计每个项的计数,并收集满足最小支 ...

  9. sshfs把远程主机的文件系统映射到本地的目录中(转载)

    转自:http://www.fwolf.com/blog/post/329 windows之外的世界比想像中要大得多呢,几乎天天都在用ssh,却到今天才知道有sshfs这个好东西,前几天还在为Zend ...

  10. E20180124-hm

    introspection n.自我反省; 反省,内省; capacity n. 容量; 性能; 才能; 生产能力; synthesize vt. 综合; 人工合成; (通过化学手段或生物过程) 合成 ...