React hooks

2020-12-28 16:33:32 阅读：212 来源： 互联网

标签：count 函数 hooks React useState 状态值 useEffect

什么是 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>
  )
}

标签：count,函数,hooks,React,useState,状态值,useEffect
来源： https://blog.csdn.net/ZuoZuoDangerou/article/details/111868940

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

React hooks