前端
一点也不简单

React中的React Hooks

众所周知,React组件可以分为函数组件class组件

class组件应该没有什么异议了,什么都可以做,然而函数组件却有着许多的局限性,因为他是函数,所以我们没法在里面写方法啊,定义状态什么之类的

作用:其实React Hooks的主要作用是让我们可以在函数组件里写state和生命周期钩子

他有两个方法

  • useState
  • useEffect

useState

作用:用来在函数式组件中定义state的

用法:

import React,{ useState } from 'react'

const Hooks = () =>{
    const[count,setCount]=useState( 0 ) // count = 0  setCount是一个方法, 用来操作count
    return (
        <div>
            Hooks
            <hr></hr>
            <button onClick={ () => { setCount( count + 1 )} }>修改count</button>
            <p>{ count }</p>
        </div>
    )
}

export default Hooks
Hooks的useState方法

useEffect

作用:类似于componentDidMount // componentDidUpdate,当state改变时触发

用法:

import React,{ useState,useEffect } from 'react'

const Hooks = () =>{
    const[count,setCount]=useState( 0 ) // count = 0  setCount是一个方法, 用来操作count
    useEffect( ()=>{
        console.log( 'state发生了改变' )
        document.title = `你点击了${ count } 次`
    } )
    return (
        <div>
            Hooks
            <hr></hr>
            <button onClick={ () => { setCount( count + 1 )} }>修改count</button>
            <p>{ count }</p>
        </div>
    )
}

export default Hooks
useState和useEffect

页面一打开是必然执行一次的和 componentDidMount 一样

赞(2) 打赏
未经允许不得转载:专注前端开发和vps技术交流的博客-纸飞机 » React中的React Hooks

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

微信扫一扫打赏