react hooks的学习补充

Hooks 是 React 16 中的特性，解决函数组件想使用类组件的一些特性。

useEffect

一般在函数组件里使用该hooks调接口获取数据
useEffect不传递第二个参数会导致每次渲染都会运行useEffect。然后，当它运行时，它获取数据并更新状态。然后，一旦状态更新，组件将重新呈现，这将再次触发useEffect
remark:useEffect的第二个参数为一个数组，如果想在特定的逻辑里面执行相关代码，可以操作该数组，数组里可以存放状态

useStore

获取getState方法，getState与useSelelctor功能类似

useSelector

共享状态,从redux的store对象中提取数据(state)。
const obj=useSelector(state=>state.obj)
简单好用！！！

import {useSelector} from 'react-redux';

useDispatch

返回Redux store中对dispatch函数的引用。你可以根据需要使用它。
const dispatch = useDispatch();

import {useDispatch} from 'react-redux';

useContext

上下文 如果需要在组件之间共享状态，可以使用useContext()。
在两个子组件上创建createContext（）

useReducer

reducer的代替品，接受两个参数

useMemo

传递“创建”函数和一系列依赖项。useMemo仅在其中一个依赖项已更改时才重新计算存储的值。此优化有助于避免对每个渲染进行昂贵的计算。

useHistory

const history = useHistory();
  	function handleClick() {
    	history.push("/home");
 }
 //有时打印history为undefined
 函数组件
import React from 'react’ 
import { withRouter } from 'react-router-dom’ 
export const ButtonWithRouter = withRouter(({ history }) => { 
    console.log('history', history) 
    return () 
})
//类组件
import React from "react";
import {withRouter} from "react-router-dom";

class MyComponent extends React.Component {
  ...
  myFunction() {
    this.props.history.push("/some/Path");
  }
  ...
}
export default withRouter(MyComponent);

useState

返回一个有状态值，以及一个更新它的函数。

useRef

ref可以用来获取组件实例对象或者是DOM对象。

而useRef这个hooks函数，除了传统的用法之外，它还可以“跨渲染周期”保存数据。

useCallback

接受两个参数，函数和依赖项，可以缓存上次的函数减小创建函数的代价

useImperativeHandle

可以通过配合useRef、forwordRef将子组件的属性和方法传给父组件使用