Hook
Hook是React16.8⼀个新增项,它可以让你在不编写 class 的情况
下使⽤ state 以及其他的 React 特性。
Hooks的特点:
- 使你在⽆需修改组件结构的情况下复⽤状态逻辑
- 可将组件中相互关联的部分拆分成更⼩的函数,复杂组件将变得更容易理解
- 更简洁、更易理解的代码
useState、useEffect
javascript">import React, { useState, useEffect } from "react";
function FruitList({ fruits, setFruits }) {
// 点击删除
const delFruit=(delIndex)=>{
const tem = [...fruits];
tem.splice(delIndex, 1);
setFruits(tem);
}
return (
<div>
<ul>
{fruits.map((item, index) => {
return <li key={index} onClick={()=>delFruit(index)}>{item}</li>;
})}
</ul>
</div>
);
}
function UseState() {
const [date, setDate] = useState(new Date());
const [fruits, setFruits] = useState(["苹果", "香蕉"]);
const [name, setName] = useState("车厘子");
useEffect(() => {
const timer = setInterval(() => {
setDate(new Date());
}, 1000);
//记得清理工作,防⽌引起内存泄露
return () => clearInterval(timer);
}, [date]);
return (
<div>
<p>{date.toLocaleTimeString()}</p>
<input value={name} onChange={(e) => setName(e.target.value)} />
//添加也就是数组合并
<button onClick={() => setFruits([...fruits,name])}>添加</button>
//列表显示
<FruitList fruits={fruits} setFruits={setFruits} />
</div>
);
}
export default UseState;
useReducer、useEffect
useReducer是useState的可选项,常⽤于组件有复杂状态逻辑时,类似于redux中reducer概念。
以上代码可修改为
javascript">import React, { useEffect, useReducer } from "react";
function FruitList({ fruits, setFruits }) {
const delFruit = (delIndex) => {
const tem = [...fruits];
tem.splice(delIndex, 1);
setFruits(tem);
};
return (
<div>
<ul>
{fruits.map((item, index) => {
return (
<li key={index} onClick={() => delFruit(index)}>
{item}
</li>
);
})}
</ul>
</div>
);
}
function fruitsReducer(state, action) {
switch (action.type) {
case "init":
case "replace":
return action.list;
default:
return state;
}
}
export default function HooksReducer() {
const [fruits, dispatch] = useReducer(fruitsReducer, []);
useEffect(() => {
setTimeout(() => {
dispatch({ type: "init", list: ["apple", "banana"] });
}, 1000);
return () => {};
}, []);
return (
<div>
HooksReducer
<FruitList
fruits={fruits}
setFruits={(newFruitList) =>
dispatch({ type: "replace", list: newFruitList })
}
/>
</div>
);
}