个人对于React Hooks 的理解

useRef 获取dom元素

useContext 对React中context本身功能在hooks里的应用

useReducer 借助于Redux的语法，做的一个useState的扩展，与Redux完全不同，Redux是全局状态管理的，而useReduce是管理当前组件的，争对单组件

useMemo 性能优化缓存数据

useCallback 性能优化缓存函数

 

useRef

let myref=useRef(null);
useEffect(()=>{
console.log(myref.current)
},[])
<button ref={myref} />

class类

let {Provider,Consumer}=React.createContext('123')
最外层
<Mycontext.Provider value={"456"}>
<Consumer>
{value => /*根据上下文 进行渲染相应内容*/}
</Consumer>
</Mycontext>

hooks

useContext
let {Provider,Consumer}=React.createContext('默认值')

性能优化
（对于react父子组件来说，父组件变化，子组件无条件渲染）

CLASS优化方案：scu生命周期和PureComponemt做优化

shoudComponentUpdate(nextProps,nextState){
if(nextState.count!==this.state.count){//可以通过递归进行深度比较但是耗费性能，所以最好数据扁平化
return true;//可以渲染
}
return false//不可以渲染
}

为此React浅比较可以使用PureComponemt模式纯组件，会默认在scu中进行浅比较

class List extends React.PureComponent {
constructor(props){
super(props)
}
shouldComponentUpdate(){} //浅比较
}

在hooks中
useMemo 缓存数据
useCallback 缓存函数

useMemo

import React,{useState,memo,useMemo} from 'react';
//第一步 用memo包裹子组件
//第二步 父组件使用用useMemo缓存变量,有依赖

const Child=memo(({userInfo})=>{return <div>{userInfo.name}<div/>})

function App(){
//const userInfo={name:"kxz"}
const userInfo= userMemo(()=>{return {name:"kxz"}},[name])
return <div> <Child userInfo={userInfo}></ Child></div>
}

　

自定义hooks

hooks命名以use开头

hooks只能在最外层使用

hooks调用顺序必须保持一致

import {useState,useEffect} from 'react'
import axios from 'axios'

function useAxios(url){
    let [loading,setLoading] = useState(false);
    let [data,setData] = useState();
    let [error,setError] = useState();

    useEffect(()=>{
        setLoading(true);
        axios.get(url).then((res)=>{
            setData(res)
        }).catch((err)=>{
            setError(err)
        })
    },[url])

    return [loading,data,error]
}

export default useAxios

 

import {useState,useEffect} from 'react'

function useMousePosition(){
    let [x,setX] = useState(0);
    let [y,setY] = useState(0);

    useEffect(()=>{
        function mouseMoveHandler(event){
            setX(event.clientX)
            setY(event.clientY);
        }
        document.body.addEventListener('mousemove',mouseMoveHandler)
        return ()=> document.body.removeEventListener('mousemove',mouseMoveHandler)
    },[])

    return [x,y]
}

export default useMousePosition