React hooks

什么是 Hook ?
官方介绍:Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

为什么要用hook?
改变了原始的React类的开发方式,改用了函数形式;它改变了复杂的状态操作形式,让程序员用起来更轻松;它改变了一个状态组件的复用性,让组件的复用性大大增加 。它可以说是react 2019年最最火的新特征了。

所有的hook
useState
useEffect
useContext
useReducer
useCallback
useMemo
useRef
useImperativeHandle
useLayoutEffect
useDebugValue
useState 和 useEffect
useState这个函数接收的参数是状态的初始值(Initial state),它返回一个数组,这个数组的第0位是当前的状态值,第1位是可以改变状态值的方法函数。 所以上面的代码的意思就是声明了一个状态变量为count,并把它的初始值设为0,同时提供了一个可以改变count的状态值的方法函数。

useEffect这个函数接收两个参数,第一个参数是一个匿名函数,相当于生命周期函数中的componentWillUnmount 函数的返回值也是一个匿名函数则相当于生命周期函数的 componentDidUnmount ,第二个值是一个数组可以传入很多状态对应的变量,意思是当状态值发生变化时,我们才进行解绑

引入

import React,{useState,useEffect} from 'react';
使用

function App(){
  const [count,setCount]=useState(0)//将useState进行解构
  useEffect(()=>{
    console.log('======App Enter======')//组件创建后执行
    return ()=>{
      console.log('======App End======')//组件销毁后执行
    }
  },[count])//组件负影响
  return(
    <div>
      <h1>{count}</h1>
      <button onClick={()=>{setCount(count+1)}}>click</button>
    </div>
  )
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值