个人对于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>
}

　　

 

标签：return,name,useMemo,Hooks,React,理解,userInfo,组件
来源： https://www.cnblogs.com/kangxinzhi/p/14945465.html