一、Hooks

为什么要使用react-hooks

高阶组件为了复用，导致代码层级复杂;
生命周期的复杂 ;
写成function组件，无状态组件，但是又需要状态，改成class组件成本太高不存在声明周期。

常用

useState：创建状态

import React, {useState} from 'react'
export default function Test() {const [name,setname]=useState('leo);
return(<div>{name}<button onClick={() => {setname('lee');}}>ddd</button></div>)
}

useEffect:副作用（监听某个依赖是否发生改变，从而实现另外的目的）

const [name,setname]=useState('leo');
// 副作用处理
useEffect(() => {//如果在这里对name做了修改，那么数组中必须指明对应的依赖(依赖指状态)setname(name.toUpperCase()); return () => {console.log('在这里组件被销毁')},[name]);
// 第二个参数如果是空数组那么第一个参数只走一次
// 如果[name]name作为依赖存在
//只要被修改，第一个参数就会走一次
// 在这里可以看做是对状态数据的再次加工处理

useCallBack：对函数进行缓存，提升性能（并不能太大提升性能，最大的作用是防止子组件reRender()）

import React,{useState,useCallback}from 'react'
export default function Test1(){ const [val,setval]=useState('');const [list,setlist]=useState([]); const addltem=useCallback(()=> { console.log(val); setlist(...list, vall)},[val]) return(<div><input defaultValue={val}onChange={(e) => { setval(e.target.value);}} /><p>{val}</p>{ list.map((n, index) => <p key={'item'+index}>{index}-{n}</p>) }<button onClick=(()=>{ additem(); }}>点我</button> </div>)}

const[name,setname]=useState('lee')
const myFn=useCallBack(() => {console.log(name);
},[nmae])
// 只有name改变，函数才会重新生成一次
// 如果传入空数组，函数首次执行生成，之后不变
// 如果不传数组，每次都会生成新的函数

useMemo：对状态值属性值进行再次计算

const getResult = useMemo(() => list.mpa(n => n**2),[list])

useRef():懂得都懂

useContext()：参考类组件context状态树，写法上更简洁

import React,{useReducer} from 'react// 处理函数
const reducer=(prevState,action)=> {
let state={.….prevState);
//prevState 只读
switch(action.key){ case 'key1':代码1; break; case 'key2'代码2; break: default: break:
return state;//外部对象
const intailState ={ count: 0 }

useReducer()

// dispatch: 发送信号执行外部的reducer方法
const [state, dispatch] = useReducer(reducer, intailState);
<button onClick={() => {dispatch({ type: 'key1'}）
}}

useReducer+useContext：解决大量组件传值问题

自定义hooks

必须以“use”开头
当我们想在两个函数之间共享逻辑时，我们会把它提取到第三个函数中
再解释:将复杂代码封装到函数中

小结

为什么要用？解决了什么问题：完善函数组件能力

如何模拟生命周期

compontenDidMount , useEffect依赖[]
compontenDidUpdate , useEffect无依赖或者依赖[a,b]
compontenWillUnmonunt ,useEffect返回一个函数

【web】React-hooks相关推荐

mounty不可重新挂载因为先前没有完全卸载_【译】React Hooks测试完全指南
原文地址:https://www.toptal.com/react/testing-react-hooks-tutorial 2018年底,React在16.8版本中引入了Hooks.它们(译注:指R ...
【构建】react打造你的第一个Bilibili首页开发项目
[构建]react打造你的第一个Bilibili首页开发项目简介 Hello 小极客们,如果觉得本文还不错,记得点个赞或者给个 star,你们的赞和 star 是我编写更多更丰富开源项目的动力![ ...
【Web】Rest API 验证授权如何做？
参考资料: [Web]Rest && 权限管理等:http://www.itdadao.com/2016/03/15/593144/ 无需OAuth就可以设计一个安全的REST (We ...
01【Web】基础-HTML
01[Web]基础-HTML(P1) 本系列文章,针对Web前端的相关知识进行了详细的介绍文章目录 01[Web]基础-HTML(P1) Chapter01 HTML概述 1. Internet起源 ...
03【Web】基础-JavaScript
03[Web]基础-JavaScript(P2)对象本系列文章,针对Web前端的相关知识进行了详细的介绍文章目录 03[Web]基础-JavaScript(P2)对象 1. 数组对象 1.1 基本 ...
【入门】React 17 + Vite + ECharts 实现疫情数据可视化「02 快速搭建项目」
往期文章目录: [入门]React 17 + Vite + ECharts 实现疫情数据可视化「01 项目介绍篇」文章目录快速搭建项目介绍 Vite Vite 特点搭建第一个 Vite 项目 ...
【Web】HAProxy走私漏洞
[Web]HAProxy走私漏洞 JFrog安全研究团队发布了一个HAProxy的严重漏洞的信息.HAProxy是一个使用C语言编写的自由及开放源代码软件,其提供高可用性.负载均衡,以及基于TCP和H ...
【React全家桶】React Hooks
React Hooks hooks介绍 useState(保存组件状态) useEffect() useCallback(记忆函数) useMemo() 记忆组件 useRef(保存引用值) useR ...
【前端】react and redux教程学习实践，浅显易懂的实践学习方法。
前言前几天,我在博文[前端]一步一步使用webpack+react+scss脚手架重构项目中搭建了一个react开发环境.然而在实际的开发过程中,或者是在对源码的理解中,感受到react中用的最多 ...
[置顶] 【稀饭】react native 实战系列教程之热更新原理分析与实现
很多人在技术选型的时候,会选择RN是因为它具有热更新,而且这是它的一个特性,所以实现起来会相对比较简单,不像原生那样,原生的热更新是一个大工程.那就目前来看,RN的热更新方案已有的,有微软的CodeP ...

【web】React-hooks

一、Hooks

为什么要使用react-hooks

常用

useState：创建状态

useEffect:副作用（监听某个依赖是否发生改变，从而实现另外的目的）

useCallBack：对函数进行缓存，提升性能（并不能太大提升性能，最大的作用是防止子组件reRender()）

useMemo：对状态值属性值进行再次计算

useRef():懂得都懂

useContext()：参考类组件context状态树，写法上更简洁

useReducer()

useReducer+useContext：解决大量组件传值问题

自定义hooks

小结

为什么要用？解决了什么问题：完善函数组件能力

如何模拟生命周期

【web】React-hooks相关推荐

最新文章

热门文章