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

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

第一章 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树时只需要触及差别中的部分就行。