react 16.8新特性

1 useMemo: 相当于shouldComponentUpdate, useMemo是一个函数,他的返回值取决于第一个回调函数的return值,接受两个参数,第一个参数是回调函数,会返回数据,第二个参数是一个数组,监听数据,如果是空数组的话,数据发生变化将不会引起组件变化.

 

2 usecallback:本身也是一个函数 ,可以直接执行,有两个参数 ,第一个也是回调函数 第二个是数组,类似于useMemo ,就是他渲染数据需要执行返回值,也就是函数

 

3 createContext  useContext   先创建一个createContext ,然后在上面加上provider, 里面写上value={},接着在createContext里面传入一个组件,在组件内部使用useContext接受value,即可直接使用.也就是解决了props层层嵌套的问题.

 

4 useState   也是一个函数,接受一个参数为变量的初始值,返回一个数组  第一个参数是变量明,第二个参数为函数 可以操作数组

 

5 useRef  获取一个dom元素的值  在组件上加上一个ref=useRef的返回值,  获取value值  就是useRef.current.value

                 保存一个变量的值

6 useEffect 在函数组件内使用dom操作,数据请求,组件更新.  useEffect是在组件挂载之后更新的

    useEffect(回调函数,数组)

    初次渲染会走这个  状态改变也会走这个(如果不想让它改变,就传一个空数组)

 

  useEffct(()=>{

     return ()=>{

       console.log("componentWillUnmount")

    }

})

 

7 forwardRef 可以指定父组件获取子组件的某个元素  而不是全局暴露出来

import {forwardRef,useRef} from 'react'

const Forward = forwardRef((props,ref)=>{
    return (
        <>
            <h3 ref={ref}>123</h3>
            <h4></h4>
        </>
    )
})


export default ()=>{
    const h3Ref = useRef(null)
    return
    <>
    <Forward ref={h3Ref}></Forward>
    <button onClick={()=>{
        console.log(h3Ref)
    }}>获取子组件dom</button>
    </>
}

　　

8 useImperativeHandle

import {forwardRef,useRef,useImperativeHandle,useState} from 'react'

const Impreative = forwardRef((props,refa)=>{
    const inputRef = useRef();
    const [count,setCount] = useState(0);
    const [num,setNum] = useState(0);

    useImperativeHandle(refa,()=>({
        name:'chenfei',
        foucs:()=>{
            inputRef.current.foucs()
        },
        count,
    }),[num])

    return (
        <>
        <h3>count:{count}</h3>
        <h4>num:{num}</h4>
        <input ref={inputRef}></input>
        <button onClick={()=>{setCount(count+1)}}>count</button>
        <button onClick={()=>{setNum(num+1)}}>num</button>
        </>
    )
})


export default ()=>{
    const el = useRef();
    return (
        <>
        <Impreative ref={el}></Impreative>
        <button onClick={()=>{
            console.log(el)
        }}>获取子组件自定义方法或者属性</button>
        </>
    )
}

　　9 useLayoutEffect

        

             useEffect不会阻塞组件 ,也就是说在组件挂载之后1执行, useLayoutEffect在组件挂载之前执行,会阻塞组件

 

   10 自定义hook

    

// 自定义hook

import React, { Component,useState } from 'react'

const useCus = (val,num) =>{
    let [count,setCount] = useState(val)
    const add = () =>{
        setCount(count+num)
    }
    return {count,add}
}

export default ()=> {
    let {count,add} = useCus(2,10)
        return (
            <div>
                <h1></h1>
                <h2>{count}</h2>
                <button onClick={()=>{add()}}>add</button>
            </div>
        )
}

　　11 useReducer