Hooks在函数组件中使用useState、useEffect、useRef、useContext

1、useState

只能在函数组件中，
[数据data，修改数据方法setData ]----固定形式 自定义命名，
setData 不能修改原值，
不能嵌套在if/for/其他函数中，

import {
     useState } from 'react'
function App () {
    
  // [数据，修改数据方法]----固定形式 自定义命名 建议保持语义化
  //解构赋值写法 所以useState返回是数组
  //初始值是0 之后的值就是最新的count数值
  const [count, setCount] = useState(0)
  //各互相独立
  const [flag,setFlag] = useState(true)
  const [list,setLIist] = useState([])
  function test(){
    
    setFlag(false)
    setLIist([1,2,3])
  }
  return (
    <div className="App">
      {
    /* setCount 不能修改原值：setCount(count++)是错的，而是基于原值计算得到新值替换原值 */}
      <button onClick={
    () => setCount(count + 1)}>{
    count}</button>
      <div><button onClick={
    test}>测试</button></div>
      <div>flag值:{
    flag?'1':'0'}</div>
      <div>list值:{
    list.join('-')}</div>
    </div>
  )
}
export default App

传参：

import {
     useState } from 'react'
function Counter (props) {
    
  const [count, setCount] = useState(()=>{
    
    return props.count
  })
  return (
    // 互相不影响
    <div><button onClick={
    () => setCount(count + 1)}>{
    count}</button></div>
  )
}
function App () {
    
  return (
    // 互相不影响
    <div >
      <Counter count={
    10}></Counter>
      <Counter count={
    20}></Counter>
    </div>
  )
}
export default App

2、useEffect

在dom渲染之后执行 ，三种执行时机。
没有依赖项时，初始化时执行一次，在修改数据更新组件都会执行useEffect（页面重新渲染）

import {
     useEffect, useState } from 'react'
function App () {
    
  const [count, setCount] = useState(0)
  // 当通过修改数据 更新组件时，useEffect会被执行
  //组件初始化时会默认先执行一次
  useEffect(() => {
    
    console.log('副作用又执行了')
  })
  return (
    <div >
      <button onClick={
    () => setCount(count + 1)}>{
    count}</button>
    </div>
  )
}
export default App

有空数组依赖项时，useEffect只在初始化时执行一次

import {
     useEffect, useState } from 'react'
function App () {
    
  const [count, setCount] = useState(0)
  // 当通过修改数据 更新组件时，useEffect会被执行
  //组件初始化时会默认先执行一次
  useEffect(() => {
    
    console.log('副作用又执行了')
  },[])
  return (
    <div >
      <button onClick={
    () => setCount(count + 1)}>{
    count}</button>
    </div>
  )
}
export default App

在这里发送网络请求，相当于在类组件的生命周期钩子函数componentDidMount阶段中。

import {
     useEffect } from 'react'
function App () {
    

  useEffect(() => {
    
    async function loadData(){
    
      const res = await fetch('http://geek.itheima.net/v1_0/channels')
      console.log(res);
    }
    //调用请求方法
    loadData()

    // 或者
    // function loadData () {
    
    // fetch('http://geek.itheima.net/v1_0/channels')
    // .then(response => response.json())
    // .then(res => {
    
    // console.log(res)
    // })
    // }
    // //调用请求方法
    // loadData()
  }, [])
  return (
    <div >

    </div>
  )
}
export default App

当有特定依赖项时，初始化时执行一次，在特定依赖项中任意给一个数据修改都会执行useEffect
相当于watch？ 但是useEffect的依赖项不同执行时机是不同的

import {
     useEffect, useState } from 'react'
function App () {
    
  const [count, setCount] = useState(0)
  const [name,setName] = useState('zs')
  // 当通过修改数据 更新组件时，useEffect会被执行
  //组件初始化时会默认先执行一次
  useEffect(() => {
    
    console.log('副作用又执行了')
  },[count,name])
  return (
    <div >
      <button onClick={
    () => setCount(count + 1)}>{
    count}</button>
      <button onClick={
    () => setName('hhhhhh')}>{
    name}</button>
    </div>
  )
}
export default App

清除useEffect

import {
     useEffect, useState } from 'react'
function Test () {
    
  //初始化时执行一次，[]修改数据不执行，初始化执行时创建了定时器，当组件销毁后定时器还在
  useEffect(() => {
    
    let timer = setInterval(() => {
    
      console.log('定时器')
    }, 1000)
    //所以需要一个return 进行清理操作
    return () => {
    
      clearInterval(timer)
    }
  }, [])
  return (
    <div>this is Test</div>
  )
}

function App () {
    
  const [flag, setFlag] = useState(true)
  return (
    // flag为true 时1显示组件Test false时为null 实现了组件销毁 而函数组件没有生命周期 只有类组件有。
    <div >
      {
    flag ? <Test /> : null}
      <button onClick={
    () => setFlag(!flag)}>创建或销毁</button>
    </div>
  )
}
export default App

3、useRef

import React from 'react'
import {
     useEffect, useRef } from 'react'
class TestC extends React.Component {
    
  state = {
    
    name:'test组件'
  }
  getName = ()=>{
    
    return 'this is child test'
  }
  render () {
    
    return (
      <div>我是类组件</div>
    )
  }
}
function App () {
    
  const testRef = useRef(null)
  const h1Ref = useRef(null)
  useEffect(()=>{
    
    //通过ref 获取组件、dom结构 在dom渲染之后执行
    console.log(testRef.current);
    console.log(testRef.current.state.name);
    console.log(testRef.current.getName());
    console.log(h1Ref.current);
  })
  return (
    <div >
      <TestC ref={
    testRef}></TestC>
      <h1 ref={
    h1Ref}>h1</h1>
    </div>
  )
}
export default App

4、useContext

import React, {
     createContext, useContext, useState } from 'react'
const Context = createContext()
function ComA () {
    
 //使用useContext接受数据 使用createContext创建的Context对象
  const count = useContext(Context)
  return (
    <div>
      这是comA 套着B:
      <br />
      从App传过来的数据为:{
    count}
      <ComB></ComB>
    </div>
  )
}
function ComB () {
    
 //使用useContext接受数据
  const count = useContext(Context)
  return (
    <div>
      这是最后一层comB。
      <br />
      从App传过来的数据为:{
    count}
    </div>
  )
}
function App () {
    
  const [count, setCount] = useState(0)
  return (
    <div>
      这是 App套着comA:
      <button onClick={
    () => {
     setCount(count + 1) }}>{
    count}</button>
      <Context.Provider value={
    count}>
        <ComA></ComA>
      </Context.Provider>
    </div>
  )
}
export default App 

分离出来
把createContext分装出来
context.js:

import {
     createContext } from "react"
const Context = createContext()
export default Context

直接包裹App.js
如果context 传递的数据 只需要在整个应用初始化时传递一次就可以 就在当前文件夹中做数据提供。
在index.js中：

import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import App from './App'
import Context from './context'
//如果context 传递的数据 只需要在整个应用初始化时传递一次就可以 就在当前文件夹中做数据提供
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <React.StrictMode>
    <Context.Provider value={
    100}>
      <App />
    </Context.Provider>

  </React.StrictMode>
)

App.js:

import React, {
     useContext} from 'react'
import Context from './context'
function ComA () {
    
  //使用useContext接受数据 使用createContext创建的Context对象
  const count = useContext(Context)
  return (
    <div>
      这是comA 套着B:
      <br />
      从App传过来的数据为:{
    count}
      <ComB></ComB>
    </div>
  )
}
function ComB () {
    
   //使用useContext接受数据
  const count = useContext(Context)
  return (
    <div>
      这是最后一层comB。
      <br />
      从App传过来的数据为:{
    count}
    </div>
  )
}
function App () {
    
  return (
    <div>
      这是 App套着comA:
        <ComA></ComA>
    </div>
  )
}
export default App