文档章节

react----Hooks的基本使用

o
 osc_g8254g7s
发布于 2019/08/19 22:49
字数 615
阅读 5
收藏 0

精选30+云产品,助力企业轻松上云!>>>

一、react-hooks概念

React中一切皆为组件,React中组件分为类组件和函数组件,在React中如果需要记录一个组

件状态得时候,那么这个组件必须是类组件,那么能否让函数组件拥有类组件得功能?这时候

我们就需要使用hook
Hooks让我们函数组件拥有了类似组件得特性,Hook是React16.8中新增得功能,他们允许

您在不编写类的情况下使用状态和其他React功能

二、为什么React中需要类组件

1、需要记录当前组件的状态

2、需要使用组件的一些生命周期

三、类组件与Hooks对比

import React, { Component,Fragment} from "react";

export default class App extends Component{
   constructor(){
    super();
    this.state = {
      n:0
    }
    this.handleClick = this.handleClick.bind(this)
   }
  render(){
    let {n} = this.state
    return(
      <div>
        <h3>{n}</h3>
        <button onClick={this.handleClick}>修改</button>
      </div>
    )
  }
  handleClick(){
    this.setState({
      n:this.state.n+1
    })
  }
}



函数组件
import React, { Component,Fragment,useState} from "react";

  export default ()=>{
    let [n,setCount] = useState(0);
    const handleClick = ()=>{
      n+=1;
      setCount(n)
    }
    return (
      <div>
        <h3>{n}</h3>
        <button onClick={handleClick}>点击</button>
      </div>
    )                  }                                                                                                                                   
  useState:创建一个状态,这个状态为0
  n:代表当前状态值也是0
  setCount:更新状态的函数  

四、Hooks常用的方法

useState、useEffect、useContext
useState:函数   存储的当前组件的一些状态

参数:所需要的状态值

返回值:数组
    
    1.当前状态的Key值
    2.修改当前状态的函数  

五、useEffect基本使用

模拟组件状态的一些生命周期

    比如:componentDidMount、componentDidUpdate、componentWillUnmount
useEffect中有两个参数
     第一个参数是一个函数,
     第二个参数是一个依赖的数据。

第二个参数用来决定是否执行里面的操作,可以避免一些不必要的性能损失,
只要第二个参数中的成员的值没有改变,就会跳过此次执行。
如果传入一个空数组[],那么该effect只会在组件mount和unmount时期执行

useEffect模拟componentDidMount && componentDidUpdate

import React, { Component,Fragment,useState,useEffect} from "react";

export default ()=>{
    let [n,setCount] = useState(0);
    const handleClick = ()=>{
        n+=1;
        setCount(n)
    }
    useEffect(() => {
        console.log(111)
    })
    return (
        <div>
            <h3>{n}</h3>
            <button onClick={handleClick}>点击</button>
        </div>
       
    )

} 

只在componentDidMount中执行

import React, { Component,Fragment,useState,useEffect} from "react";

export default ()=>{
    let [n,setCount] = useState(0);
    const handleClick = ()=>{
        n+=1;
        setCount(n)
    }
    useEffect(() => {
        console.log(111)
    },[])
    return (
        <div>
            <h3>{n}</h3>
            <button onClick={handleClick}>点击</button>
        </div>
       
    )

} 

useEffect模拟componentWillUnMount

useEffect中还可以通过让函数返回一个函数来进行一些清理操作(比如事件的移除)

useEffect(() => {
        console.log(111)
        return()=>{
            console.log("卸载")
        }
  },[])

  

 

 
  
o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
基于 Webpack 4 和 React hooks 搭建项目

面对日新月异的前端,我表示快学不动了😂。 Webpack 老早就已经更新到了 V4.x,前段时间 React 又推出了 hooks API。刚好春节在家里休假,时间比较空闲,还是赶紧把 React 技术栈这块补上。...

Jeff.Zhong
2019/02/04
0
0
React Hooks简单业务场景实战(非源码解读)

前言 React Hooks 是React 16.7.0-alpha 版本推出的新特性。从 16.8.0 开始,React更稳定的支持了这一新特性。 它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 注意:...

ldld
2019/06/22
0
0
基于 Webpack 4 和 React hooks 搭建项目

面对日新月异的前端,我表示快学不动了😂。 Webpack 老早就已经更新到了 V4.x,前段时间 React 又推出了 hooks API。刚好春节在家里休假,时间比较空闲,还是赶紧把 React技术栈这块补上。...

osc_dos38x1o
2019/02/04
2
0
使用 React Hooks 代替 Redux

使用 React Hooks 代替 Redux 注: 此文章立场不表示 Hooks 可以完全代替 Redux。 因为 Redux 还有其他适用的场景和功能,只是在大部分场景可以用 Hooks 代替。 理性选择即合理。 React Hook...

张miro
2019/08/24
0
0
一次完整的react hooks实践

写在前面 本文首发于公众号:符合预期的CoyPan React在16.8版本正式发布了Hooks。关注了很久,最近正好有一个小需求,赶紧来试一下。 需求描述 需求很简单,部门内部的一个数据查询小工具。大...

CoyPan
2019/03/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring Cloud开发人员如何解决服务冲突和实例乱窜?(IP实现方案)

点击上方“陶陶技术笔记”关注我 回复“资料”获取作者整理的大量学习资料! 一、背景 在我上一篇文章《Spring Cloud开发人员如何解决服务冲突和实例乱窜?》中提到使用服务的元数据来实现隔...

zlt2000
2019/09/06
0
0
Linux下diff命令用法详解

大家好,我是良许。 我们在平时工作的时候,经常要知道两个文件之间,以及同个文件不同版本之间有何异同点。在 Windows 下,有 beyond compare 这个好用的工具,而在 Linux 下,也有很多很强...

osc_th8jvcw7
17分钟前
0
0
万变不离其宗之UART要点总结

[导读] 单片机开发串口是应用最为广泛的通信接口,也是最为简单的通信接口之一,但是其中的一些要点你是否明了呢?来看看本人对串口的一些总结,当然这个总结并不能面面俱到,只是将个人认为...

osc_kyehmyzk
18分钟前
7
0
kafka的认识、安装与配置

认识Kafka 花费越少的精力在数据移动上,就能越专注于核心业务 --- 《Kafka:The Definitive Guide》 认识 Kafka 之前,先了解一下发布与订阅消息系统:消息的发送者不会直接把消息发送给接收...

osc_wy8nhxhn
20分钟前
0
0
使用pandas进行数据处理——DataFrame篇

  今天是pandas数据处理专题的第二篇文章,我们一起来聊聊pandas当中最重要的数据结构——DataFrame。   上一篇文章当中我们介绍了Series的用法,也提到了Series相当于一个一维的数组,只...

开源仔
20分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部