前端开发react和redux的学习

React组件

1) es6的class类可以看作是构造函数的一个语法糖，
2) extends实现了类之间的继承，组件的生命周期函数就是从这来的
3) constructor是构造器，在实例化对象时调用，
4) super调用了父类的constructor创造了父类的实例对象this，然后用子类的构造函数进行修改

有三点值得注意：
1、定义类名字的首字母必须大写
2、因为class变成了关键字，类选择器需要用className来代替。
3、类和模块内部默认使用严格模式，所以不需要用use strict指定运行模式。

组件的生命周期

组件在初始化时会触发5个钩子函数：
1、getDefaultProps()
// 设置默认的props，也可以用dufaultProps设置组件的默认属性。
2、getInitialState()
// 在使用es6的class语法时是没有这个钩子函数的，可以直接在constructor中定义this.state。此时可以访问this.props。
3、componentWillMount()
// 组件初始化时只调用，以后组件更新不调用，整个生命周期只调用一次，此时可以修改state。
4、 render()
// react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行。此时就不能更改state了。
5、componentDidMount()
// 组件渲染之后调用，可以通过this.getDOMNode()获取和操作dom节点，只调用一次。

在更新时也会触发5个钩子函数：
6、componentWillReceivePorps(nextProps)
// 组件初始化时不调用，组件接受新的props时调用。
7、shouldComponentUpdate(nextProps, nextState)
// react性能优化非常重要的一环。组件接受新的state或者props时调用，我们可以设置在此对比前后两个props和state是否相同，如果相同则返回false阻止更新，因为相同的属性状态一定会生成相同的dom树，这样就不需要创造新的dom树和旧的dom树进行diff算法对比，节省大量性能，尤其是在dom结构复杂的时候。不过调用this.forceUpdate会跳过此步骤。
8、componentWillUpdata(nextProps, nextState)
// 组件初始化时不调用，只有在组件将要更新时才调用，此时可以修改state
9、render()
10、componentDidUpdate()
// 组件初始化时不调用，组件更新完成后调用，此时可以获取dom节点。
11、componentWillUnmount()
// 组件将要卸载时调用，一些事件监听和定时器需要在此时清除。

React-Router路由

Router就是React的一个组件，它并不会被渲染，只是一个创建内部路由规则的配置对象，根据匹配的路由地址展现相应的组件。
Route则对路由地址和组件进行绑定
Route可以向绑定的组件传递7个属性：children，history，location，params，route，routeParams，route
children（以路由的包涵关系为区分的组件）
location（包括地址，参数，地址切换方式，key值，hash值）
当页面比较多时,初次渲染的速度就会很慢,react配合webpack进行按需加载,Route的component改为getComponent，组件用require.ensure的方式获取，并在webpack中配置chunkFilename。
javascript 代码

组件之间的通信

组件层级嵌套到比较深，可以使用上下文getChildContext来传递信息，这样在不需要将函数一层层往下传，任何一层的子级都可以通过this.context直接访问。
兄弟关系的组件之间无法直接通信，它们只能利用同一层的上级作为中转站。而如果兄弟组件都是最高层的组件，为了能够让它们进行通信，必须在它们外层再套一层组件，这个外层的组件起着保存数据，传递信息的作用，这其实就是redux所做的事情。
组件之间的信息还可以通过全局事件来传递。不同页面可以通过参数传递数据，下个页面可以用location.param来获取。其实react本身很简单，难的在于如何优雅高效的实现组件之间数据的交流。

Redux

redux并不是必须的，它的作用相当于在顶层组件之上又加了一个组件，作用是进行逻辑运算、储存数据和实现组件尤其是顶层组件的通信
react-redux提供了connect和Provider两个好基友,它们一个将组件与redux关联起来，一个将store传给组件。组件通过dispatch发出action，store根据action的type属性调用对应的reducer并传入state和这个action，reducer对state进行处理并返回一个新的state放入store，connect监听到store发生变化，调用setState更新组件，此时组件的props也就跟着变化。
connect，Provider，mapStateToProps,mapDispatchToProps是react-redux提供的，redux本身和react没有半毛钱关系，它只是数据处理中心，没有和react产生任何耦合，是react-redux让它们联系在一起。
redux以及react-redux到底是怎么实现的

先说说redux：
redux主要由三部分组成：store，reducer，action。
store是一个对象，它有四个主要的方法：
1、dispatch:
// 用于action的分发——在createStore中可以用middleware中间件对dispatch进行改造，比如当action传入dispatch会立即触发reducer，有些时候我们不希望它立即触发，而是等待异步操作完成之后再触发，这时候用redux-thunk对dispatch进行改造，以前只能传入一个对象，改造完成后可以传入一个函数，在这个函数里我们手动dispatch一个action对象，这个过程是可控的，就实现了异步。
2、subscribe：
// 监听state的变化——这个函数在store调用dispatch时会注册一个listener监听state变化，当我们需要知道state是否变化时可以调用，它返回一个函数，调用这个返回的函数可以注销监听。
let unsubscribe = store.subscribe(() => {console.log(‘state发生了变化’)})
3、getState：
// 获取store中的state——当我们用action触发reducer改变了state时，需要再拿到新的state里的数据，毕竟数据才是我们想要的。getState主要在两个地方需要用到，一是在dispatch拿到action后store需要用它来获取state里的数据，并把这个数据传给reducer，这个过程是自动执行的，二是在我们利用subscribe监听到state发生变化后调用它来获取新的state数据，如果做到这一步，说明我们已经成功了。