Hook

userState

状态的读取和修改

const [count, setCount] = useState(0)
count: 这个状态的值
setCount(): 修改这个状态的函数
0: 就是这个状态的初始值

demo

count Counter = (props) => {
  const [count, setCount] = useState(0);
  useEffect(() => {
    setCount(props.count)
  }, [])
  function handleClickEvent() {
    setCount(count + 1)
  }
  return (
    <div onClick={handleClickEvent}>Count: {count}</div>
  )
}

SetCount修改状态时，App组件会再次渲染，整个函数重新执行。

useState注意事项

1.只能出现在函数组件中

2.不能嵌套在if,for,其他函数中，只能写在组件函数最外层

props重要属性

1. 父组件向子组件传递变量
2. props.child 表示当前组件中的子组件

useEffect

执行时机： 组件渲染完成后执行

函数的作用一般是得到返回值，但是在函数过程中进行其他操作

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

执行时机

1. 不加依赖项 —初始化+重新渲染都会执行一次
2. 加[], 初始化执行一次
3. 加特定的依赖项[name,count], 首次执行+任意一个变化执行

import { useEffect, useState } from "react"
import axios from "axios"

function UseEffectDemo() {
    const [list,setList] = useState([])

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

    return (
        <ul>
          {list.map((item) => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      )
}

export default UseEffectDemo

useRef-获取dom对象

useContext

useContext可以帮助我们跨越组件层级直接传递变量，实现数据共享.

参数传递

父组件传给子组件

// 路由配置
import {useState} from 'react'

// 子组件通过props对象获取
function Count(props) {
  const [count,setCount] = useState(props.count)
  return (
    <div>
      当前count={count}
      <button onClick={()=>{setCount(count+1)}}>addItem</button>
    </div>
  )
}

// 父组件传第count参数
function App() {
  return (
    <Count count={1} />
  );
}

export default App;

Mobx介绍

独立组件进行集中状态管理，实现多个组件共享状态，状态修改时，对于的组件也会重新渲染

yarn add mobx
yarn add mobx-react-lite

创建store目, walletSotre.jss类文件

import { makeAutoObservable } from "mobx"

class WalletStore {
  list = []
  // 构造函数
    constructor() {
        makeAutoObservable(this)
    }
      // 计算属性
   get filterList(){
     return this.list.filter(item=>item.id>3)
   }
    setWallet = async () => {
        // todo
        })
    }
}

const walletStore = new WalletStore
export default walletStore

使用store类

// 1.导入observer函数和store类
import { observer } from 'mobx-react-lite'
import walletStore from '../../store/WalletStore';

function Metamask() {
  async function connectToMetamask() {
    await walletStore.setWallet()
  }
  return (
    <div>
      {connectToMetamask()}
    </div>
  )
}

// 2.observer组件
export default observer(Metamask);

把多个store集中管理，放到RootStore中

// 把所有的store做统一处理
import React from "react";
import LoginStore from "./login.Store";

class RootStore {
    // 1.有几个store,就新增几个属性保存对应的store实例
    constructor(){
        this.loginStore = new LoginStore()
    }
}

// 实例化RootStore,并且给context
const rootStore = new RootStore()
const context = React.createContext(rootStore)

const useStore = ()=> React.useContext(context)

export {useStore}

react-hook-form

react之前使用类组件来实现可控组件，如果用hook模式的组件

yarn add react-hook-form

本作品采用《CC 协议》，转载必须注明作者和本文链接