其他分享
首页 > 其他分享> > react----Hooks的基本使用

react----Hooks的基本使用

作者:互联网

一、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("卸载")
        }
  },[])

  

 

    

标签:基本,React,Hooks,setCount,react,useState,handleClick,组件,useEffect
来源: https://www.cnblogs.com/ccyq/p/11380301.html