React的Hook是什么

这篇文章主要介绍了React的Hook是什么，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
这个例子用来显示一个计数器。当你点击按钮，计数器的值就会增加：Youclicked{count}times在这里，useState就是一个 Hook （等下我们会讲到这是什么意思）。通过在函数组件里调用它来给组件添加一些内部state。React 会在重复渲染时保留这个state。useState会返回一对值：当前状态和一个让你更新它的函数，你可以在事件处理函数中或其他一些地方调用这个函数。它类似class组件的this.setState，但是它不会把新的state和旧的state进行合并。（我们会在使用 State Hook 里展示一个对比useState和this.state的例子）。useState唯一的参数就是初始state。在上面的例子中，我们的计数器是从零开始的，所以初始state就是0。值得注意的是，不同于this.state，这里的state不一定要是一个对象 —— 如果你有需要，它也可以是。这个初始state参数只有在第一次渲染时会被用到。你可以在一个组件中多次使用 State Hook:数组解构的语法让我们在调用useState时可以给state变量取不同的名字。当然，这些名字并不是useStateAPI 的一部分。React 假设当你多次调用useState的时候，你能保证每次渲染时它们的调用顺序是不变的。后面我们会再次解释它是如何工作的以及在什么场景下使用。Hook 是一些可以让你在函数组件里 ” 钩入” Reactstate及生命周期等特性的函数。Hook 不能在class组件中使用 —— 这使得你不使用class也能使用 React。（我们不推荐把你已有的组件全部重写，但是你可以在新组件里开始使用 Hook。）React 内置了一些像useState这样的 Hook。你也可以创建你自己的 Hook 来复用不同组件之间的状态逻辑。我们会先介绍这些内置的 Hook。你之前可能已经在 React 组件中执行过数据获取、订阅或者手动修改过 DOM。我们统一把这些免费云主机域名操作称为“副作用”，或者简称为“作用”。useEffect就是一个 Effect Hook，给函数组件增加了操作副作用的能力。它跟class组件中的componentDidMount、componentDidUpdate和componentWillUnmount具有相同的用途，只不过被合并成了一个 API。例如，下面这个组件在 React 更新 DOM 后会设置一个页面标题：Youclicked{count}times当你调用useEffect时，就是在告诉 React 在完成对 DOM 的更改后运行你的“副作用”函数。由于副作用函数是在组件内声明的，所以它们可以访问到组件的props和state。默认情况下，React 会在每次渲染后调用副作用函数 ——包括第一次渲染的时候。副作用函数还可以通过返回一个函数来指定如何“清除”副作用。例如，在下面的组件中使用副作用函数来订阅好友的在线状态，并通过取消订阅来进行清除操作：在这个示例中，React 会在组件销毁时取消对ChatAPI的订阅，然后在后续渲染时重新执行副作用函数。（如果传给ChatAPI的props.friend.id没有变化，你也可以告诉 React 跳过重新订阅。）跟useState一样，你可以在组件中多次使用useEffect：通过使用 Hook，你可以把组件内相关的副作用组织在一起（例如创建订阅及取消订阅），而不要把它们拆分到不同的生命周期函数里。Hook 就是 JavaScript 函数，但是使用它们会有两个额外的规则：只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。只能在React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用。（还有一个地方可以调用 Hook —— 就是自定义的 Hook 中，我们稍后会学习到。）有时候我们会想要在组件之间重用一些状态逻辑。目前为止，有两种主流方案来解决这个问题：高阶组件和render props。自定义 Hook 可以让你在不增加组件的情况下达到同样的目的。前面，我们介绍了一个叫FriendStatus的组件，它通过调用useState和useEffect的 Hook 来订阅一个好友的在线状态。假设我们想在另一个组件里重用这个订阅逻辑。首先，我们把这个逻辑抽取到一个叫做useFriendStatus的自定义 Hook 里：它将friendID作为参数，并返回该好友是否在线：现在我们可以在两个组件中使用它：每个组件间的state是完全独立的。Hook 是一种复用状态逻辑的方式，它不复用state本身。事实上 Hook 的每次调用都有一个完全独立的state—— 因此你可以在单个组件中多次调用同一个自定义 Hook。自定义 Hook 更像是一种约定而不是功能。如果函数的名字以use开头并调用其他 Hook，我们就说这是一个自定义 Hook。useSomething的命名约定可以让我们的linter插件在使用 Hook 的代码中找到 bug。你可以创建涵盖各种场景的自定义 Hook，如表单处理、动画、订阅声明、计时器，甚至可能还有更多我们没想到的场景。我们很期待看到 React 社区会出现什么样的自定义 Hook。除此之外，还有一些使用频率较低的但是很有用的 Hook。比如，useContext让你不使用组件嵌套就可以订阅 React 的 Context。另外useReducer可以让你通过reducer来管理组件本地的复杂state。感谢你能够认真阅读完这篇文章，希望小编分享的“React的Hook是什么”这篇文章对大家有帮助，同时也希望大家多多支持百云主机，关注百云主机行业资讯频道，更多相关知识等着你来学习!

相关推荐: MySQL数据库怎么给表设置约束

今天小编给大家分享一下MySQL数据库怎么给表设置约束的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。在了解主键之前，先了解一下什么是关键字关键字…