ES6和React知识思想

JSX：创建ReactElement的便捷写法。（JS对象来表述DOM元素）
ReactElement:一种轻量级、无状态、不可改变的DOM元素的虚拟表述。
Babel：让你写的爽支持最新ES6语法，
VertualDOM：JS对象来表述DOM元素
Flux : facebook提出的前端应用架构模式，核心概念是单向数据流
Dispatcher:

Action：JavaScript对象。信息载体

Store

Redux:是js的状态容器，提供可预测的状态管理。

1、单一数据源：整个应用的state存储在js对象中，Redux使用store存储整个state。
2、state是只读的。只能通过action修改
3、使用纯函数执行修改

reducer:接收先前的state和action，返回新的state。reducer可以拆分为多个，分别操作state的不同部分

reducer中，整个程序的数据存储在唯一一个object中。

无状态函数式组件

为了创建纯展示组件，这种组件只负责根据传入的props来展示，不涉及到要state状态的操作。

在大部分React代码中，大多数组件被写成无状态的组件，通过简单组合可以构建成其他的组件等；这种通过多个简单然后合并成一个大应用的设计模式被提倡。

无状态函数式组件形式上表现为一个只带有一个render方法的组件类，通过函数形式或者ES6 arrow function的形式在创建，并且该组件是无state状态的。具体的创建形式如下：

function HelloComponent(props, /* context */) {  return <div>Hello {props.name}</div>}ReactDOM.render(<HelloComponent name="Sebastian" />, mountNode) 

无状态组件的创建形式使代码的可读性更好，并且减少了大量冗余的代码，精简至只有一个render方法，大大的增强了编写一个组件的便利，除此之外无状态组件还有以下几个显著的特点：

1、组件不会被实例化，整体渲染性能得到提升
因为组件被精简成一个render方法的函数来实现的，由于是无状态组件，所以无状态组件就不会在有组件实例化的过程，无实例化过程也就不需要分配多余的内存，从而性能得到一定的提升。

2、组件不能访问this对象
无状态组件由于没有实例化过程，所以无法访问组件this中的对象，例如：this.ref、this.state等均不能访问。若想访问就不能使用这种形式来创建组件

3、组件无法访问生命周期的方法
因为无状态组件是不需要组件生命周期管理和状态管理，所以底层实现这种形式的组件时是不会实现组件的生命周期方法。所以无状态组件是不能参与组件的各个生命周期管理的。

4、无状态组件只能访问输入的props，同样的props会得到同样的渲染结果，不会有副作用

无状态组件被鼓励在大型项目中尽可能以简单的写法来分割原本庞大的组件，未来React也会这种面向无状态组件在譬如无意义的检查和内存分配领域进行一系列优化，所以只要有可能，尽量使用无状态组件。

eg:
React当中的listview

---

React.createClass

React.createClass是react刚开始推荐的创建组件的方式，这是ES5的原生的JavaScript来实现的React组件，其形式如下：

const InputControlES5 = React.createClass({    propTypes: {//定义传入props中的属性各种类型        initialValue: React.PropTypes.string    },    defaultProps: { //组件默认的props对象        initialValue: ''    },    // 设置 initial state    getInitialState: function() {//组件相关的状态对象        return {            text: this.props.initialValue || 'placeholder'        };    },    handleChange: function(event) {        this.setState({ //this represents react component instance            text: event.target.value        });    },    render: function() {        return (            <div>                Type something:                <input onChange={this.handleChange} value={this.state.text} />            </div>        );    }});InputControlES6.propTypes = {    initialValue: React.PropTypes.string};InputControlES6.defaultProps = {    initialValue: ''};

React.Component

React.Component是以ES6的形式来创建react的组件的，是React目前极为推荐的创建有状态组件的方式，最终会取代React.createClass形式；相对于 React.createClass可以更好实现代码复用。将上面React.createClass的形式改为React.Component形式如下：

class InputControlES6 extends React.Component {    constructor(props) {        super(props);//在ES6中，在子类的constructor中必须先调用super才能引用this,super(props)的目的：在constructor中可以使用this.props        // 设置 initial state        this.state = {            text: props.initialValue || 'placeholder'        };        // ES6 类中函数必须手动绑定        this.handleChange = this.handleChange.bind(this);    }    handleChange(event) {        this.setState({            text: event.target.value        });    }    render() {        return (            <div>                Type something:                <input onChange={this.handleChange}               value={this.state.text} />            </div>        );    }}InputControlES6.propTypes = {    initialValue: React.PropTypes.string};InputControlES6.defaultProps = {    initialValue: ''};

1、只要有可能，尽量使用无状态组件创建形式。
2、否则（如需要state、生命周期方法等），使用React.Component这种es6形式创建组件
3、能用React.Component创建的组件的就尽量不用React.createClass形式创建组件。

state设计原则

最小化原则：创建尽量多的无状态组件，这些组件唯一关心的是渲染数据。在这些组件的外层，应该有一个包含state的父组件。父组件专门助理各种事件、交流逻辑、修改state。子组件只关心传入属性。

DOM操作

大多数情况下使用setState更新UI。有些情况需要访问DOM结构。

---

let 声明变量，代码块内有效。适合for循环。

const：声明常量，声明后值不可变。变量名不指向数据，而是指向数据地址，数据可变地址不可变。

const foo={};
foo.prop=123;
foo.prop//123
foo={}//TypeError：“foo is read-only”

跨模块常量
export const A=1;

全局变量
window.a=1;

let const声明的不属于全局变量

---

容器组件使用 connect() 方法连接 Redux

我们用 react-redux 提供的 connect() 方法将“笨拙”的 Counter 转化成容器组件。connect() 允许你从 Redux store 中指定准确的 state 到你想要获取的组件中。这让你能获取到任何级别颗粒度的数据。

让我们看下，我们拥有一个 的展示组件，它有一个通过 props 传过来的值，和一个函数 onIncrement，当你点击 “Increment” 按钮时就会调用这个函数：

import { Component } from 'react';export default class Counter extends Component {  render() {    return (      <button onClick={this.props.onIncrement}>        {this.props.value}      </button>    );  }}

containers/CounterContainer.js

import { Component } from 'react';import { connect } from 'react-redux';import Counter from '../components/Counter';import { increment } from '../actionsCreators';// 哪些 Redux 全局的 state 是我们组件想要通过 props 获取的？function mapStateToProps(state) {  return {    value: state.counter  };}// 哪些 action 创建函数是我们想要通过 props 获取的？function mapDispatchToProps(dispatch) {  return {    onIncrement: () => dispatch(increment())  };}export default connect(  mapStateToProps,  mapDispatchToProps)(Counter);

connect后面第二个括号是要添加prop的react组件，第一个括号中的参数是用来改变该组件prop的方法，第一个括号有两个参数，第一个参数是一个函数，返回一个对象，对象的键是该组件的prop属性，值是该prop的值；第二个参数也是一个函数，返回一个对象，对象的键同样是prop的属性名，值是一个redux的dispatch，当这个prop属性被用于触发时，dispatch会改变redux中state的值。