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>
  )
}
上一篇:React Hooks 中 useEffect 的介绍


下一篇:React劲爆新特性Hooks重构去哪儿网火车票PWA