【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的好处
面向生命周期编程变成了面向业务逻辑编程
转载于:https://www.cnblogs.com/nanianqiming/p/11037565.html
【react】---Hooks的基本使用---【巷子】相关推荐
- react hooks使用_为什么要使用React Hooks?
react hooks使用 The first thing you should do whenever you're about to learn something new is ask your ...
- react hooks使用_如何使用React和Hooks检测外部点击
react hooks使用 by Andrei Cacio 通过安德烈·卡西奥(Andrei Cacio) 如何使用React和Hooks检测外部点击 (How to detect an outsid ...
- react hooks使用_如何使用Hooks将React类组件转换为功能组件
react hooks使用 by Balaganesh Damodaran 通过Balaganesh Damodaran 如何使用Hooks将React类组件转换为功能组件 (How to conve ...
- 探React Hooks
前言 众所周知,hooks在 React@16.8 中已经正式发布了.而下周周会,我们团队有个同学将会仔细介绍分享一下hooks.最近网上呢有不少hooks的文章,这不免激起了我自己的好奇心,想先行探 ...
- 使用React Hooks你可能会忽视的作用域问题
前言 其实React Hooks已经推出来一段时间了,直到前一阵子才去尝试了下,看到的一些博客都是以API的使用居多,还有一些是对于原理的解析.而我这篇文章想写的是关于React Hooks使用中的作 ...
- dw按钮图片滚动js_使用 React Hooks 实现仿石墨的图片预览插件(巨详细)
点击上方"前端教程",选择"星标" 每天前端开发干货第一时间送达! 作者:DARRELL https://juejin.im/post/5e9bf299f265 ...
- 通过 React Hooks 声明式地使用 setInterval
2019独角兽企业重金招聘Python工程师标准>>> 本文由云+社区发表 作者:Dan Abramov 接触 React Hooks 一定时间的你,也许会碰到一个神奇的问题: se ...
- mounty不可重新挂载因为先前没有完全卸载_【译】React Hooks测试完全指南
原文地址:https://www.toptal.com/react/testing-react-hooks-tutorial 2018年底,React在16.8版本中引入了Hooks.它们(译注:指R ...
- 【译】什么是React Hooks
原文:What are React Hooks? 作者:Robin Wieruch 译者:博轩 React Hooks 于 2018年10月的React Conf 中引入,作为在 React 函数组件 ...
- 理解 React Hooks
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由志航发表于云+社区专栏 TL;DR 一句话总结 React Hooks 就是在 react 函数组件中,也可以使用类组件(classe ...
最新文章
- 织梦动态PHP可以删除吗,DeDe织梦cms如何全站动态化,取消静态功能
- 使用思维导图,优雅的完成自己的代码
- VTK:BiDimensionalWidget二维小部件用法实战
- 基于存储过程的ASP.NET用户登录示例
- sqlserver游标概念与实例全面解说
- ajax 请求post和get,ajax请求get和post
- c语言中区别一般变量,C语言中,为了区别一般的变量,符号常量必须用
- oracle取字段第三位字符,oracle截取字符串(截取某个字符前面的字符串)
- 仓库镜像源为清华_conda国内镜像修改(最新版)
- vue页面加载时闪现_Vue 闪现解决
- ASC20-21超算大赛开战——有一群年轻人正在用超算的力量改变世界
- 用Python实现斗地主游戏(终端版)
- Java毕设项目东理咨询交流论坛计算机(附源码+系统+数据库+LW)
- 巡检过程中有哪些注意事项?智能巡检了解一下
- (附源码)springboot社区快递代取服务系统 毕业设计051434
- Java简单题-----计算一元二次方程的根
- 最齐全的Cocos2D Cocos creator Cocos2Dx游戏源代码素材,速来收藏
- 那李逵是穿山度岭 水浒
- Kettle邮件发送
- 社群运营——你专属的新媒体流量入口! | 黎想