美文网首页
react-hook学习笔记

react-hook学习笔记

作者: 三寸日光_ | 来源:发表于2020-11-06 14:46 被阅读0次

1.通过在函数组件内调用hook,来给组件增加一些内部state。

2.useState会返回一对值,当前状态和一个让你更新让的函数

什么是hook

Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。Hook 不能在 class 组件中使用 —— 这使得你不使用 class 也能使用 React。

什么时候我会用 Hook? 

如果你在编写函数组件并意识到需要向其添加一些 state,以前的做法是必须将其转化为 class。现在你可以在现有的函数组件中使用 Hook。

hook的使用规则

只在最顶层使用 Hook

不要在循环,条件或嵌套函数中调用 Hook, 确保总是在你的 React 函数的最顶层调用他们。遵守这条规则,你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。这让 React 能够在多次的 useState 和 useEffect 调用之间保持 hook 状态的正确。(如果你对此感到好奇,我们在下面会有更深入的解释。)

只在 React 函数中调用 Hook

不要在普通的 JavaScript 函数中调用 Hook。你可以:

✅ 在 React 的函数组件中调用 Hook

✅ 在自定义 Hook 中调用其他 Hook 

遵循此规则,确保组件的状态逻辑在代码中清晰可见。

相关文章

  • react-hook学习笔记

    1.通过在函数组件内调用hook,来给组件增加一些内部state。 2.useState会返回一对值,当前状态和一...

  • react-hook

    react-hook

  • react-hook

    useState的用法 useEffect 代替常用生命周期函数 表示 componentDidMonut 和 c...

  • React-Hook

    react hook必须在react16.8版本以上才能使用 1.useState 官网对useEffect的介绍...

  • react-hook

    参考:https://zhuanlan.zhihu.com/p/79127886 //对react hook其中的...

  • React-Hook 应用

    Hook 是 react 16.8 推出的新特性,具有如下优点:Hook 使你在无需修改组件结构的情况下复用状态逻...

  • React-Hook:useState

    1. 使用 因为react是函数式编程,useState函数接收一个初始化参数initialState,其返回值用...

  • React-Hook:useContext

    useReact的应用场景:在组件间共享状态 假设现在有两个组件,想要共享状态,可以使用React.createC...

  • React-Hook快速入门(一)

    一、React介绍 温馨提醒:想要获取更好的观看效果,可以点击查看本篇文章的原文档(React-Hook快速入门(...

  • antd table 编辑单元格

    技术背景: react-hook、antd优势方案:方案一 一。方案一(可多个单元格一起) 官方有例子[https...

网友评论

      本文标题:react-hook学习笔记

      本文链接:https://www.haomeiwen.com/subject/hhabvktx.html