首页 > 其他分享> 文章详细

个人对于React Hooks 的理解

2021-06-28 17:35:07 阅读：213 来源： 互联网

标签：return name useMemo Hooks React 理解 userInfo 组件

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

个人对于React Hooks 的理解