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 (
		<>
		    + 1 
		   
		
	)
}
function Child(props){
	return(
		<>
		  
 这里是子组件 { props.count } 
		
	)
}

export default addCount

2.useEffect

函数组件的生命周期

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

   		   这是一个组件
   		 
   		
   )
}

3.useContext

跨组件传值

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

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

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

4.useRef

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

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

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 (
        

            
{count}
            
{bool ? '真' : '假'}
             setCount(count + 1)}>+1
             setBool(!bool)}>取反
        
    )
}

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