深入浅出的react和redux读书笔记1

一、React新的前端思维方式

第一章：主要简单的介绍了下通过create-react-app来创建自己的react组件吧； create-react-app是通过npm发布的安装包，确认node和npm安装好了之后，执行→npm install --global create-react-app 就可以了。
安装create-react-app之后，可以通过执行→ create-react-app 加上“文件夹名字” 就可以创建默认的react组件了。

※1. import 是es6语法中的导入文件块的方式。es6语法是一个大集合。大部分语法功能都被最新的浏览器支持。

※2.component作为组件的基类，提供了很多组件共有的功能 例如→ class ClickCounter extends Component{ } ：就是创建一个clickcounter组件，component是clickcounter的父类。

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() {
    const counterStyle = {
      margin: '16px'
    }
    return (
      <div style={counterStyle}>
        <button onClick={this.onClickButton}>Click Me</button>
        <div>
          Click Count: <span id="clickCount">{this.state.count}</span>
        </div>
      </div>
    );
  }
}

export default ClickCounter;

※3.import React ，{Component} from "react"; 需要知道的是，在有jsx的时候，必须要导入React。因为jsx最终会被转译依赖于React的表达式。
（所谓的jsx是JavaScript的语法扩展，让我们在JavaScript中可以编写像html一样的代码；React判断一个元素是HTML还是jsx原则就是看第一个字母是否大写，所以组件要注意首字母大写。）

※4. 也就是react的奥义理念吧 归结为一个公式（数据驱动渲染）：
UI= render（data）；函数为纯函数，什么是纯函数，就是正经函数，没其他多余副作用，输出完全依赖于输入的函数。

※5.Dom树是html的抽象，而Virtual Dom就是对Dom树的抽象。
（virtual Dom不会触及浏览器的部分，只存在于JavaScript空间的树形结构，每次自上而下的渲染React组件的时候，会对比这一次产生的Virtual Dom 和上一次的Virtual Dom，对比就会发现差别，然后修改真正的DOM树时就只需要触及差别中的部分就可以了）