码迷,mamicode.com
首页 > 其他好文 > 详细

React学习记录-1-组件生命周期

时间:2019-11-24 19:34:05      阅读:73      评论:0      收藏:0      [点我收藏+]

标签:sse   href   状态   obj   clear   使用   前端框架   ret   https   

前言

准备学习前端。
从【反动君】的文章中,我知道了系统性学习这个词语。
他说的是很对的。系统性学习,是很难的。
作为一个在技术公司做综合工作的人,我产生了系统性学习技术的兴趣。
就从前端开始吧。
先确立学习的方法论。
我的方法是:系统性学习分为有限数量的点,将每个点都理解,贴上标签,划分优先级,排列分布。最终才产生应用的价值。

class Clock extends React.Component{
  constructor(props){
    super(props);
    this.state = {date:new Date()};
  }

  componentDidMount(){
    this.timerID = setInterval(() => this.tick(),1000);
  }

  componentWillUnmount(){
    clearInterval(this.timerID);
  }

  tick(){
    this.setState({date:new Date()});
  }

  render(){
    return(
      <div>
        <h1>Hello,world!</h1>
        <h2>现在是{this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }

  ReactDOM.render(
    <Clock />,
    document.getElementById('example')
  );
}

这是菜鸟教程的这篇文章中的代码。

第一个问题:React.Component是什么意思?

在React前端框架当中,有一个组件的概念。
这个组件是可以两种定义的形式:类(class)函数

既然有两种形式,那么怎么决定,什么时候用哪一种呢?
这可以作为一个【待确认问题】。
首先可以确定的是,class组件目前是提供了更多的功能。

如果是定义class组件,就是上面代码中的如下部分:

class Clock extends React.Component{
  constructor(props){
    super(props);
    this.state = {date:new Date()};
  }

这里extends英文翻译是延伸的意思,可以引申为继承的意思。
第一句话,是说有一个类Clock,是继承自React.Component的。
也就是说,Clock是React.Component的子类。

这里Component就是组件的意思。
React.Component好像是所有组件类的爹的样子。
它是所有组件类的爹,它最牛逼。
Component的源代码在ReactBaseClasses.js中。

上面的代码,就是创建了一个Clock组件了。

第二个问题:什么是DOM?

DOM,是document object model的缩写。
意思是文档对象模型。
本意上,它是一种接口(API),类似一种操作方法。
比如说HTML DOM就是访问和操作HTML文档的标准方法。
但是,在一般性的表达中,DOM还具有一层经常使用的指代意思。
就是DOM就是文档

在【第一个问题】中,我们是创建了React的组件。
组件是一个类,是一个对象,所以,组件是有实例的。

当组件实例被创建并插入到DOM当中的时候。
这句话中,我就可以理解DOM,指代的就是文档。

第三个问题:什么是组件的生命周期?

组件的生命周期,有几个阶段:挂载更新卸载错误处理
组件的每个阶段都包含生命周期方法

注意:加粗的,都是组件常用的生命周期方法。不加粗的,不常用。

1. 挂载

当组件实例被创建,并且插入到DOM当中的时候,这个过程叫做挂载。
组件挂载的生命周期方法的调用顺序如下:

  • constructor()//constructor英文是构造器的意思。
  • static getDerivedStateFromProps() //Derive英文是从...中获得。从Props中获得派生状态(State)。
  • render() //render英文意思是提供,提出,使成为的意思。
  • compenentDidMount()//Mount英文的意思,是安装...于高处的意思。翻译为挂载。

我看挂载的顺序就是构造 - 获取派生状态 - 提供 - 安装

2. 更新

当组件的props或state发生变化的时候,会触发更新。

props是属性?state是状态?

组件更新的生命周期方法调用顺序如下:

  • static getDerivedStateFromProps() //从props当中获得派生状态
  • shouldComponentUpdate() // 判断组件是否应该更新
  • render() //提供
  • getSnapshotBeforeUpdate() // 组件更新前获得快照(Snapshot)
  • componentDidUpdate() //组件实施更新

3. 卸载

当组件从DOM当中移除的时候,会调用如下的方法:

  • componentWillUnmount() //组件将会卸载

4. 错误处理

当渲染过程,生命周期,或子组件的构造函数中抛出错误时,会调用如下方法:

  • static getDerivedStateFromError() //从Error中获得派生状态。
  • componentDidCatch() //组件执行捕获异常

到了这里,我基本上能够看懂:【前言】代码中componentDidMount()和componentWillUnmount()
这两个函数,都是生命周期方法,一个是挂载的,一个是卸载的。
这两个方法被叫做【生命周期钩子】。
constructor()和render()也是生命周期方法。
但是代码里面的内容,我还是不太理解。

小结

为了使我的问题点,能够有清晰的界限。我先决定一篇文章,就记录3个问题。
主要是理解了【前言】代码中的几个函数的作用。
对这一段代码的完全理解,还没有达到。

React学习记录-1-组件生命周期

标签:sse   href   状态   obj   clear   使用   前端框架   ret   https   

原文地址:https://www.cnblogs.com/gnuzsx/p/11923570.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!