React学习笔记（一）——综述篇

react

在大学的时候，我曾有过学习前端的打算，也付诸过行动。但最终因为一个“居中”的问题数个小时没有搞定，以失败告终。从此对前端的东西有了偏见，很长一段时间对其不屑一顾，抑或是望而却步。甚至当时设计我截至目前最引以为豪的作品时，把它“巧妙”地设计成了一个“借用”现成页面的纯后端系统。

但最终，我还是说服了自己。后端的技术再美妙，也需要前端的展现。当然，前端的完美交互体验也离不开后端的支持。——这两者是相辅相成的。

因此在几个月前有了重新学习前端的打算，这回抱的是再难也要给它“嗑”出来的决心。所幸，随着这几年的技术革新，学习成本已经不像当时那么高，有了优秀的框架，实现起来也不再那么困难。

根据我的学习和了解，React是Facebook公司开源出来的一款前端框架，它可以提高前端开发的效率。
详细的介绍请往：

之前在学习很多框架的时候，没有主动关注过生命周期，只是有需要借助生命周期实现的功能时才去查。但后来才知道，生命周期中包含了一个框架的实现原理，也往往是面试官喜欢问的。

从图中可以看到，React应用的生命周期分为4个大的阶段：

初始化阶段：
- getDefaultProps：获取父组件传来的参数，即constructor方法传入的props。
- getInitialState：获取组件的初始状态信息，即通过this.state={...}为组件设置的初始状态。

挂载阶段：
- componentWillMount：组件挂载到DOM树之前调用，仅被调用一次。
- render：渲染组件，可在组件的props或state发生变化时被多次调用。
- componentDidMount：组件挂载到DOM树之后调用，仅被调用一次。

更新阶段：
- componentWillReceiveProps(nextProps)：nextProps是父组件传入的新Props。可随着父组件传入Props的改变被调用多次。
- shouldComponentUpdate(nextProps, nextState)：根据nextProps与this.props、nextState与this.state的对比，判断组件的props和state是否发生了变化，即是否需要更新组件。可被调用多次。
- componentWillUpdate(nextProps, nextState)：组件发生更新前被调用，nextProps, nextState表示新的props和state。可被多次调用。
- componentDidUpdate(prevProps, prevState)：组件发生更新后被调用，prevProps, prevState表示更新前的props和state。可被多次调用。

一般情况下，不常用生命周期方法。实现一些特殊的需求时就会用到，如页面挂载前发异步请求去获取要渲染的数据等。

React学习笔记（一）——综述篇

React学习笔记（二）——基础实现篇

React学习笔记（三）——路由篇

React学习笔记（四）——前端数据加密篇

React学习笔记（五）——SCSS篇

通过一段时间的学习与实践，我终于做出了自己的第一个网站，每天都为它增加一些功能的感觉真的很好！