React hooks
最近闲来无事，Vue3的语法写的有点疲了，想起来以前还用React框架搭建过项目，回来拉取了一个React框架准备再复习一下React，感叹当年学习React的艰辛过程啊，记录一下React的hooks吧。以下几个是开发过程中可能常用的hooks，后续开发遇到新的会继续补充
useState
const [count,setCount] = useState(0)
返回一个state以及更新state的函数。
在初始渲染期间，返回的状态和传入的值是相同的
setCount则是用来更新这个count。它接收一个新的count值并将组件的一次重新渲染加入到队列中
数据更新后后续渲染的该值始终是更新后最新的值
示例
import { useState } from "react";
function Home() {
const [count, setCount] = useState(0);
return (
<div>
<div>这是useState渲染的{count}</div>
<button onClick={() => setCount(count + 1)}>count+1</button>
</div>
);
}
export default Home;
useEffect
接收一个包含命令式、并且有空能有副作用的函数代码
-
处理副作用
在函数组件主体内，改变DOM、添加订阅、设置定时器、记录日志以及包含其他副作用的操作都是不被允许的，因为这可能会产生莫名奇妙的Bug。
使用useEffect完成副作用操作，赋值给useEffect的函数会在组件渲染到屏幕后执行（这个我熟啊！这他妈不是Mounted生命周期？！）
默认情况下这个函数在渲染结束后执行，同是也可以让它在某些值改变的时候执行（这个又很类似于watch）
-
清除effect
通常组件卸载的时候要清除effect创建的如订阅器、计时器等资源，这个时候往往需要一个函数来清除
可以在useEffect函数返回一个清除函数。示例
function Home() { const [count, setCount] = useState(0); useEffect(() => { console.log("组件渲染完成后打印", count + 1); /**清除副作用 */ return count > 10 ? setCount(1) : setCount(count); }); return ( <div> <div>这是useState渲染的{count}</div> <button onClick={() => setCount(count + 1)}>count +1</button> </div> ); }useContext
const value = useContext(MyContext)
接收一个context对象（React.createContext的返回值)并返回该context的当前值。当前的context值由上层组件中距离当前组件最近的<MyContext.Provider>的value prop决定
当组件上层最近的<MyContext.Provider>更新时，hooks就会触发重渲染，并使用最新传递给 MyContext provider 的 context value 值。
示例
import React, { useContext, useEffect, useState } from "react";
const background = {
pink: { color: "pink" },
orange: { color: "orange" },
};
const bgcContext = React.createContext(background.orange);
function Home() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log("组件渲染完成后打印", count + 1);
/**清除副作用 */
return count > 10 ? setCount(1) : setCount(count);
});
return (
<div>
<div>这是useState渲染的{count}</div>
<button onClick={() => setCount(count + 1)}>count +1</button>
<bgcContext.Provider value={background.pink}>
<ButtonWrap></ButtonWrap>
</bgcContext.Provider>
</div>
);
}
function ButtonWrap() {
return (
<div>
<MyButton></MyButton>
</div>
);
}
function MyButton() {
const bgcGround = useContext(bgcContext);
return (
<button style={{ background: bgcGround.color }}>
最深层的button按钮捏
</button>
);
}
export default Home;
useReducer
useState的替代方案,搭配dispatch方法,当状态有多种选择时，可以考虑使用，或者有多个状态时，可以使用dispatch进行统一的管理。
const [state,dispatch] = useReducer(reducer,initialArg,init)
废话少说，直接上代码！
const initState = { title: "默认title", count: 0 };
const reducer = (state, action) => {
switch (action.type) {
case "cao":
return {
//注意这边一定要拓展运算符处理
...state,
title: "卧槽",
};
case "woqu":
return { ...state, title: "我去" };
case "count":
return { ...state, count: state.count + 1 };
}
};
function Titler() {
const [state, dispatch] = useReducer(reducer, initState);
return (
<div>
<button onClick={() => dispatch({ type: "cao" })}>我是一个标题按钮</button>
<button onClick={() => dispatch({ type: "woqu" })}>我是另一个标题按钮</button>
<button onClick={() => dispatch({ type: "count" })}>+1</button>
<div>{state.title}</div>
<div>{state.count}</div>
</div>
);
}