React HOOK |
您所在的位置：网站首页 › 如何hook自定义函数 › React HOOK |
|
将一些常用的、跨越多个组件的HOOK功能，抽离出去形成一个函数，该函数就是自定义HOOK自定义HOOK，由于其内部需要使用HOOK功能，所以它本身也需要按照HOOK的规则实现 函数名必须以use开头，小驼峰调用自定义HOOK函数时，应放到顶层，不能放在循环、判断中使用hook的时候，如果没有严格按照hook的规则进行编码，则eslint的一个插件（eslint-plugin-react-hooks） 会报出警告。 如何忽略？可以在具体文件下书写如下代码： / eslint “react-hooks/exhaustive-deps”: “off” / 例如： 很多组件都需要在第一次加载完成后，获取所有学生数据，再设置状态这是自定义hook的方式： function useAllStudents(){ const [ students, setStudents ] = useState([]); useEffect(()=>{ (async ()=>{ const stus = await getAllStudents(); setStudents(stus); })();//useEffect中不能返回一个Promise,所以需要把这个async写为IIFE }, []);}function Test(props){ const stus = useAllStudents(); const list = stus.map(it => it.name); return ( {list} );}export default function App() { return ( )}以前类组件呢，倒是也能这样，用高阶组件的的方式，但是太麻烦，而且导致结构层次变深 function willAllStudents(Comp){//传一个组件进来 return class AllStudentsWrapper extends React.Component{ state = { stus: [] } async componentDidMount(){ const stus = await getAllStudents(); this.setState({ stus, }) } render(){ return } }}function Test(props){ const list = props.stus.map(it => it.name); return ( {list} );}const TestStudents = withAllStudents(Test);export default function App() { return ( )}HOOK的出现很好的解决了横向关注点，而且可以很好的拆分纯函数与副作用 根据页码和页容量获取学生数据，得到一个相应结果，并且页码或页容量变化时，将重新获取学生数据 ```jsx function usePageStudents(page=1, limit=10){ const [resp, setResp] = useState({}); useEffect(()=>{ (async ()=>{ const resp = await getAllStudents(page, limit); setResp(resp); })(); }, [page, limit]); }function Test2(){ const [page, setPage] = useState(1); const resp = usePageStudents(page, 10); if(resp){ const list = resp.findByPage.map(it=> {it.name}) return ( 数据总数：{resp.cont} {list} { setPage(parseInt(e.target.value, 10)); }} /> );}else{ return null;}} 3. 很多组件都需要在第一次加载完成后，启动一个计时器，然后在组件销毁时清除计时器```jsxfunction useTimer(func, duration){ useEffect(()=>{ const timer = setInterval(func, duration); return ()=>{ clearInterval(timer); } }, []);} |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |