React学习笔记(一)——综述篇

react

章节索引

  • 前言
  • React是什么
  • React应用的生命周期
  • 系列博文
  • 后记


前言

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

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

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


React是什么

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

  • React-百度百科
  • React官方中文文档


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学习笔记(四)——前端数据加密篇

React学习笔记(五)——SCSS篇


后记

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

以上是 React学习笔记(一)——综述篇 的全部内容, 来源链接: utcz.com/z/383693.html

回到顶部