( 注意博主纯手敲代码可能会出现符号或单词错误，注意辨认即可！)~~
众所周知，react 在16.8版本后更新了hooks，他有着天然的优势
（1）对静态组件没有破坏性改动，只是在原有代码上增加功能
（2）没有this
（3）函数式编程 （4）通过自定义hooks实现公共代码抽离
下面就开始更新Hooks的各种用法
1.useState 让静态组件有自己的state
我们通过useState 让我们的静态组件拥有自己的state 不用在一直this访问内部state了
import { useState} from 'React'
//首先创建一个函数
const App=()=>{
let [state,setState]=useState(0);
//state为初始值名称(状态值) ，setState为修改state的函数 useState(初始值)
//我们用state做一个加减案例
return(
<>
<p>{state}</p>
<button onClick={()=>{ setstate(state+1)}}>点击加一</button>
</>
)
}
export default App;
效果如下：
2.useEffect 让静态组件有自己的声明周期方法
useEffect 有四种情况 取决于他带不带参数
<1>useEffect(()=>{}); 相当于类组件的componentDidMount+componentDidUpdate
说明:组件初始化执行一次，任何state改变都会执行一次
<2>useEffect(()=>{},[state]); 相当于类组件的componentDidMount+componentDidUpdate
说明:组件初始化执行一次，仅指定state改变都会执行一次
<3>useEffect(()=>{},[]); 仅相当于类组件的componentDidMount
说明:组件初始化执行一次，更新state不执行
说明2：初始化组件的ajax、绘制图形库
<4>useEffect(()=>{ //代码 return ()=>{//相当于类组件的componentWillUNmount }
},[])
四种情况不一一演示,我们还是通过案例来操作
//这次我们做一个异步获取邮箱的案例
import {useState,useEffect} from 'React'
import axios from 'axios ']
const App=()=>{
//首先创建state 状态
let [email ,setEmail]=useState(null);
let [loding,setLoding]=useState(false);
//我们的思路是 Loding 为true的时候获取数据 为false 的时候显示数据
useEffect(()=>{
const asyncOne= async ()=>{
if(loding){
const data=await axios.get("https://jsonplaceholder.typicode.com/users")
setEmail(data.data[1].email);
setLoding(false);
}
}
asyncOne();
},[ loding])
}
//事件
<p>email:{loding?loding...:email}</p>
<button onClick={()=>{setLoding(true)}}>点击获取邮箱</button>
//导出组件
export default App();
3.useContext是让子组件之间共享父组件传入的状态的。作用通俗地说是带着子组件去流浪。
useContext 这个组件我想跟 useReducer 一起讲但是为了方便记忆我还是给大家分开写后续做总结吧
1他的步骤是这样 ，首先创建Context对象
2创建数据放到 Context对象的Provider 的value中
3组件使用useContext进行访问
//创建context.js 文件
import React from 'React'
const ThemeContext =react.createContext(null);
export default ThemeContext;
//创建数据
export const data =[
{name:'小甜吃屁',age:18,sex:"女"},
{name:'小七大帅B',age:19,sex;"男"},
]
//创建父组件
import React, { useContext } from 'react';
import {ThemeContext} from './context.js'
import data from './data.js'
import Child from './child.js'
export const app=()=>{
return(
<ThemeContext.Provide value={data}>
//传递给子组件
</Child>
</ThemeContext.Provider>
)
}
//子组件接收并使用
import { useContext } from "react";
import { ThemeContext}from './context'
const Child =()=>{
// 使用 useContext 获取 ThemeContext 中存储的值
let data=useContext(ThemeContext)
//然后我们处理数据就可以了
let datas=data.map((value)=>{
return <div key={value.name}>{ value.name}</div>
})
return(
<div>{datas}</div>
)
}
//这里就写完啦
4.useReducer 是 usestate 的另一种方式
//首先我们需要先引入
import React ,{useReducer} form 'react'
//然后我们创建初始的state
const initialState={
count:0，
}
//然后我们创建reducer函数
function reducer (state,action){
switch (action.type){
case "ADD":
return {count:state.count+1}
case "SUB":
return {count:state.count-1}
default :
throw new Error();
}
}
//组件返回值
function UseReducer (){
const[state,dispatch]=useReducer(reducer,initialState)
// 初始值 dispatch修改初始值 注册reducer这个函数， state里的initialState初始值
return (
<>
<p> {state.count}</p>
<button onClick={() => dispatch({ type: 'ADD' })}>加一</button>
<button onClick={() => dispatch({ type: 'SUB' })}>减一</button>
</>
)
}
//多个数据
import React ,{useReducer} from 'react'
const initialState={
count:0,
count2:0,
}
function reducer (state,action){
switch (action.type){
case "ADD":
return {...state,count:state.count+1}
case "SUB":
return {...state,count:state.count-1}
case "ADD2":
return {...state,count2:state.count2+1}
default :
throw new Error();;
}
}
function UseReducer (){
const[state,dispatch]=useReducer(reducer,initialState)
return (
<>
<p> {state.count}</p>
<p> count2: {state.count2}</p>
<button onClick={() => dispatch({ type: 'ADD' })}>加一</button>
<button onClick={() => dispatch({ type: 'SUB' })}>减一</button>
<button onClick={() => dispatch({ type: 'ADD2' })}>count2加一</button>
</>
)
}
export default UseReducer
