[JavaScript知识库]React Hooks

目录

一、为什么使用hooks

二、useState

1、作用

2、使用步骤

三、useEffect

1、作用

2、使用步骤

3、依赖项的几种添加情况

3.1、不添加依赖项

3.2、添加空数据

3.3、添加特定依赖项

四、useRef

1、作用

2、使用步骤

五、useContext

1、作用

2、使用步骤

---

一、为什么使用hooks

1、高阶组件为了复用，导致代码层级复杂

2、生命周期的复杂

3、写成function组件，无状态组件，但是又需要状态，改成class组件成本太高

注意：hooks为函数组件提供了状态

二、useState

1、作用

为函数组件提供状态

2、使用步骤

1、导入useState函数，调用并传入状态的初始值

2、从useState函数的返回值中，拿到状态和修改状态的方方法

3、调用修改状态的方法更新状态

注意：不能直接修改旧的状态

//导入useState
import React,{useState} from 'react'
const Use = () => {
const [numb, setnumb] = useState(0)
  return (
    <div>
        <p>{numb}</p>
        <button onClick={() => {
            //更新状态
            setnumb(
                numb + 1
            )
        }}>按钮</button>
    </div>
  )
}

三、useEffect

1、作用

为react函数提供副作用处理

2、使用步骤

1、导入useEffect函数

2、调用useEffect函数，并传入回调函数

3、在回调函数中编写副作用处理

4、修改数据状态

// 导入useEffect函数
import React,{useState, useEffect} from 'react'

const Use = () => {
const [numb, setnumb] = useState(0)
useEffect(() => {
  // 副作用处理
  console.log(`点击了${numb}次`);
})
  return (
    <div>
        <p>{numb}</p>
        <button onClick={() => {
          // 修改数据状态
            setnumb(
                numb + 1
            )
        }}>按钮</button>
    </div>
  )
}

3、依赖项的几种添加情况

3.1、不添加依赖项

1、组件第一次渲染时执行

2、件中任何状态更新都会重新执行

useEffect(() => {
  // 副作用处理
  console.log(`点击了${numb}次`);
})

3.2、添加空数据

组件只在第一次渲染时执行一次

useEffect(() => {
  // 副作用处理
  console.log(`点击了${numb}次`);
}，[])

3.3、添加特定依赖项

1、副作用函数在首次渲染时执行

2、在依赖项发生变化时也会重新执行

// 导入useEffect函数
import React,{useState, useEffect} from 'react'

const Use = () => {
const [numb, setnumb] = useState(0)
useEffect(() => {
  // 副作用处理
  console.log(`执行了`);
},[numb])
  return (
    <div>
        <p>{numb}</p>
        <button onClick={() => {
          // 修改数据状态
            setnumb(
                numb + 1
            )
        }}>按钮</button>
    </div>
  )
}

四、useRef

1、作用

在函数组件中获取真实dom元素对象或者组件对象

2、使用步骤

1、引入useRef函数

2、调用useRef()方法接收它的返回值

3、在获取的元素上进行绑定，通过ref属性将useRef的返回值绑定到元素身上

4、useRef返回对象的current属性对应着获取的元素

import React, {useRef} from 'react'

const Useref = () => {
    const Dwh = useRef();
    const Ps = Dwh.current.querySelectorAll('p')
    console.log(Dwh);
    console.log(Ps);
  return (
    <div ref={Dwh}>
        <p></p>
        <p></p>
        <p></p>
    </div>
  )
}

export default Useref

五、useContext

1、作用

跨越组件层级直接传递变量，实现数据共享

2、使用步骤

1、使用createContext创建Context对象

2、在外层组件通过Provider提供数据

3、在内层组件通过useContext函数获取数据

//导入
import { createContext, useContext } from 'react'
// 创建Context对象
const Context = createContext()
function App() {  
    return (    
        // 外层组件通过Provider提供数据    
        <Context.Provider value={'传递数据'}>     
            <div>
              <choo />
            </div>    
        </Context.Provider>  
    )
}

function choo() {  
    // 内层组件通过useContext函数获取数据  
    const data = useContext(Context)  
    return (
         <div>{data}</div>
    )
}