react redux学习之路

React 自学

chapter one React新的前端思惟方式

React的首要思想是经过组件(Component)来开发应用。所谓组件，简单说，指的是可以完成某个特定功能的独立的、可重用的代码。

基于组件的应用开发是普遍使用的软件开发模式，用分而治之的方法，把一个大的应用分解成若干的小组件，每一个组件只关注某个小范围的特定功能，可是把组件组合起来，就能构成一个功能庞大的应用。若是分解功能的过程足够巧妙，那么每一个组件能够在不一样场景下重用，那样不光能够构建庞大的应用，还能够构建出灵活的应用。打个比方，每一个组件是一块砖，而一个应用是一座楼，想要一次锻造就构建一座楼是不现实的。实际上，老是先锻造不少砖，经过排列组合这些砖，才能构建伟大的建筑。

React很是适合构建用户交互组件。

jsx 是进步仍是退步？

多年来，业界一直流行三次分离，即html(结构)、css(表现)、js(逻辑)分离，通常会写在不一样的文件之中。
而jsx把相似HTML的标记语言和javascript混在一块儿了，可是，随着时间的推移，业界分离的认识有了改变，将html,css,js这三种语言分在三种不一样的文件里面，其实是把不一样技术分开管理了，而不是逻辑上的“分而治之”。

html之中的onclick与jsx之中的onClick的区别：

• onclick添加的时间处理函数是在全局环境下执行的，这污染了全局环境，很容易产生意料不到的后果；
• 给不少DOM袁术添加onclick时间，可能会影响网页的性能，毕竟，网页须要的时间处理函数越多，性能就会越低；
• 对于使用onclick的DOM元素，若是要动态地从DOM树中删除的话，须要把对应的时间处理器注销，加入忘了注销，就可能形成内存泄露，这样的bug，很难被发现。

在jsx之中，onClick挂载的每一个函数，均可以控制在组件范围内，不会污染全局空间。
咱们在jsx中看到了一个组件使用了onClick，但并无产生直接使用onclick的html，而是使用了事件委托(event delegation)的方式处理点击事件，不管有多少个onClick出现，其实最后都只在DOM树上添加了一个事件处理函数，挂载在最顶层的DOM节点上。全部的点击事件都被这个事件处理函数捕获，而后根据具体组件分配给特定函数，使用事件委托的性能固然比每一个onClick都挂载一个事件处理函数要高。

由于React控制了组件的生命周期，咱们还能够在React组件中定义样式。

分解Reac应用

React的理念，归结为一个公式，就像下面这样：

UI = render(data)

用户看到的界面（UI），应该是一个函数render执行结果，只接受数据(data)做为参数。这个函数是一个纯函数，所谓纯函数，指的的是没有任何反作用，输出彻底依赖于输入的函数，两次函数调用若是输入相同，获得的结果也绝对相同。如此一来，最终的用户界面，在render函数肯定的状况下彻底取决于输入数据。
对于开发者来讲，重要的是区分开那些是属于data，哪些属于render，想要更新用户界面，要作的就是更新data，用户界面天然会作出相应，因此react实际的也是“响应式编程”(reactive programming)的思想，这也就是react为何叫作react的缘由。

Virtual Dom

既然react应用就是经过重复渲染来实现用户交互，你可能会有一个疑惑:这样的重复渲染会不会效率过低了呢?在jQuery的实现方式中，咱们能够清楚地看到每次只有须要变化的哪个DOM元素被修改了；但是，在react的实现方式中，看起来每次render函数被调用，都须要把整个组件从新绘制一次，这样看起来有点浪费。

事实并非这样，react利用virtual dom，让每次渲染都只从新渲染最少的DOM元素。要了解virtual dom，就要先了解dom，dom是结构话文本的抽象表达式，特定于web环境中，这个结构化文本就是html文本，html中的每一个元素都对应dom中某个节点，这样，由于html元素的逐级包含关系，dom节点天然就构成了一个树形结构，成为DOM树。

浏览器为了渲染html格式的网页，会先将html文本解析以构建dom树，而后根据dom树渲染出用户看到的界面，当要改变界面内容的时候，就去改变dom树上的节点。

web前端开发关于性能优化有一个原则：尽可能减小DOM操做。虽然dom操做也只式一些简单的javascript语句，可是dom操做会引发浏览器对网页进行从新布局，从新绘制，这就是一个比javascript语句执行慢不少的过程。

若是使用mustache或者hogan这样的模板工具，那就是生成html字符串赛到网页中，浏览器又要作一次解析生产新的DOM节点，而后替换DOM树上对应的子树部分，这个过程的确定效率不高。虽然jsx看起来很像是一个模板，可是最终会被babel解析为一条条建立react组件或者html元素的语句，神奇之处在于，react并非经过这些语句直接构建DOM树，而是首先构建virtual dom。

既然dom树是对html的抽象，那virtual dom就是对dom树的抽象。virtual dom不会触及浏览器部分，只是存在于javascript空间的树形结构，每次自上而下渲染react组件时，会对比这一次产生的virtual dom和上一次渲染的virtual dom，对比就会发现差异，而后修改真正的dom树时就只须要初级差异中的部分就行。

jquery的方式直观易懂，对于初学者十分适用，可是当项目逐渐变得庞大时，用jquery写出的代码每每互相纠缠，不一样的事件直接修改dom元素。

使用react的方式，就能够避免构建这样复杂的程序结构，不管何种事件，引起的都是react组件的从新渲染，至于如何只修改必要的dom部分，则彻底交给react去操做，开发者并不须要关系。react利用函数式编程的思惟来解决用户界面渲染的问题，最大的优点式开发者的效率会大大提升，开发出来的代码可维护性和可阅读性也大大加强。

chapter two 设计高质量的react组件

做为一个合格的开发者，不要只知足于编写出了能够运行的代码，而要了解代码背后的工做原理；不要只知足于本身编写的程序可以运行，还要让本身的代码可读并且易于维护。这样才能开发出高质量的软件。

做为软件设计的通则，组件的划分要知足高内聚（high cohesion）和低耦合（low coupling）的原则。

高内聚指的式把逻辑紧密的相关内容放在一个组件中。用户界面无外乎内容、交互行为和样式。传统上，内容由html表示，交互行为放在javascript代码文件中，样式放css文件中定义。这虽然知足一个功能模块的须要，却要放在三个不一样的文件中，这其实不知足高内聚的原则。react却不是这样，展现内容的jsx、定义行为的javascript代码，甚至定义样式的css，均可以放在一个javascript文件中，由于他们原本就是为了实现一个具体的目的而存在的，因此说react天生具备高内聚的特色。

低耦合指的式不一样组件之间的依赖关系要尽可能弱化，也就是每一个组件要尽可能独立。保持整个系统的低耦合度，须要对系统中的功能有充分的认识，而后根据功能点划分模块，让不一样的组件去实现不一样的功能，这个功夫还在开发者身上，不过，react组件的对外接口很是规范，方便开发者设计低耦合的系统。

react组件的数据

"差劲的程序要操心代码，优秀的程序要操心数据结构和他们之间的关系。"

react组件的数据分为两种，prop和state，不管prop或者state的改变，均可能引起组件的从新渲染，那么，设计一个组件的时候吗，何时选择prop何时选择用state呢？原则很简单，prop是组件对外的接口，state是组件内部的状态，对外用prop，内部用state。

每一个react组件都是独立存在的模块，组件以外的一切都是外部世界，外部世界就是经过prop来和组件对话的。
当prop的类型不是字符串类型时，在jsx中必须使用花括号{}把prop值包住，因此style的值有两层花括号，外层花括号表明是jsx的语法，内层的花括号表明这是一个对象常量。

react中的prop

prop 传值分析：

class Counter extends Component {
    constructor(props){
        super(props);

        this.onClickIncrementButton = this.onClickIncrementButton.bind(this);
        this.onClickDecrementButton = this.onClickDecrementButton.bind(this);

        this.state = {
            count:props.initValue || 0;
        }
    }       
}

若是一个组件须要定义本身的构造函数，必定要记得在构造函数的第一行经过super调用父类也就是React.Component的构造函数。若是在构造函数中没有调用super(props),那么组件实例被构造以后，类实例的全部成员函数就没法经过this.props访问到父组件传递过来的props值。很明显，给this.props赋值是React.Component构造函数的工做之一。

在Counter的构造函数中还给哦i昂贵成员绑定了当前this的执行环境，由于es6方法构造的react组件类并不自动给咱们绑定this到当前实例对象。在构造函数的最后，咱们能够看到读取传入prop的方法，在构造函数中能够经过参数props得到传入prop值，在其余函数中则能够经过this,props访问传入的prop的值，好比在counter组件的render函数中，咱们就是经过this.props得到传入的caption ,render函数代码以下：

render(){
    const { caption } = this.props;
    return <div>
                <button style={buttonStyle} onClick={this.onClickIncrementButton}>+</button>
                <button style={buttonStyle} onClick={this.onClickDecremnetButton}>-</button>
                <span>{caption} count:{ this.state.count } </span>
           </div> 
}

react的state

驱动组件渲染过程的除了prop，还有state,state表明组件的内部状态。因为react组件不能修改传入的prop，因此须要i记录自身数据变化，就要使用state。
一般在组件类的构造函数结尾出初始化state,在counter构造函数中，经过this.state的赋值完成了对组件state的初始化。代码以下：

constructor(props){
    // ...
    this.state = {
        count:props.initValue || 0;
    }
}

于2017.10.2

differences between react element and react component

react elements are plain objects.They describe what you want to see on the screen.React elements are inmutable .Once you create an element,you can't change its children or attributes.An element is like a single frame in a movie :it represents the UI at a certain point in time.

react components are like Javacript functions.they accept arbitrary inputs (called "props") and return react elements describing what should appear on the screen.

functional and class components

React componets must act like pure functions with repect to their props.
Locak state is exactly that:a feature available only to a Class.

什么是组件

可以完成某个特定功能的独立可重用的代码。基于组件是普遍使用的软件开发模式，是分而治之的方法。把大的应用分解成为若干个小的组件，每一个组件专一某个特定的功能。把组件合起来就可以成为一个功能庞大的应用。若是组件功能分解足够巧妙，每一个组件能够在不一样的场景下重用，能够构建出庞大灵活的应用。

prop

当外部世界传递一些数据给React组件，一个最直接的方式就是经过prop;一样React组件要反馈数据给外部数据，也能够用prop，由于Prop的类型限于纯数据，也能够是函数，函数类型的prop等于让父组件交给子组件一个毁掉函数，子组件在恰当的实际调用函数的类型prop，能够带上必要的参数，这样就能够反过来把信息传递给外部的世界。
哈哈:看到这里，不由想到了一个例子，一个也是在别处调用的状况，就是常见的跨域方式，如jsonp，script标签请求的数据就返回就是回掉一个以前已经定义好的函数。对于后端的数据处理来讲，是至关于一个黑匣子。对于父子组件而言，也至关一个黑匣子里面调用数据。两个例子都是一个回掉函数的做怪。常言到，函数是代码的分割，此话可当真。