React学习笔记(一)——综述篇
章节索引
前言
在大学的时候,我曾有过学习前端的打算,也付诸过行动。但最终因为一个“居中”的问题数个小时没有搞定,以失败告终。从此对前端的东西有了偏见,很长一段时间对其不屑一顾,抑或是望而却步。甚至当时设计我截至目前最引以为豪的作品时,把它“巧妙”地设计成了一个“借用”现成页面的纯后端系统。
但最终,我还是说服了自己。后端的技术再美妙,也需要前端的展现。当然,前端的完美交互体验也离不开后端的支持。——这两者是相辅相成的。
因此在几个月前有了重新学习前端的打算,这回抱的是再难也要给它“嗑”出来的决心。所幸,随着这几年的技术革新,学习成本已经不像当时那么高,有了优秀的框架,实现起来也不再那么困难。
React是什么
根据我的学习和了解,React是Facebook公司开源出来的一款前端框架,它可以提高前端开发的效率。
详细的介绍请往:
React应用的生命周期
之前在学习很多框架的时候,没有主动关注过生命周期,只是有需要借助生命周期实现的功能时才去查。但后来才知道,生命周期中包含了一个框架的实现原理,也往往是面试官喜欢问的。
从图中可以看到,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。可被多次调用。
-
- 卸载阶段
-
componentWillUnmount
:组件卸载前被调用,只被调用一次。
-
一般情况下,不常用生命周期方法。实现一些特殊的需求时就会用到,如页面挂载前发异步请求去获取要渲染的数据等。
系列博文
React学习笔记(二)——基础实现篇
React学习笔记(三)——路由篇
React学习笔记(四)——前端数据加密篇
React学习笔记(五)——SCSS篇
后记
通过一段时间的学习与实践,我终于做出了自己的第一个网站,每天都为它增加一些功能的感觉真的很好!