react 知识点整理（三）

上一篇

十二、react的生命周期

挂载

挂载-01- constructor构造函数

constructor(props) {
    super(props);
    this.state = { num: 5 };
    // console.log("挂载-01- constructor构造函数");
  }

挂载-02-getDerivedStateFromProps

 static getDerivedStateFromProps(props, state) {
     console.log("挂载-02-getDerivedStateFromProps从最新props更新state");
    // get 获取Derived送达State状态from从Props属性
    return state;
  }

挂载-03-render 渲染

  render() {
       console.log('挂载-03-render 渲染');
    return (
      <div>
        <h1>react生命周期</h1>
        <button onClick={(e) => this.setState({ num: this.state.num + 1 })}>
          {this.state.num}
        </button>
        <Life num={this.state.num}></Life>
      </div>
    );
  }

挂载-04-componentDidMount组件完毕

  componentDidMount() {
    //组件已经挂载
    //component组件Did已经Mount挂载
    //Ajax请求，可以获取dom节点，事件监听，定时器
    console.log("挂载-04-componentDidMount组件完毕");
  }

更新

更新-01-getDerivedStateFromProps

static getDerivedStateFromProps(props, state) {
    // get 获取Derived送达State状态from从Props属性
    // console.log("更新-01-getDerivedStateFromProps从最新props更新state");
    return state;
  }

更新-02-shouldComponentUpdate

shouldComponentUpdate(nextProps, nextState) {
     console.log("更新-02-shouldComponentUpdate");
    //返回 true 允许组件更新视图,否则不允许
    //should 是否 Component组件 update更新
    return true;
  }

更新-03-render 渲染

 render() {
     console.log("更新-03-render 渲染");
    return (
      <div>
        <h1>react生命周期</h1>
        <button onClick={(e) => this.setState({ num: this.state.num + 1 })}>
          {this.state.num}
        </button>
        <Life num={this.state.num}></Life>
      </div>
    );
  }

更新-04 getSnapshotBeforeUpdate

getSnapshotBeforeUpdate(prevProps, prevState) {
    // console.log("更新-04 getSnapshotBeforeUpdate更新前获取快照");
    //返回一个值，是componentDidupdate第三个参数
    return { name: "mumu", age: 18 };
  }

更新-05 componentDidUpdate

 componentDidUpdate(prevProps, prevState, snap) {
    // console.log("更新-05  componentDidUpdate组件已经更新", snap);
  }

卸载

componentDidMount() {
    //组件已经挂载
    //component组件Did已经Mount挂载
    //Ajax请求，可以获取dom节点，事件监听，定时器
    console.log("挂载-04-componentDidMount组件完毕");
  }

完整代码

import React, { Component } from "react";
//在APP中引入life
import Life from "./Life.js";
class APP extends Component {
  constructor(props) {
    super(props);
    this.state = { num: 5 };
    // console.log("挂载-01- constructor构造函数");
  }

  static getDerivedStateFromProps(props, state) {
    // console.log("挂载-02-getDerivedStateFromProps从最新props更新state");
    // get 获取Derived送达State状态from从Props属性
    // console.log("更新-01-getDerivedStateFromProps从最新props更新state");
    return state;
  }
  shouldComponentUpdate(nextProps, nextState) {
    // console.log("更新-02-shouldComponentUpdate");
    //返回 true 允许组件更新视图,否则不允许
    //should 是否 Component组件 update更新
    return true;
  }

  componentWillUnmount() {
    //组件将要卸载
    //component 组件 will 将要 Unmont 卸载
    //移除dom监听，停止定时器
  }
  render() {
    //   console.log('挂载-03-render 渲染');
    // console.log("更新-03-render 渲染");
    return (
      <div>
        <h1>react生命周期</h1>
        <button onClick={(e) => this.setState({ num: this.state.num + 1 })}>
          {this.state.num}
        </button>
        <Life num={this.state.num}></Life>
      </div>
    );
  }
  getSnapshotBeforeUpdate(prevProps, prevState) {
    // console.log("更新-04 getSnapshotBeforeUpdate更新前获取快照");
    //返回一个值，是componentDidupdate第三个参数
    return { name: "mumu", age: 18 };
  }
  componentDidUpdate(prevProps, prevState, snap) {
    // console.log("更新-05  componentDidUpdate组件已经更新", snap);
  }
  componentDidMount() {
    //组件已经挂载
    //component组件Did已经Mount挂载
    //Ajax请求，可以获取dom节点，事件监听，定时器
    // console.log("挂载-04-componentDidMount组件完毕");
  }
}

export default APP;

Life中的代码

import React, { PureComponent } from "react";
//PureComponent保障了优化的下限
class Life extends PureComponent {
  constructor(props) {
    super(props);
    this.state = { n: 100 };
  }
  static getDerivedStateFromProps(props, state) {
    console.log("props要更新");
    return state;
  }
  render() {
    console.log("子组件渲染render");
    return (
      <div>
        <h3>life子组件</h3>
        <p onClick={() => this.setState({ n: this.state.n + 1 })}>
          接收的num:{this.state.n}
        </p>
      </div>
    );
  }
}

export default Life;

十三、reactHook

定义：让函数组件模拟类组件的生命周期和state

01、useState

import { useState } from "react";
//useState 使用状态state 模拟class组件的state
function App() {
  //定义num和设置num的方法从useState 默认值是10
  const [num, setNum] = useState(10);
  return (
    <div>
      <button onClick={()=>setNum(num+1)}>{num}</button>
    </div>
  );
}
export default App;

02、useEffect

import { useState, useEffect } from "react";
//useState 使用状态state 模拟class组件的state
//useEffect使用副作用（模拟生命周期) 组件已经挂载，组件已经更新

function App() {
  //定义num和设置num的方法从useState 默认值是10
  const [num, setNum] = useState(10);
  const [str, setStr] = useState("我喜欢");
  //目标:把num存储起来,当组件创建完毕获取num

  const add = (e) => {
    setNum(num + 1);
    //存储起来
    localStorage.setItem("num", num);
  };
  useEffect(function () {
    console.log("组件已经挂载，组件已经更新");
    var n = localStorage.getItem("num") || 10;
    setNum(n * 1);
    return () => console.log("组件将要卸载");
  }, []);
  return (
    <div>
      <h1>Hook</h1>
      <button onClick={add}>{num}</button>
    </div>
  );
}
export default App;

03、useRef

import { useState, useEffect, useRef } from "react";
//useState 使用状态state 模拟class组件的state
//useEffect使用副作用（模拟生命周期) 组件已经挂载，组件已经更新
//useRef 引用dom

function App() {
  //定义num和设置num的方法从useState 默认值是10

  const [num, setNum] = useState(10);
  const [str, setStr] = useState("我喜欢");
  //目标:把num存储起来,当组件创建完毕获取num

  const add = (e) => {
    setNum(num + 1);
    //存储起来
    localStorage.setItem("num", num);
  };
  useEffect(
    function () {
      console.log("组件已经挂载，组件已经更新");
      var n = localStorage.getItem("num") || 10;
      setNum(n * 1);
      return () => console.log("组件将要卸载");
    },
    [num]
  );
  const inpRef = useRef();
  return (
    <div>
      <h1>Hook</h1>
      <button onClick={add}>{num}</button>
      <button onClick={(e) => setStr(str + "你的")}>{str}</button>
      <input type="text" ref={inpRef} />
      <button onClick={() => alert(inpRef.current.value)}>获取</button>
    </div>
  );
}
export default App;