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

第一章 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. aarch64-linux-gnu交叉编译Qt4.7.3

    到 Qt 官网下载合适的 Qt 版本,地址:http://download.qt-project.org/archive/qt/ 1.环境搭建: 1.安装automake.libtool 和主机上的 ...

  2. ubuntu14安装docker-ce

    先卸载旧的docker sudo apt-get remove docker docker-engine docker.io docker-ce 通过HTTPS使用存储库(repository) su ...

  3. luogu 3958 奶酪

    noip2017 D2T1 奶酪 某zz选手没有想到可以用并查集来做,直接用了dijskstra,结果被ccf老爷机卡成了70分 题目大意: 现有一块大奶酪,它的高度为 h,它的长度和宽度我们可以认为 ...

  4. go语言---slice

    go语言---slice https://blog.csdn.net/cyk2396/article/details/78893420 一.数组切片的使用: //1.基于数组创建数组切片 var ar ...

  5. bzoj1537

    dp+树状数组 一维排序,一维离散化,然后跑lis,其实就是一个二维偏序 #include<bits/stdc++.h> using namespace std; ; int dp[N], ...

  6. 使用WinSXS进行系统盘瘦身Windows 7/2008/10/2012不断变大的C盘(Windows 更新清理)

    这是一款非常给力的国产良心小工具,用阿里云ECS的时候,一个C盘没多久就被坑爹的微软更新沉余文件塞满.此工具简单好用一下搞定! 操作系统: 所有 NT 6.X 内核的操作系统.比如 Windows V ...

  7. bzoj 1666: [Usaco2006 Oct]Another Cow Number Game 奶牛的数字游戏【模拟】

    模拟 #include<iostream> #include<cstdio> using namespace std; int n,ans; int main() { scan ...

  8. Final关键字解析

    final 在 Java 中是一个保留的关键字,可以声明变量.方法.类. 什么是final变量 / 类 / 方法? 任何变量前被 final 修饰就是 final 变量,定义的类前被 final 修饰 ...

  9. hdu2032

    http://acm.hdu.edu.cn/showproblem.php?pid=2032 #include<stdio.h> #include<math.h> #inclu ...

  10. E - A^B mod C (大数乘方取模)

    Description Given A,B,C, You should quickly calculate the result of A^B mod C. (1<=A,B,C<2^63) ...