目录

一 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组件已经更新

//卸载阶段