Hooks - react呼吸贰之型 - 钩子函数

1、介绍

为什么需要Hooks?

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

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>    )}

墨言文学成语大全