React基础：Hook（useState、useRef、useContext）

前言

react中组件分为两大类：类组件和函数式组件。学习组件时官方文档推荐使用函数式组件，函数式组件效率更高。但是类组件具有自己的状态，为了使函数式组件也可以拥有类似state这样的东西，react在16.8中新增了Hook,Hook只能在函数式组件中使用。

Hook官方文档

使用规则

不要在循环，条件或嵌套函数中调用 Hook

只在 React 函数中调用 Hook ，不要在普通的 JavaScript 函数中调用 Hook。

使用规则

useState

useState 为函数式组件添加一个内部的state，语法如下：

const [state,setState]=useState(初始值)

state是一个状态变量，你可以起其他的变量名
setState是一个函数名，用于更新声明的这个状态
添加state时要给状态一个初始值

声明state变量

const [age,setAge] = useState(10)
const [fruit,setFruit] = useState('banana')

实例

import React, { useState } from 'react';

function Example(props) {
    const [count, setCount] = useState(0)
    return (
        <div>
            <p>你点击了{count}次</p>
            <button onClick={() => setCount(count + 1)}>加一</button>
        </div>
    )
}

export default Example;

或

const Test1 = () => {

    const [count, setCount] = useState(0)

    const changeCount = () => {
        setCount(count + 1)
    }
    return (
        <div>
            <p>数值：{count}</p>
            <Button onClick={changeCount}>点击</Button>
        </div>
    )
}

基本使用

//方式1：一般用法
 function handleClick() {
    setCount(count + 1)
  }
//方式2：函数式用法
function handleClickFn() {
  setCount((prevCount) => {
    return prevCount + 1
  })
}

那什么时候使用一般用法，什么时候使用函数式用法。
如果你的事件处理函数中没有使用到这个值，那么两种方式都可以；如果使用到了这个值，那么必须使用函数式用法。

实例

let Test = () => {

    let [num, setNum] = useState(0)
    let addNum = () => {
        setNum(num + 1)
        console.log("num是：",num)
    }
    return (
        <div style={{ marginTop: '50px' }}>
            <div>数值：{num}</div>
            <Button type="primary" onClick={addNum}>加一</Button>
        </div>
    )
}

可以看到结果不是最新的

 let addNum = () => {
      setNum(num => {
          let result = num + 1
          console.log(result)
          return result
      })
  }

useRef

用法与vue3的useRef类似，vue是.value获取值，react是.current获取值

useContext

const value = useContext(MyContext);

接收一个 context 对象（React.createContext 的返回值）并返回该 context 的当前值。当前的 context 值由上层组件中距离当前组件最近的 的 value prop 决定。
当组件上层最近的 更新时，该 Hook 会触发重渲染，并使用最新传递给 MyContext provider 的 context value 值

看了一些文章后，感觉类似与一个全局共用属性。以主题为例，当主题修改后，登录界面的主题会变，首页界面的主题也会变

//theme.js 存储主题和ThemeContext对象

import { createContext } from 'react'
const themes = {
    light: {
        background: '#eeeeee',
        color: '#000000'
    },
    dark: {
        background: '#000000',
        color: '#eeeeee'
    }
};
const ThemeContext = createContext(themes.light)
export {
    themes,
    ThemeContext
}

// App.js

import './App.css';
import 'element-theme-default';

import { useState } from 'react'
import { Button } from 'element-react';
import { ThemeContext, themes } from './components/theme/theme';

import Login from './components/login/login.jsx'

function App() {
  const [flog, setFlog] = useState(false)
  const [theme, setTheme] = useState(themes.light)

  const changeTheme = () => {
    if (flog) {
      setTheme(themes.light)
    } else {
      setTheme(themes.dark)
    }
    setFlog(!flog)
  }

  return (
    <div className="App">
      <ThemeContext.Provider value={theme} >
        <Login />
        <Button onClick={() => changeTheme()}>切换主题</Button>
      </ThemeContext.Provider>
    </div>
  );
}

//Login.jsx

import { useContext } from 'react'
import { ThemeContext } from '../theme/theme'
const Login = (props) => {
    const theme = useContext(ThemeContext)
    return (
        <div style={{ background: theme.background ,color:theme.color}}>登录界面</div>
    )
}

export default Login;

自定义Hook

官方文档

自定义 Hook 是一个函数，其名称必须以 “use” 开头，函数内部可以调用其他的 Hook。本质上就一个公共方法，用来处理不同组件共用的业务逻辑，它可以有他自己的入参和返回值。

其他常用

添加链接描述