简单介绍部分react Hooks

1.useState

const [count, setCount] = useState(0)

局部状态管理的hook，异步

2.useEffect

useEffect(() => {
   }, [])

用于监听的hook，在函数组件中执行数据获取，操作dom等，类似于类组件的三个生命周期钩子函数（componentDidMount、componentDidUpdate、componentWillUnMount）

第一个参数是函数，在该函数中执行所需的操作；第二个的参数是依赖项，可以为空，空数组，或者字符串数组

依赖项-空数组：在组件挂载后只运行一次 => componentDidMount

依赖项-空/字符数组，依赖项改变时，在挂载/更新都会重新运行 => componentDidUpdate

useEffect(() =>{
   
	const timer = setInterVal(() => {
   }, 1000)
	return () => {
    clearInterVal(timer)} 
}, [xxx])

可以在return的函数中清除定时器，取消订阅等操作 => componentWillUnMount

3.useMemo

const count = useMemo(() => {
   return xxx; }, [xxx])

优化计算过程，当依赖项发生改变时才会重新计算，会返回一个值

4.useRef

const domRef = useRef(); domRef.current.xxx();

创建可变的ref对象，用于访问dom对象，组件实例或在函数式组件中保存可变的数据

5.高阶组件：React.memo()

用于优化组件的渲染性能，当接收的props没有变化时，该组件不会重新渲染

6.useContext

类组件：const myContext = React.createContext()

函数组件： const myContext = useContext(MyContext) // MyContext要获取数据的组件

实现跨组件传递数据，优于使用props层层传递。包含两部分：Provider、Consumer

提供数据

Provider

<MyContext.Provider value={xxx}>

​ <ChildComponent></ ChildComponent>

</MyContext.Provider>

访问共享数据

1.Consumer

<MyContext.Consumer>

​ {data => <div>{data}</div>}

</MyContext.Consumer>

2.const myContext = useContext(MyContext)

<ChildComponent>

​ const data = useContext(MyContext)

​ return <div>{data}</div>

</ChildComponent>

7.unstable_batchedUpdates

当存在异步操作时，多次的set会导致多次的渲染，因此我们可以使用该方法，合并set操作，减少渲染次数；可以直接调用react-redux中的batch（底层也是调用的unstable_batchedUpdates）

import React, {
   useState} from "react";
import ReactDOM from "react-dom";
import "./styles.css"