117.《React - Hoke 总结》

Hook总结

1.useState

使用 useState 实现计数器加减

import React,{ useState } from 'react'
function addCount(){
	let [ count,setCount ] = useState(0)
	const Add = ()=>{
	   setCount(count + 1)
	}
	return (
		<>
		   <Button onClick={ Add } > + 1 </Button>
		   <Child count={ count } />
		</>
	)
}
function Child(props){
	return(
		<>
		  <h1> 这里是子组件 { props.count } </h1>
		</>
	)
}

export default addCount

2.useEffect

函数组件的生命周期

import React, { useEffect } from 'react'
function Fun(){
  useEffect(()=>{
  	console.log("组件初始化 或 装啊嚏更新或处罚这行输出")
  	return ()=>{
  	consolelog("组件卸载会触发这行输出")  	}
  },[])
  return (
   		<>
   		 <div>
   		   这是一个组件
   		 </div>
   		</>
   )
}

3.useContext

跨组件传值

import React,{ useContext,createContext } from 'react'
let conText = createContext()
function ComA(){
    let [ count,SetCount ] = useState(0)
	return (
		<>
			<h1> 这是 ComA 组件 </h1>
			<conText.Provider value = { count } >
				<ComB />
			</conText.Provider>
		</>
	)
}

function  ComB(){
	return (
		<>
			<h1> 这是 ComB 组件 </h1>
			<ComC />
		</>
	)
}

function  ComC(){
    let count = useContext(conText)
	return (
		<>
			<h1> 这是 ComC 组件 { count } </h1>
		</>
	)
}

4.useRef

获取组件实例对象或者是DOM对象。

import React, { useEffect, useState, useRef } from 'react'
// 这是一个抽离的 表单组件
import UserForm from "../../../components/user-manage/UserForm";
function UserList() {
	let addref = useRef(null)
	return <>
		 <UserForm 
		    isUpdataDis={isUpdataDis} 
		    ref={addref} >
		 </UserForm>
	</>
}

addref 的触发方式

addref.current

5.useMemo

useMemo 类似于Vue的计算属性，监听某个值的变化，根据变化的值重新计算新值；
useMemo会缓存结果，如果监听的值没有发生变化，即使组件重新渲染，也不会重新发生计算，这个行为有助于避免在每个渲染上进行昂贵的计算

import React, { useState, useMemo } from 'react'
function Memo() { 

    const [count, setCount] = useState(0)
    const [bool, setBool] = useState(true)
    
    useMemo(() => {
        console.log('变化了')
    }, [count])

    return (
        <div>
            <h1>{count}</h1>
            <h1>{bool ? '真' : '假'}</h1>
            <button onClick={() => setCount(count + 1)}>+1</button>
            <button onClick={() => setBool(!bool)}>取反</button>
        </div>
    )
}

这里讲一下, 以上代码通过点击触发setCount改变count的值，组件会重新渲染且useMemo会监听count值的变化进行重新计算，但是当我i触发setBool改变bool的值，组件只进行了重新渲染但是useMemo没有重新计算并执行，因为当前useMomo监听的时count的变化，其他变化与我无关；