博客

1.useState

function Example01(){
    const [ count, setCount ] = useState(0)  //声明
    return(
        <div>
            <p>{count}</p>  //读取
            <button onClick={()=>setCount(count+1)}>计数</button> // 使用（修改）
        </div>
    )

}

2.useEffect


1.React首次渲染和之后的每次渲染都会调用一遍useEffect函数，而之前我们要用两个生命周期函数分别表示首次渲染(componentDidMonut)和更新导致的重新渲染(componentDidUpdate)

2.useEffect中定义的函数的执行不会阻碍浏览器更新视图，也就是说这些函数时异步执行的，而componentDidMonut和componentDidUpdate中的代码都是同步执行的。

注意：

如果useEffect后面没有依赖：

这种时候每次每次页面更新都会执行

useEffect(()=>{
    console.log('执行');
})

如果后面为空

页面初始的时候执行一次

useEffect(()=>{
    console.log('执行');
},[])

如果后面有值且不为空

只有当count改变时才会被触发

useEffect(()=>{
    console.log('执行');
},[count])

使用useEffect解绑

，组件卸载的时候，比如需要清除计时器等：

但是当传空数组[]时，就是当组件将被销毁时才进行解绑，这也就实现了componentWillUnmount的生命周期函数。

function Index() {
    useEffect(()=>{
        console.log('useEffect=>Index')
        return ()=>{
            console.log('Index页面离开')
        }
    },[])
    return <h2>测试解绑</h2>;
}

3.useContext

上下文传值

1.父组件：

const CountContext = createContext()  //引入
function Example01(){
    const [ count, setCount ] = useState(0)
    return(
        <div>
            <p>{count}</p>
            <button onClick={()=>setCount(count+1)}>计数</button>
            <CountContext.Provider value={count}>  //使用包裹子组件传递值
                <ChildContent/>
            </CountContext.Provider>      
        </div>
    )
}

2.子组件：

function ChildContent(){
     const context = useContext(CountContext) 
     return(
         <p>{context}</p>
     )
}

4.useReducer


它也是React hooks提供的函数，可以增强我们的Reducer，实现类似Redux的功能。

import React, { useReducer  } from 'react'
function Example5(){
    const [ count, dispatch ] = useReducer((state,action)=>{  
              switch(action){   //通过判断对应的action,去执行对应的方法
            case 'add':
                return state+1
            case 'sub':
                return state-1
            default:
                return state
        }
    },1)
    return(
        <div>
            <p>{count}</p>
            <button onClick={()=>dispatch('add')}>add</button>  //通过dispatch，传递对应的action，调用对应的方法
            <button onClick={()=>dispatch('sub')}>sub</button>
        </div>
    )
}
export default Example5

5.useMemo


useMemo主要用来解决使用React hooks产生的无用渲染的性能问题。

只要使用useMemo，然后给她传递第二个参数，参数匹配成功，才会执行。

1.在父组件里面，传递对应需要的参数

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

function Example7(){
    const [one , setOne] = useState('第一个的状态')
    const [two , setTwo] = useState('志玲待客状态')
    return (
        <>
            <button onClick={()=>{setOne(new Date().getTime())}}>第一个</button>
            <button onClick={()=>{setTwo(new Date().getTime())}}>第二个</button>
            <ChildComponent name={one}>{two}</ChildComponent>
        </>
    )
}

2.父组件调用子组件

function ChildComponent({name,children}){
    function changeXiaohong(name){
        return name
    }
 const actionXiaohong = useMemo(()=>changeXiaohong(name),[name])
    return (
        <>
            <div>{actionXiaohong}</div>
            <div>{children}</div>
        </>
    )
}

6.useRef


用useRef获取React JSX中的DOM元素，获取后你就可以控制DOM的任何东西了。但是一般不建议这样来作，React界面的变化可以通过状态来控制

import React, { useRef } from 'react'
function Example8(){
    const inputRef  = useRef(null)
    const onButtonClick=()=>{
        inputRef.current.value='THIS IS INPUT'
        console.log(inputRef);
    }
    return(
        <div>
            <input type="text" ref={inputRef}/>
            <button onClick = {onButtonClick}>显示</button>
        </div>
    )
}
export default Example8

保存普通变量

import React, { useRef,useState } from 'react'
function Example8(){
    const inputRef  = useRef(null)
    const onButtonClick=()=>{
        inputRef.current.value='THIS IS INPUT'
        console.log(inputRef);
    }
     const [state, setstate] = useState('inputValue')  //声明一个变量
    return(
        <div>
            <input type="text" ref={inputRef}/>
            <button onClick = {onButtonClick}>显示</button>
            <input value={state} type="text" onChange={(e)=>setstate(e.target.value)}/>  //绑定对应的值以及绑定onChange事件
        </div>
    )
}
export default Example8