通过本篇文章你可以对react的重点有个整体的认识。 关于react是什么，优点，解决什么问题等，网上一大推就不啰嗦了。
了解虚拟DOM的实现，参考这篇文章
[虚拟DOM](https://www.zhihu.com/question/29504639)
简单讲，其实就是用一个轻量级的dom结构(用js模拟实现)，来模拟重量级的dom结构，通过比对轻量级结构后，在操作重量级dom结构提高性能，从而到达性能优化的目的。
生命周期：快速学习react 先了解它的重中之重----生命周期， 一个组件在不同时期会调用不同时期的函数接口也就是对应的生命周期函数
装载时期的函数getDefaultProps（是设置默认props）getInitialState(废弃，设置默认State) 依次执行以下函数
• constructor
• componentWillMount
• render
• componentDidMount
更新时期的函数如果组件的数据有变化了（porp,state）， 依次执行以下函数
• componentWillReceiveProps
• shouldComponentUpdate
• componentWillUpdate
• render
• componentDidUpdate
卸载时期的函数销毁组件
•componentWillUnmount
1. import React,{ Component } from 'react'; 2. class Demo extends Component { 3. constructor(props) { 4. // 构造函数，要创造一个组件类的实例，会调用对应的构造函数， 5. //一个react组件需要构造函数，往往为了两个目的. 6. //1：初始化state.2.绑定成员函数this环境。 7. // 无状态的函数就不需要构造函数， 8. super(props) 9. console.log("---初始化组件---") 10. this.state = { 11. test:'想要显示一段不一样的文字' 12. //定义state，存放页面的数据，通过this.setState()方法修改 13. //.this.setState()函数所做的事情，首先是改变this.state的值，然后驱动组件经历更新过程，这样才有机会让this.state里新的值出现在界面上。 14. } 15. } 16. componentWillMount () { 17. console.log("---组件挂载前---最先执行的函数") 18. } 19. componentDidMount () { 20. console.log("---组件挂载后---") 21. } 22. componentWillReceiveProps (nextProps) { 23. console.log("---父组件重新渲染---") 24. 值得注意的是，更新时期的componentWillReceiveProps函数， 25. 只要父组件的render函数被调用，在render函数里面被渲染的子组件就会经历更新过程，不管父组件传给子组件的Props有没有改变，都会触发子组件的componentWillReceiveProps函数，但是自身的this.setState方法触发的更新过程不会调用这个函数。 26. } 27. shouldComponentUpdate (nextProps,nextState) { 28. console.log("---组件接受到重绘状态---") 29. 它决定了一个组件什么时候不渲染。 30. 在更新过程中shouldComponemtUpdata 返回 false那就立刻停止更新。 31. this.setState函数后会执行shouldComponemtUpdata 然后在决定我要不要更新。 32. 相反 shouldComponemtUpdata 函数返回 TRUE，接下来就会依次调用 33. componentWillUpdata,render,componetDidUpdata函数，它把render像夹心面包似得夹在了中间。 34. } 35. componentWillUpdate (nextProps,nextState) { 36. console.log("---组件将要更新---") 37. } 38. componentDidUpdate (prevProps,prevState) { 39. console.log("---组件更新完毕---") 40. } 41. render () { 42. console.log("---组件渲染---") 43. return ( 44. <div>{this.state.test}</div> 45. ) 46. } 47. componentWillUnmount () { 48. console.log("---组件销毁---") 49. } 50. } 51. export default Demo;