第一讲 react的基础—安装 特点 组件 生命周期

目录

一 React的解释

 二 安装和运行

三 特点

四 react的组件

1.函数组件

2. 类组件

3.区别

  生命周期


一 React的解释

React是用于构建用户页面的JavaScript库

 二 安装和运行

  1. npm install
  2. npm start

三 特点

  • 构建用户界面的javascript库facebook脸书出品
  • facebook 脸书出品
  • 组件化,单向数据流,生命周期,虚拟dom,hooks

四 react的组件

1.函数组件

注意:

  • 函数名称必须以大写字母开头
  • 函数组件必须有返回值,表示该组件的结构
  • 如果返回值是null,表示不渲染任何内容
function App(){
    return <div> ... </div>
}
export default App;

2. 类组件

  • 类名称也必须以答谢字母开头
  • 类组件应该继承React.Component父类,从而可以使用父类中提供的方法或属性
  • 类组件必须提供render()方法
  • render()方法必须有返回值,表示该组件的结构
import React,{Componet} from 'react'

class App extends Componet {
    constructor(props){
        super(props)
    }
    state = {num:5}
   render(){
      return <div></div>
   }
}

export default App

3.区别

  • 函数组件通常展示,类组件通常做为容器
  • 类组件可以有state,管理数据用类组件,函组件没有state
  • 函组件没有this,类组件 有this
  • 函数组件没有生命周期,类组件有生命周期

五  生命周期

React的生命周期分为三个阶段:挂载期(也叫实例化期)、更新期(也叫存在期)、卸载期(也叫销毁期)。在每个周期中React都提供了一些钩子函数。
生命周期的描述如下:
挂载期:一个组件实例初次北创建的过程。
更新期:组件在创建后再次渲染的过程。
卸载期:组件在使用完后被销毁的过程。

挂载阶段

  •   constructor 构造函数
  •  static getDerivedstateFromProps
  • render渲染函数
  • componentDidMount组件已经挂载

更新阶段

  • static getDerivedStateFromProps
  • shouldcompoentUpdate组件是否更新
  •  render渲染
  •  getSnapshotBeforeUpdate更新前获取快照
  • componentDidupdate组件已经更新

 卸载阶段 

componentWillUnmount:当组件被卸载或者销毁了就会调用,我们可以在这个函数里去清除一些定时器,取消网络请求,清理无效的DOM元素等垃圾清理工作。

App.js

// App根节点
import Life from "./components/Life";

function App() {
    return (
        <div>
            <Life></Life>
        </div>
    )
}

export default App;

life.js 

import React, { Component } from 'react';

class Life extends Component {
    constructor(props) {
        super(props);
        console.log("挂载-01-constructor");
    }
    static getDerivedStateFromProps(nextProps, precState) {
        // 当组件的props发送变化时候, 执行回调函数
        // 当props更新用Props更新state

        // console.log("挂载-02-getDerivedStateFromProps");
        console.log("更新:01-getDerivedStateFromProps")
        return nextProps;
    }
    shouldComponentUpdate(nextProps, nextState) {
        console.log("更新:02 组件是否需要更新");
        return true; //通常用做优化组件,返回true更新,false不更新
    }
    state = { num: 5 }
    render() {
        // console.log("挂载-03-render选项");
        console.log("更新:03-render")
        return (<div>
            <h1>生命周期</h1>
            <button onClick={() => this.setState({ num: this.state.num + 1 })}>{this.state.num}</button>
        </div>);
    }
    getSnapshotBeforeUpdate(prevProps, prevState) {
        console.log("更新:04 getSnapshotBeforeUpdate")
        // 获取组件的快照,在更新前
        // 返回的值是下个生命周期的第单个参数
        return { name: "mimu", age: 17 }
    }
    componentDidUpdate(prevProps, prevState, snap) {
        // 组件已经更新
        console.log("更新:05componentDidUpdate", snap)
    }
    // componentDidMount() {
    //     console.log("挂载-04-组件已经挂载componentDidMount");
    //     //作用:操作dom,发起ajax ,添加事件,开启定时器
    // }
}

export default Life;

//三个阶段 componentDidMount组件挂载完毕
//挂载阶段
// 01 constructor 构造函数
// 02 static getDerivedstateFromProps
//03 render渲染函数
//04 componentDidMount组件已经挂载

//更新阶段
// 01 static getDerivedStateFromProps
// 02 shouldcompoentUpdate组件是否更新
// 03 render渲染
// 04 getSnapshotBeforeUpdate更新前获取快照
// 05 componentDidupdate组件已经更新

//卸载阶段

 


版权声明:本文为Fiki515原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。