初识react

【转】react是一个js框架，类似于jquery，但是他做了很大的变化，它将利用jsx语法，将结构（html）和（js）合并在一起，这里会有人好奇，好不容易分离的，为什么又和在一起了呢，这是因为用脚本操作dom的代价很昂贵，有个贴切的比喻，把DOM和JavaScript各自想象为一个岛屿，它们之间用收费桥梁连接，js每次访问DOM，都要途径这座桥，并交纳“过桥费”,访问DOM的次数越多，费用也就越高。 因此，推荐的做法是尽量减少过桥的次数，努力待在ECMAScript岛上。因为这个原因react的虚拟dom就显得难能可贵了，它创造了虚拟dom并且将它们储存起来，每当状态发生变化的时候就会创造新的虚拟节点和以前的进行对比，让变化的部分进行渲染。整个过程没有对dom进行获取和操作，只有一个渲染的过程，所以react说是一个ui框架

1.react组件化

react组件很明显由dom视图和state数据组成，state的状态决定着视图的状态，这和mvc的开发有着区别，react只负责ui的渲染，react只根据setState来控制试图的更新，setState会自动调用render函数，触发试图的重新渲染，组件就是拥有独立功能的视图模块，许多小的组件合并成一个大的组件，而整个页面也就是由不同的组件合并而成，当我们是使用组件其实是对class Hello的实例化，相当于new Hello()这里有三点需要注意1.组件的名字需要大写是为了区别html自己的标签，也可以说成是区别内置组件2.由于es6中的class成为类的关键字，所以样式部分class改为className 3.类和模块内部均采用严格模式，所以不需要指定use strict 运行模式

2.react中的diff算法

当组件更新时候，react会创建一个新的虚拟dom,并且会和之前存储的dom进行比较，这个比较就是运用的diff算法，所以组件的初始化使用不到该算法，react提出一种假设，相同的节点具有类似的结构，不同的节点具有不同的结构，在这种假设上进行逐层的比较，如果发信啊对应的结点是不同的，就直接删除原来的节点以及该节点包含的所有子节点，然后替换成新节点，如果是新节点则进行属性的更改，而patch算法就是进行修改的算法

3.组件的生命周期

理解该图很重要，也就大致理解了react的工作原理，当我们声明一个组件，首先进行组件的初始化工作，也就是在构造函数中，将该有的数据初始化（state），componentWillMount()组件初始化时只调用，以后组件更新不调用，整个生命周期只调用一次，此时可以修改state，然后 render()react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行。此时就不能更改state了，componentDidMount()，组件渲染之后调用，可以通过this.getDOMNode()获取和操作dom节点，只调用一次，shouldComponentUpdate(nextProps, nextState)react性能优化非常重要的一环。组件接受新的state或者props时调用，我们可以设置在此对比前后两个props和state是否相同，如果相同则返回false阻止更新，因为相同的属性状态一定会生成相同的dom树，这样就不需要创造新的dom树和旧的dom树进行diff算法对比，节省大量性能，尤其是在dom结构复杂的时候。不过调用this.forceUpdate会跳过此步骤，componentWillUnmount()组件将要卸载时调用，一些事件监听和定时器需要在此时清除

4.react-router路由

Router就是React的一个组件，它并不会被渲染，只是一个创建内部路由规则的配置对象，根据匹配的路由地址展现相应的组件，Route则对路由地址和组件进行绑定，点击页面切换的过程变为当我点击link标签，会先发生url的地址改变，当router监听到地址改变，就会根据route中的path去找匹配然后跳转到相应的component，另一个就是单页面应用，当点击一个按钮切换到另一个部分应用的时候平时是需要向后台发送数据，然后前台获得数据操作dom，而react-router只是按需加载相应的js文件到页面中

5.组件之间的通信

react推崇单项数据流，自上而下进行数据的传递如果是父->子，直接调用props属性，如果是子->父则需要在父组件上设置回调函数当作属性传递给儿子，儿子直接调用函数从而和父组件通信，而兄弟之间无法直接通信，他们只能利用同一层的上级作为中转，状态提升，传递信息

6.redux(这个目前还没用到，啊哈哈，先把解释贴着，留给日后)

注原文：https://github.com/bailicangdu/react-pxq

1.关于react的思考

2.react几个你可能疑惑点

3.react源码解析（组件声明与初始化）

4. react源码解析（组件的挂载）