前端猛男的博客基础知识 - Hooks
自定义hooks
- 可以将一些 复用的逻辑 或者组件里面复杂的逻辑，抽离出来放在自定义hooks里面
- 自定义hooks 必须以
use开头，如果不遵循的话,无法判断某个函数对其内部Hook的调用，React将无法自动检查你的Hook是否违反了Hook的规则 ，React不知道你是组件，还是自义定Hooks，
- 组件变量名
首字母大写， 自定义hooks变量前面必须加上use
import React, { useState, useMemo } from "react";
import ReactDom from 'react-dom';
// 自定义Hooks
const useFilterList = (list, value) => {
const FilterList = useMemo(
() => list.filter((item) => item.includes(value)),
[list, value]
);
return {
FilterList,
};
};
function App() {
const [list, setlist] = useState(["1", "2"]);
const [value, setvalue] = useState("");
// 调用自定义hooks 并解构出来数据FilterList
const { FilterList } = useFilterList(list, value);
return (
<div>
<input
value={value}
onChange={(event) => {
setvalue(event.target.value);
}}
></input>
<button
onClick={() => {
setlist([...list, value]);
}}
>
添加
</button>
<ul>
{FilterList.map((item, index) => {
return <li key={index}>{item}</li>;
})}
</ul>
</div>
);
}
ReactDom.render(<App>,document.getElementById('root'))