react hooks学习

Hook就是JavaScript函数，这个函数可以帮你钩入(hook into) React State以及生命周期等特性
使用注意额外规则：

• 只能在函数最外层调用Hook,不要在循环、条件判断或者子函数中调用；
• 只能在React的函数组件中调用Hook，不要在其它JavaScript函数中调用

useEffect

// useEffect() 接受一个回调函数，会在组件被渲染完成后 自动执行
userEffect(()=>{
  // 网络请求/DOM操作/事件监听
})

需要清除Effect

userEffect(()=>{
  // 网络请求/DOM操作/事件监听

 // 返回值：回调函数 =》 组件被重新渲染或者组件卸载的时候执行
 return () =>{
   // 这里可以取消监听
 }
})

一个函数式组件中可以存在多个useEffect；
默认情况下，useEffect的回调函数会在每次渲染的时候都重新执行，但是这会导致两个问题：

1. 某些代码我希望只执行一次即可(比如：网络请求)
2. 多次执行会有一定的性能问题
   解决方案:

// 表示谁的影响都不受，只会执行一次
const [count,setCount] = useState(0);
useEffect(()=>{
  // 发送一下网络请求
   return () =>{
    }
},[])
// 下面的只受count影响
useEffect(()=>{
  // 发送一下网络请求
   return () =>{
    }
},count)

useContext

之前的开发中，组件共享Context方式：

1. 类组件可以 类名.contextType = MyContext方式，在类中获取context;
2. 多个Context或者在函数式组件中通过MyContext.Consumer方式共享context;
   context/index.js

import { createContext } from "react";

const UserContext = createContext()
const ThemeContext = createContext()

export {
 UserContext,
 ThemeContext
}

app.js

import React, { memo, useContext } from 'react'
import { UserContext, ThemeContext } from "./context"

const App = memo(() => {
  // 使用Context
  const user = useContext(UserContext)
  const theme = useContext(ThemeContext)

  return (
    <div>
      <h2>User: {user.name}-{user.level}</h2>
      <h2 style={{color: theme.color, fontSize: theme.size}}>Theme</h2>
    </div>
  )
})
export default App