React Hook

简介 ：
原本函数组件和类组件同为react组件，但是由于函数组件为无状态组件，react hook 的引入，让函数组件有了他的状态，可以通过 react hook 增加相应状态。

hook的使用规则

Hook 就是 JavaScript 函数，但是使用它们会有两个额外的规则：

• 只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。
• 只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用。（还有一个地方可以调用 Hook —— 就是自定义的 Hook 中，我们稍后会学习到。）

自定义hook

1. 当我们想在两个函数之间共享逻辑时，我们会把它提取到第三个函数中。而组件和 Hook 都是函数，所以也同样适用这种方式。
2. 自定义 Hook 是一个函数，其名称以 “use” 开头，函数内部可以调用其他的 Hook。

hook 的规则

1. 只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。
2. 只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用。（还有一个地方可以调用 Hook —— 就是自定义的 Hook 中。）
3. 自定义hook时它的名字应该始终以 use 开头，这样可以一眼看出其符合 Hook 使用规则。

hook API

• 基础Hook

1. useState
2. useEffect
3. useContext

实现一个高阶组件

const PrivateRoute = ({ component: Component, ...rest }) => {
  return (
    <Route {...rest} render={(props) => {
      if (fakeAuth.isAuthenticated) {
        return <Component {...props} />
      } else {
        return <Redirect to={{
          pathname: '/login',
          state: props.match.url
        }}></Redirect>
      }
    }}></Route>
  )
}

useState 的基本写法

import { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

可定义多个state

function ExampleWithManyStates() {
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
  // ...
}

useEffect 的基本写法

useEffect 也叫做函数副作用， 他替代了一些 React 生命周期函数，componentDidMount, componentDidUpdate, componentWillUnmount;
return 出去的就是解绑副作用，比如解除页面定时器等防止内存泄漏的方法；
他的第二个参数数个数组，作用是只要数组内的值变化了，才会执行解绑动作，如果数组为空，则会在页面销毁时去最后执行。

  useEffect(()=>{
        handlefatch()
        return () => {...code}
    }, [] )

handlefatch = () => {
  console.log("我是a")
}