react-Hook使用

一、hook

1.userState

useState 返回一对值(当前值，一个让你更新他的函数)

// 类组件实现方式
import React, { Component } from 'react';

// 常规的方式 在类组件中

class Hook extends Component {
    state = {
        count:1
    }
    render() {
        return (
            <div onClick={()=>{this.setState({count:2})}}>
                这是类组件-- hook                
            </div>
        );
    }
}

export default hook;

// 函数组件hook 实现方式 useState
import React,{userState} from 'react'


// useState 返回一对值(当前值，一个让你更新他的函数)

function FunC(){
    const [count,setCount] = userState(0);
    return (
        <div>
            这是函数组件hook--{count}
            <button onClick={()=>{setCount(count+1)}}>count + 1</button> 
        </div>
        
    )
}

2.useEffect

1、如果什么都不传，会在每次渲染后都执行，也就是说在第一次渲染之后和每次更新之后都会执行。
2、如果传一个空数组，那么就只会运行一次effect，并且effect内部的 props 和 state 会一直拥有其初始值。
3、如果传的是一个包含属性值的数组，那么只有当数组里的值发生变化的时候才会触发useEffect回调。

// 类组件实现方式
import React, { Component } from 'react';

// 常规的方式 在类组件中

class Hook extends Component {
    state = {
        count:1,
        type:'name'
    }
    componentDidMount(){
        if(this.count === 1){
            console.log('数字是1--ClassC');
        }
    }
    componentDidUpdate(){
        if(this.count === 1){
            console.log('数字是1--ClassC');
        }
    }
    handleSet = ()=>{
        const count1 = this.state.count += 1;
        this.setState({count:count1})
    }
    render() {
        return (
            <div>
                <button onClick={this.handleSet}>ClassC</button>
                这是类组件--hook{this.state.count}  
            </div>
        );
    }
}

export default Hook;

// 函数组件hook 实现方式 useEffect

import React,{useState,useEffect} from 'react'


// useState 返回一对值(当前值，一个让你更新他的函数)

/* 
    useEffect只接收一个参数 相当于 componentDidUpdate 和 componentDidMount
    useEffect接收两个参数 第二个参数是空数组相当于  componentDidMount 
    useEffect只接收两个参数 且第二数组中元素不为空相 当于 componentDidUpdate 和 componentDidMount 但只监听数组中元素

    useState 相当于
    componentWillUnmount componentDidUpdate componentDidMount

*/
function FunC(){
    const [count,setCount] = useState(0);
    useEffect(()=>{
        if(count === 1){
            console.log('数字是1--Func');
        }
    })

    return (
        <div>
            这是函数组件hook--{count}
            <button onClick={()=>{setCount(count+1)}}>count + 1</button> 
        </div>
        
    )
}

export default FunC;

3.useMemo

用来监听某个组件的状态是否变化

两个函数第一个参数回调函数

第二个函数 数组 具体监听那个元素

当组件类的某一个数据更改的时候 会触发 useMemo

import React,{useMemo,useState} from 'react'

function Child({count}){

    function changedCount1(){
        console.log(count + '--useMemo改变');
        return count + '--useMemo改变'
    }
	
    // 数据改变执行什么函数
    useMemo(()=>{changedCount1()},[count])

    return (
        <div>
            这是--child--useMemo--{count}
        </div>
        
    )
}

function UseMemo(){

    const [count,setCount] = useState(1)

    return (
        <div>
            这是--father--useMemo--{count}
            <button onClick={()=>{setCount(count+1)}}>count + 1</button> 
            <Child count={count} />
        </div>
        
    )
}

export default UseMemo;

4.useRef

useRef的用法与ref的用法差不多 uerRef 创建-绑定-使用

其实用法与Ref相同 绑定 组件的dom

import React,{useMemo,useState,useRef,useEffect} from 'react'

function Child({count}){

    // 创建一个新的useRef 
    const UseRef = useRef(null);
    const [name,setName] = useState('test')
    function changedCount1(){
        console.log(count + '--useMemo改变');
        return count + '--useMemo改变'
    }
    useEffect(()=>{
        UseRef.current.value = 'feifei'
    })
   function handleData(){
    UseRef.current.value = 'success'
   }
    useMemo(()=>{changedCount1()},[count])

    return (
        <div>
            这是--child--useMemo--{count}

			// 这里绑定Ref 
            <input type="text" ref={UseRef} />
            <button onClick={handleData}></button>
        </div>

    )
}

function UseMemo(){

    const [count,setCount] = useState(1)

    return (
        <div>
            这是--father--useMemo--{count}
            <button onClick={()=>{setCount(count+1)}}>count + 1</button> 
            <Child count={count} />
        </div>
        
    )
}

export default UseMemo;

5.useContext

与context的用法一样

主要是需要数据的子组件获取父组件全部数据const fatherName = useContext(state)

1.index.js

import react from 'react'

const UseContext = react.createContext();

export default UseContext;

2.father.js

import context from './useContext'
import Child from './child'
import {useState} from 'react'
function Father(){
    const [name,setName] = useState('feifei')
    return (
        <div>
            这是函数组件hook--Father--useContext--{name}
            <context.Provider value={{name:'feifei'}}>
                <Child></Child>
            </context.Provider>
        </div>
        
    )
}

export default Father;

3.child.js

import context from './useContext'
import {useContext} from 'react'

function Father(){
    let FatherName = useContext(context);

    return (
        <div>
            这是函数组件hook--Child--useContext--{FatherName.name}
            <h1>{FatherName.name}</h1>
        </div>
        
    )
}

export default Father;

6.useReducer

和redux的用法差不多

生成redux中间处理文件

useReducer 产生dispatch分配和数据

import context from './useContext'


const initData = {
    name:'init'
}

function reducer(state,active){
    const {type,data} = active;
    switch(type){
        case 'add':
            return '1' + data;
        case 'delet':
            return '0' + 'data';
    }   
}

const [state,dispatch] = useReducer(reducer,initData);


// 父组件
    <context.Provider value={{state,dispatch,name:'feifei',setName,}}>
                <Child></Child>
	</context.Provider>

// 子组件
function Child(){
    let FatherName = useContext(context);
    function handleClick(name){
        FatherName.dispatch({type:'add',name:'test'})
    }

    return (
        <div>
            这是函数组件hook--Child--useContext--{FatherName.name}
            <h1>{FatherName.name}</h1>
            <button onClick={handleClick()}>reducer</button>
        </div>
        
    )
}