react-hook的基本使用

1.useState

  用来hook数据

import {useState} from 'react'

function App () {
   //const ['数据名称'，'操作数据的方法'] =useState(初始值)
   const [num, setNum] = useState(0)
   //定义给ui组件绑定的处理数据方法
   const hanlde = () => {
   setNum(num + 1)
  }

return(
  < onClick={this.hanlde} div />
)

}

2.useEffect

  用来代替生命周期函数，类似与componentDidMount

import { useState,useEffect } from "react"

function App() {
  // hook操作数据
  const [count, setCount] = useState(0)
  // hook代替生命周期函数
  useEffect(()=>{
    document.title= `点击了${count}次`
  })
  const increment = () => {
    setCount(count +1)
  }
  return (
    <button onClick={increment}>点击了{count}次</button>
  );
}

export default App;

可以在其中定义请求数据的函数，但不能直接在内使用async await关键词，可以在外定义后再拿到useEffect里进行调用

 

3.useContext

  代替reactContext

//导入useContext
import {useContext} from 'react'

// 创建Context
const userNameContext = react.createContext()

// 定义要传入的数据
const username = 'cloudgaps'

//在需要传递数据的根组件上使用Provider
  <userNameContext.Provider>
     <APP / value={ username }>
  </ userNameContext.Provider>

//在需要使用数据的组件内部使用数据
function App() {
  //使用useContext接受传递过来的value
 const value = useContext(userNameContext )
  return (
    <div> hello {value} </div>
  );
}

4.useReducer

import {  useReducer } from "react";
import React from 'react'




function App() {
  // 创建需要被管理的数据的初始状态
  const initialState = {
    conut: 0
  }
  // 创建管理数据的方法 state是组件的状态 action用来告诉reducer应该怎样处理数据
  function reducer(state, action) {
    console.log(state.count)
    switch (action.type) {
      case 'increment':
        return {
          conut: state.count + 1
        }
      default:
        return initialState
    }
  }
  //用useReducer定义state和dispatch的方法
  const [state, despatch] = useReducer(reducer, initialState)
  return (
    <div>
      <div>{state.count}</div>
      <button onClick={() => { despatch({ type: 'increment' }) }}>增加</button>
    </div>
  );
}

export default App;