React学习笔记之九:生命周期

2024-02-22 13:11:58

9. React的生命周期

具体的代码可以参考我的github

现在我们已经可以使用React实现一些东西了:
这里提供两个例子:

来谈谈JSX和React的生命周期

JSX
React生命周期

1. 一个简单的React组件的JSX原理


// 简单的Header
class Header extends Component {
  render() {
    return <div>你好</div>;
  }
}

这个简单的Header组件是通过React进行虚拟DOM的渲染生成渲染的DOM模板

JSX简单原理


class Header2 extends Component {
  render() {
    return React.createElement(
      'div',
      { className: 'title' },
      React.createElement('span', null, '你好')
    );
  }
}

Notes: React将这个过程进行扩展，使得JS中能够生成HTML模板，这种具有HTML标签的Javascript对象，可以称为JSX

JSX编译过程

2. React的生命周期


// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

// App.js

import React, { Component } from 'react';

// 利用JSX生成一个网组件中写HTML
class Header extends Component {
  render() {
    return <div>你好</div>;
  }
}

// JSX具体在做什么
class Header2 extends Component {
  render() {
    return React.createElement(
      'div',
      { className: 'title' },
      React.createElement('span', null, '你好')
    );
  }
}

export default class App extends Component {
  render() {
    return (
      <div>
        <Header />
        <Header2 />
      </div>
    );
  }
}

现在已知在App.js部分会将JSX代码进行编译，已经完成了将JSX编译为javascript结构对象，接下来就是在index.js中通过RectDOM.render将javascript结构对象渲染成真正的DOM结构了

其过程如下：

具体过程可以参考React生命周期示意图

参考博文 React生命周期

初始化阶段(intialization)

constructor():

实现组件对象状态state函数的初始化，包括props, state,在这个生命周期的函数中，一般做一些state的初始化。类比Vue中的created

挂载阶段(mounting)

componentWillMount():

在DOM元素挂载前,此时state的变化不会引起DOM的变化，因为DOM元素还没有被渲染挂载。类比Vue中的beforeMount

render():

DOM元素的渲染，这里是组件的渲染过程，这个渲染过程当DOM中的元素发生变化的时候就会调用

componentDidMount():

组件挂载完毕，此时所有DOM均挂载到页面上。类比Vue中的mounted

更新阶段(Updation)

先明确下react组件更新机制。setState引起的state更新或父组件重新render引起的props更新，更新后的state和props相对之前无论是否有变化，都将引起子组件的重新render。

componentWillReceiveProps:当子组件绑定父组件的属性发生更改的时候,会触发这个生命周期函数

componentWillUpdate: 当组件开始更新之前调用的生命周期函数

render: 每次更新后都会重新进行渲染

componentDidUpdate: 组件更新完毕

Notes:
React几个声明周期的作用：

1-constructor: 一般做组件内部状态的初始化

2-componentWillMount: 一般ajax数据的拉取，定时器的启动等等

3-componentDidMount: 有一些操作是要在DOM加载完成后在执行的，可以写在componentDidMount里面

4-componentWillUnmount: 一般卸载页面后有一些定时器的清除等工作，用于页面的优化设计

码农公寓