hooks基本使用

1.useState

作用:

useState为函数组件提供状态（state）

使用步骤

1. 导入 useState 函数
2. 调用 useState 函数，并传入状态的初始值
3. 从useState函数的返回值中，拿到状态和修改状态的方法
4. 在JSX中展示状态
5. 调用修改状态的方法更新状态

import React, { useState } from 'react'
import styles from './App.module.css'

export const FSon = (props: any) => {
  console.log('函数组件', props)

  // 参数：状态初始值比如,传入 0 表示该状态的初始值为 0
  // 返回值：数组,包含两个值：1 状态值（state） 2 修改该状态的函数（setState）
  const [count, setCount] = useState(0)
  return (
    <div className={styles.two}>
      <button
        onClick={() => {
          setCount(count + 1)
        }}
      >
        {count}
      </button>
    </div>
  )
}

状态的读取和修改

读取状态

该方式提供的状态，是函数内部的局部变量，可以在函数内的任意位置使用

修改状态

1. setCount是一个函数，参数表示最新的状态值
2. 调用该函数后，将使用新值替换旧值
3. 修改状态后，由于状态发生变化，会引起视图变化

注意事项

1. 修改状态的时候，一定要使用新的状态替换旧的状态，不能直接修改旧的状态，尤其是引用类型

进阶 --  useState - 回调函数的参数

使用场景：

参数只会在组件的初始渲染中起作用，后续渲染时会被忽略。

如果初始 state 需要通过计算才能获得，则可以传入一个函数，在函数中计算并返回初始的 state，此函数只在初始渲染时被调用

语法

const [name, setName] = useState(()=>{   
  // 编写计算逻辑    return '计算之后的初始值'
})

语法规则

1. 回调函数return出去的值将作为 name 的初始值
2. 回调函数中的逻辑只会在组件初始化的时候执行一次

语法选择

1. 如果就是初始化一个普通的数据 直接使用 useState(普通数据) 即可
2. 如果要初始化的数据无法直接得到需要通过计算才能获取到，使用useState(()=>{})

import React from 'react'
import { useState } from 'react'

function Counter(props: any) {
  const [n, setn] = useState(() => {
    return props.count
  })
  console.log('props中的 count', props)
  console.log('n', n)

  return (
    <div>
      <button onClick={() => setn(n + 1)}>{n}</button>
    </div>
  )
}

export function Header() {
  return (
    <>
      <Counter count={10} />
    </>
  )
}

 props中的数据没有改变，变得是hooks下得state状态

2.useEffect

作用：

1. 数据请求 ajax发送
2. 手动修改dom
3. localstorage操作

基础使用

（1） 不添加依赖项

执行时机：

组件首次渲染执行一次，以及不管是哪个状态更改引起组件更新时都会重新执行
1. 组件初始渲染
2. 组件更新 （不管是哪个状态引起的更新）

useEffect(()=>{
    console.log('副作用执行了')
})

（2）添加空数组

执行时机： 组件只在首次渲染时执行一次

useEffect(()=>{
	 console.log('副作用执行了')
},[])

（3）添加特定依赖项

执行时机：

1. 首次渲染时执行

2. 在依赖项发生变化时重新执行

function App() {  
    const [count, setCount] = useState(0)  
    const [name, setName] = useState('zs') 
    
    useEffect(() => {    
        console.log('副作用执行了')  
    }, [count])  
    
    return (    
        <>      
         <button onClick={() => { setCount(count + 1) }}>{count}</button>      
         <button onClick={() => { setName('cp') }}>{name}</button>    
        </>  
    )
}

（4）useEffect-发送网络请求

在内部单独定义一个函数，然后把这个函数包装成同步

useEffect(()=>{   
    async function fetchData(){      
       const res = await axios.get('http://geek.itheima.net/v1_0/channels')                            console.log(res)   
    } 
},[])

3.useRef

作用：

取真实dom 或 类组件实例

使用步骤

1. 导入 useRef 函数
2. 通过ref 绑定 要获取的标签或者类组件  <CSon ref={classRef}></CSon>
3. 执行 useRef 函数并传入null , const classRef = useRef(null)
4. classRef.current 拿到 标签或类组件

import React from 'react'
import { useEffect, useRef } from 'react'
import { CSon } from './CSon'

export function Header() {
  const h1Ref = useRef(null)
  const classRef = useRef(null)
  useEffect(() => {
    console.log('h1Ref.current', h1Ref.current)
    console.log('classRef.current', classRef.current)
  }, [])
  return (
    <div>
      <h1 ref={h1Ref}>this is h1</h1>
      <CSon ref={classRef}></CSon>
    </div>
  )
}