react class

1.（简单了解）类（class）组件的缺点

import React, { Component } from "react";

export default class Button extends Component {
  constructor() {
    super();
    this.state = { buttonText: "Click me, please" };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState(() => {
      return { buttonText: "Thanks, been clicked!" };
    });
  }
  render() {
    const { buttonText } = this.state;
    return <button onClick={this.handleClick}>{buttonText}</button>;
  }
}

2. 函数钩子

React Hooks 的设计目的，就是加强版函数组件，完全不使用"类"，就能写出一个全功能的组件。

Hook 这个单词的意思是"钩子"。

React Hooks 的意思是，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码"钩"进来。 React Hooks 就是那些钩子。

3. 了解-函数式组件和类组件的区别

**React 16.8 版本之前**

- 函数式组件中没有this,不能有自己的state,也不能有生命周期函数
- 类组件中可以有this,state,生命周期函数

**React 16.8之后**

- 函数式组件加入了Hook, 仍然没有this
- 但是函数式组件可以通过新的Hook来实现state和生命周期函数

4. 函数组件中常用Hook

• useState
  
  useEffect
  
  useRef
  
  useContext

  5.1 useState

• useState用法

• useState()  用于为函数组件引入状态（state）。纯函数不能有状态，所以把状态放在钩子里面。

• • import {useState} from 'react';

  
  const Test = () => {
      // useState的参数为状态初始值
      // useState的返回值是一个数组
      // 数组第一个成员是变量，第二个成员是函数，用来更新状态，约定是set前缀加上状态的变量名
      const [num,setNum] = useState(1)
      return (
          <div>
              <div>访问num: {num}</div>
              <button onClick={()=>setNum(num+1)}>修改state</button>
          </div>
      );
  }
  export default Test

   

5.2 useEffect副作用钩子

import { useState, useEffect } from 'react';
const Test = () => {
    const [num, setNum] = useState(1)
    const [msg, setMsg] = useState('a')
    const [list, setList] = useState([])

    //1. 只有个参数-------------------------------------
    // 组件初始化自动执行一次，之后每更新一次执行一次
    // 类似 componentDidUpdate
    useEffect(()=>{
        console.log('没有第二个参数，多次执行');
    })

    //2. 第二个参数为空数组-------------------------------
    //等价于 componentDidMount , 只在初始化时执行一次
    useEffect(()=>{
        console.log('第二个参数为空数组，只执行一次');
    },[])

    // 3. 第二个参数为state------------------------------
    // 初次执行后，只有该state改变时再次执行
    useEffect(()=>{
        console.log('第二个参数为state数据，数据改变一次执行一次');
    },[num])

    // 4.回调函数内部又return一个函数------------------------
    //return的回调 等价于 componentWillUnmount() 组件卸载时
    useEffect(()=>{
        return ()=>{
            console.log('组件卸载时');
        }
    },[])
    
    return (
        <div>
            <div>访问num: {num}</div>
            <button onClick={() => setNum(num + 1)}>修改num</button>
            <hr/>
            <div>访问msg: {msg}</div>
            <button onClick={() => setMsg(msg + 'm')}>修改msg</button>
        </div>
    );
}
export default Test

在父组件中实现组件卸载

import Test from './Test'
import { useState } from 'react';

const App = () => {
  const [flag,setFlag] = useState(true)
  return ( 
    <div>
      {/* 单击按钮，卸载组件 */}
      <button onClick={()=>{setFlag(false)}}>删除Test</button>
      { flag ? <Test></Test> : null}
    </div>
   );
}

 

5.3 useRef

useRef用来保存引用值

使用useRef后，有一个.current属性， 该属性不会引发组件重新渲染。

保持临时变量不丢失（引用的闭包原理）, 绑在dom或组件上方便实现组组件通信和dom节点的访问

import { useRef , useEffect} from "react";

const Test = () => {
    //1. 创建引用实例
    const btnRef = useRef()
    useEffect(()=>{
        //3. 通过实例的current属性即可访问DOM对象
        btnRef.current.focus()
    },[])
    return (
        <div>
            {/* 2. 给DOM元素添加ref属性,值为useRef创建的实例 */}
            <input type="text"  ref={btnRef}/>
        </div>
    );
}
export default Test

5.4 useContext 跨层级组件通信

如果需要在组件之间共享状态，可以使用useContext()

1. 使用 React Context API，在组件外部建立一个 Context Context因为需要其它组件共享，所以要单独导出

export const AppContext = React.createContext()   

利用父组件状态钩子，创建共享状态

const [city,setCity] = useState('郑州')   

提供了一个 Context 对象，这个对象可以被子组件共享

<AppContext.Provider value={{city,setCity}}>
    Test---{city}
    <hr/>
    <Child></Child>
</AppContext.Provider>

4、在后代组件中引入Context,

import {AppContext} from './Test'

5.useContext()钩子函数用来引入 Context 对象，从中获取所需要的状态

import React,{useContext} from 'react';
......
const {city,setCity} = useContext(AppContext)

完整案例
context.js
import React from 'react'
export const AppContext = React.createContext()   

Parent.js

import { createContext, useState } from 'react'
import Child from './Child'
import { AppContext } from './context'
const Parent = () => {
    const [city, setCity] = useState('郑州')
    return (
        <AppContext.Provider value={{ city, setCity }}>
            Parent---{city}
            <hr />
            <Child></Child>
        </AppContext.Provider>
    );
}
export default Parent;

Child.js

import GrandSon from './GrandSon'
const Child = () => {
    return ( 
        <div>
            Child
            <hr/>
            <GrandSon></GrandSon>
        </div>
     );
} 
export default Child;

import React, { useContext } from 'react';
import { AppContext } from './context'

const GrandSon = () => {
    const { city, setCity } = useContext(AppContext)
    return (
        <div>
            GrandSon-----{city}
            <div><button onClick={() => { setCity('广州') }}>改变城市</button></div>
            <hr />
        </div>
    );
}
export default GrandSon;

GrandSon.js