React hooks 函数入门

1、介绍

为什么需要Hooks?

①组件的最佳写法是函数，而不是类，函数组件官方更加推荐。
②Hooks 就是解决函数组件的 状态，生命周期问题的。
③函数组件+Hooks 完胜于 类组件（class）

#	函数组件+hooks	类组件（class）
难易程度	简单	复杂（需要操作this）
性能	占内存小	占内存大
功能	灵活	不太灵活

2、5大钩子简单使用

①useState （状态钩子）

Ⅰ、创建一个属性，和一个修改该属性的方法
Ⅱ、该方法的第一个形参，是该属性改后的值

import React,{useState} from 'react'	
function Index() {
     const  [count ,setCount] = useState(10);
     return (
             <div>
                 <p>数字为：{count}</p>
                 <button onClick = {()=> setCount(count + 1)}> 增加1 </button>
             </div>
           )
}

②useReducer（Action钩子）

Ⅰ、useReducer和上面的useState 功能相同
Ⅱ、当逻辑比较复杂，多种情况判断下 ， useReducer 比 useState 更方便

import React,{useReducer} from 'react'
function Index2() {
    const [state, changeState] = useReducer(aaa,0)
    function aaa(state,action){
            switch (action.type) {
                case 'add':  return state+1
                case 'pop':  return state-1
                default:  break;
            }
    }
    return (
    		<div>
            	<p>{state}</p>
            	<button onClick={()=>changeState({ type:'add'})}>增加1 </button>
            	<button onClick={()=>changeState({ type:'pop'})}>减去1 </button>
            </div>
        )
}

③useEffect（周期钩子）

Ⅰ、 useEffect(函数,[ ])，第二个参数, 数组中未绑定对象，则该组件“渲染”、“卸载”会触发，
渲染触发函数内的逻辑，卸载触发return 返回的函数。
Ⅱ、useEffect(函数,[参数1,参数2])，第二个参数, 数组中绑定对象，则该组件“渲染”、“卸载”、绑定对象“更新”都会触发，
同理渲染触发函数内的逻辑，卸载触发return 返回的函数，但更新是先触发上一次的return返回的函数，在执行这一次的函数内的逻辑。

import React,{useEffect} from 'react'

function IndexA() {
    useEffect(()=>{ 
        console.log('Mount会触发') 
        return ()=>{ console.log('unMount触发 ，卸载了')}
      },[])
}

function IndexB() {
    useEffect(()=>{ 
        console.log('Mount或Update 会触发',count)
        return ()=>{ console.log('unMount或Update触发 ，卸载了')}
      },[count])
}

④useRef（获取元素钩子）

Ⅰ、绑定dom节点，获取dom元素属性

function Index4() {
    const inputA = useRef();  
    const fun = ()=>{  console.log(inputA.current.type)  }
    return (
        <div>
            <input type="text" ref = { inputA } />
            <button onClick = {fun} >获取输入的值</button>
        </div>
    )
}

⑤useContext（共享状态钩子）

Ⅰ、实现组件间的属性共享
Ⅰ、通过将需要的共享的属性写在中间配置中，使得这些组件的子及一下的后代都可以获取到共享属性

import React,{useContext} from 'react'
import { MyProvider } from "./myContext";
function Index() {
    return (
    		<MyProvider>
                <Son1/>
                <Son2/>
            </MyProvider>
            )
}
function Son1() { 
    const { count, add }  =   useContext(myContext);
    return ({count} <button onClick={add}>增加1</button>)
}
function Son2() { 
    const { count, pop }  =   useContext(myContext);
    return ({count} <button onClick={pop}>减去1</button>)
}

中间配置MyProvider

const myContext = React.createContext();
export const MyProvider = ({children})=>{
    const [count,setCount] = useState(0);
    const value = {
        count,
        add:()=>{ setCount(count + 1 )},
        pop:()=>{ setCount(count - 1 )}
    }
    return (
    		<myContext.Provider value = {value}>
    			{children}
    		</myContext.Provider>
    	)
}