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

第一章 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文件

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import './index.css';
  4. // import App from './App';
  5. import ClickCounter from './ClickCounter'
  6. // import * as serviceWorker from './serviceWorker';
  7.  
  8. // ReactDOM.render(<App />, document.getElementById('root'));
  9.  
  10. ReactDOM.render(<ClickCounter />, document.getElementById('root'))

第二步:

  创建一个ClickCounter.js文件

  1. import React, {Component} from 'react'
  2. class ClickCounter extends Component{
  3. constructor(props){
  4. super(props)
  5. this.onClickButton = this.onClickButton.bind(this)
  6. this.state = {count:0}
  7. }
  8.  
  9. onClickButton(){
  10. this.setState({count:this.state.count + 1})
  11. }
  12.  
  13. render() {
  14. return (
  15. <div>
  16. <button onClick={this.onClickButton}>Click Me</button>
  17. <div>
  18. Click Count: {this.state.count}
  19. </div>
  20. </div>
  21. )
  22. }
  23. }
  24.  
  25. 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. 洛谷 P1383 高级打字机==codevs 3333 高级打字机

    P1383 高级打字机 18通过 118提交 题目提供者yeszy 标签倍增图论高级数据结构福建省历届夏令营 难度省选/NOI- 提交该题 讨论 题解 记录 最新讨论 暂时没有讨论 题目描述 早苗入手 ...

  2. python-----文件自动归类

    如何移动文件? →  使用内置模块来实现 归类的规则是什么? → 手动(预设文件夹)/ 自动(创建文件夹) import shutil import os path = './' #由于这里是相对路径 ...

  3. IDEA中Spark读Hbase中的数据

    import org.apache.hadoop.hbase.HBaseConfiguration import org.apache.hadoop.hbase.io.ImmutableBytesWr ...

  4. 9. Ext基础1 -- Ext中 getDom、get、getCmp的区别

    转自:https://blog.csdn.net/huobing123456789/article/details/7982061 要学习及应用好Ext框架,必须需要理解Html DOM.Ext El ...

  5. matlab绘制曲线对比图

    >> clear;>> x1=[0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8];>> y1=[0,0.55,0.69,0.86,0.93,0. ...

  6. bzoj 1671: [Usaco2005 Dec]Knights of Ni 骑士【bfs】

    bfs预处理出每个点s和t的距离d1和d2(无法到达标为inf),然后在若干灌木丛格子(x,y)里取min(d1[x][y]+d2[x][y]) /* 0:贝茜可以通过的空地 1:由于各种原因而不可通 ...

  7. [Swift]通天遁地Swift

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  8. 列表框、分组列表框、标签(label)、分组框(fieldset)、框架(frameset)

    列表框(select) 下拉列表,用户可以从一些可选项中选择. 示例:简单的下拉列表 <select name="country"> <option value= ...

  9. C#与正则表达式的例子

    一个很好的文章,但是并没有测试 连接

  10. Winform学习知识汇总

    引用博客 http://www.cnblogs.com/peterzb/archive/2009/06/14/1502918.html