【react】---Hooks的基本使用---【巷子】
一、react-hooks概念
React中一切皆为组件,React中组件分为类组件和函数组件,在React中如果需要记录一个组件的状态的时候,那么这个组件必须是类组件。那么能否让函数组件拥有类组件的功能?这个时候我们就需要使用hooks。
Hooks让我们的函数组件拥有了类似类组件的特性,Hook是React16.8中新增的功能,它们允许您在不编写类的情况下使用状态和其他React功能
二、为什么React中需要类组件
1、需要记录当前组件的状态
2、需要使用组件的一些生命周期函数
三、类组件与Hooks简单对比
类组件
import React from "react" export default class App extends React.Component{
constructor(){
super();
this.state = {
count:0
}
this.handleClick = this.handleClick.bind(this);
}
render(){
let {count} = this.state;
return (
<div>
<h2>{count}</h2>
<button onClick={this.handleClick}>修改</button>
</div>
)
}
handleClick(){
this.setState({
count:this.state.count+1
})
}
}
hooks
import React,{useState} from "react"; export default ()=>{
let [count,setCount] = useState(0);
let handleAdd = ()=>setCount(count+1);
return (
<div>
<h2>{count}</h2>
<button onClick={handleAdd}>点击</button>
</div>
)
}
二者对比之后是不是感觉Hooks简单好多了?那么接下来我们来学习Hooks
四、Hooks基本使用
1、Hooks常用的方法
useState 、useEffect 、useContext以上三个是hooks经常会用到的一些方法
2、useState
useState是react自带的一个hook函数,它的作用就是用来声明状态变量.useState这个函数接收的参数是我们的状态初始值,它返回了一个数组,这个数组的第 [0]项是当
前当前的状态值,第 [1]项是可以改变状态值的方法函数。
import React,{useState} from "react" export default ()=>{
let [count,setCount] = useState(0);
let addCount = ()=>setCount(count+1);
return (
<div>
<h2>{count}</h2>
<button onClick={addCount}>点击</button>
</div>
)
}
useState : 创建一个状态,这个状态为0
count : 代表当前状态值也就是0
setCount : 更新状态的函数
addCount = ()=>setCount(count+1);调用setCount就可以用来修改状态
2-1、useState返回的是什么?
const [count,setCount] = useState(0); const state = useState(0);
const count = state[0];
const setCount = state[1]
注意:
1、useState一定要写在函数初始的位置不能在循环或判断语句等里面调用,这样是为了让我们的 Hooks 在每次渲染的时候都会按照 相同的顺序 调用,因为这里有一个关键的问题,那就是 useState 需要依赖参照第一次渲染的调用顺序来匹配对于的state,否则 useState 会无法正确返回它对于的state
2、我们可以在一个函数组件中使用多个
export default ()=>{
let [count,setCount] = useState(0);
let [count,setCount] = useState(0);
let [count,setCount] = useState(0); }
五、useEffect基本使用
我们写的有状态组件,通常会产生很多的副作用(side effect),比如发起ajax请求获取数据,添加一些监听的注册和取消注册,手动修改dom等等。我们之前都把这些副作用的函数写在生命周期函数钩子里,比如componentDidMount,componentDidUpdate和componentWillUnmount。而现在的useEffect就相当与这些声明周期函数钩子的集合体。它以一抵三。
(useEffect = componentDidMount + componentDidUpdate+componentWillUnmount)
5-1、useEffect
useEffect中有两个参数,第一个参数是一个函数,第二个参数是一个依赖的数据。第二个参数用来决定是否执行里面的操作,可以避免一些不必要的性能损失,只要第二个参数中的成员的值没有改变,就会跳过此次执行。如果传入一个空数组 [ ],那么该effect 只会在组件 mount 和 unmount 时期执行。
5-2、useEffect模拟componentDidMount && componentDidUpdate
import React,{useState,useEffect} from "react" export default ()=>{
let [title,setTitle] = useState(0);
let updateTitle = ()=>setTitle(title+1);
return (
<div>
<h2>{title}</h2>
<button onClick={updateTitle}>点击</button>
</div>
) //参数是一个函数 每次mount 或者 update都会调用当前函数
useEffect(()=>{
document.title = `页面为${count}`;
}) }
5-3、如何只在componentDidMount中执行
import React,{useState,useEffect} from "react" export default ()=>{
let [title,setTitle] = useState(0);
let updateTitle = ()=>setTitle(title+1);
return (
<div>
<h2>{title}</h2>
<button onClick={updateTitle}>点击</button>
</div>
) //将第二个参数设置为一个空数组则只会在componentDidMount中执行
useEffect(()=>{
document.title = `页面为${count}`;
},[]) }
5-2、useEffect模拟componentWillUnMount
useEffect 中还可以通过让函数返回一个函数来进行一些清理操作,比如取消订阅等
useEffect = (()=>{
return ()=>{
//unmount时调用这里
document.removeEventListener();
}
},[])
四、useEffect 什么时候执行?
它会在组件 mount 和 unmount 以及每次重新渲染的时候都会执行,也就是会在 componentDidMount、componentDidUpdate、componentWillUnmount 这三个时期执行
五、hooks的好处
面向生命周期编程变成了面向业务逻辑编程
【react】---Hooks的基本使用---【巷子】的更多相关文章
- 通过 React Hooks 声明式地使用 setInterval
本文由云+社区发表 作者:Dan Abramov 接触 React Hooks 一定时间的你,也许会碰到一个神奇的问题: setInterval 用起来没你想的简单. Ryan Florence 在他 ...
- 初探React Hooks & SSR改造
Hooks React v16.8 发布了 Hooks,其主要是解决跨组件.组件复用的状态管理问题. 在 class 中组件的状态封装在对象中,然后通过单向数据流来组织组件间的状态交互.这种模式下,跨 ...
- React hooks实践
前言 最近要对旧的项目进行重构,统一使用全新的react技术栈.同时,我们也决定尝试使用React hooks来进行开发,但是,由于React hooks崇尚的是使用(也只能使用)function c ...
- 理解 React Hooks
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由志航发表于云+社区专栏 TL;DR 一句话总结 React Hooks 就是在 react 函数组件中,也可以使用类组件(classe ...
- React Hooks新特性学习随笔
React Hooks 是 React 16.8 的新增特性.它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性. 前言 本篇主要以讲几个常用的api为主. 1.u ...
- 关于React Hooks,你不得不知的事
React Hooks是React 16.8发布以来最吸引人的特性之一.在开始介绍React Hooks之前,让咱们先来理解一下什么是hooks.wikipedia是这样给hook下定义的: In c ...
- react hooks 全面转换攻略(三) 全局存储解决方案
针对 react hooks 的新版本解决方案 一.redux维持原方案 若想要无缝使用原来的 redux,和其配套的中间件 promise,thunk,saga 等等的话 可以使用 redux-re ...
- react新特性 react hooks
本文介绍的是react新特性react hooks,本文面向的是有一定react开发经验的小伙伴,如果你对react还不是很熟悉的话我建议你先学习react并多多联系. 首先我们都知道react有3种 ...
- 30分钟精通React今年最劲爆的新特性——React Hooks
你还在为该使用无状态组件(Function)还是有状态组件(Class)而烦恼吗? --拥有了hooks,你再也不需要写Class了,你的所有组件都将是Function. 你还在为搞不清使用哪个生命周 ...
- React Hooks 深入系列 —— 设计模式
本文是 React Hooks 深入系列的后续.此篇详细介绍了 Hooks 相对 class 的优势所在, 并介绍了相关 api 的设计思想, 同时对 Hooks 如何对齐 class 的生命周期钩子 ...
随机推荐
- Oracle 表空间详解
目录 目录 表空间概述 表空间的分类 默认表空间 查看默认的永久表空间 查看默认的TEMP表空间 查看默认的表空间类型 逻辑结构到物理结构的映射 对表空间的操作 查看表空间使用情况 查看数据库拥有的表 ...
- 1.0搭建 Node.js 开发环境
<搭建 Node.js 开发环境> 本课程假设大家都是在 Linux 或者 Mac 下面.至于使用 Windows 并坚持玩新技术的同学,我坚信他们一定有着过人的.甚至是不可告人的兼容性 ...
- Opengl 之 窗口初体验 ------ By YDD的铁皮锅
大二的时候开始想着做游戏,因为学校的课程实在是无聊就想着做些有意义的事情.毕竟学了编程这一行就得做些实事,于是就在网上搜了一下图形编程,偶然的了解到了Opengl (同时还有Windows上的Dire ...
- Django框架(二十七)—— ContentType组件
目录 ContentType组件 一.什么是ContentType组件 二.使用ContentType 三.使用场景总结 ContentType组件 一.什么是ContentType组件 conten ...
- GCD 与XOR
题目:UVA12716 题意: 问 gcd(i,j) = i ^ j 的对数(j <=i <= N ) N的范围为30000000,有10000组样例 分析: 有几个结论:(1)若 a ...
- 针对利用tzselect修改时间及ln -sf 修改系统时间不好使的情况 linux 6.5
首先,利用ntpdate -u {ip}同步目标服务器的时间 然后这里一般物理硬件的时间也不会对,所以才会导致修改时间不成功所以要同时把物理硬件时间进行修改ntpdate之后,时间已经变更使用hwcl ...
- KMP 算法学习
KMP算法是用来做字符串匹配的.关于字符串匹配,最简单最容易想到的方法是暴利查找,使用双重for循环处理. 该方法的时间复杂度为O((n-m+1)*m) (n为目标串T长度,m为模式串P长度, 从T中 ...
- 利用jion阻塞主进程结束
import time from multiprocessing import Process def run1(): for i in range(5): print("sunck is ...
- linux,进行批量下载文件操作
wget -i url.txt -P ./Photo 批量下载图片(一般是某个相册的图片) 首先先得到一张图片的地址如:www.example.com/pic/001.jpg 同相册的图片地址会有一 ...
- 泛型(Java 5 开始)
前言 Java 5 开始之前,从集合读取的数据都必须进行类型转换,如果插入错误的数据就会报错. 有了泛型,编译器会自动为你的插入进行转换,并在插入时告知是否插入了类型错误的对象. 将类型由原来的具体的 ...