摘要:组件的职责增长并变得不可分割。是架构的重要组成部分。有许多好处,但它们为初学者创造了入门的障碍。方法使用状态钩子的最好方法是对其进行解构并设置原始值。第一个参数将用于存储状态,第二个参数用于更新状态。
学习目标
在本文结束时,您将能够回答以下问题:
什么是 hooks?
如何使用hooks?
使用hooks的一些规则?
什么是custom hook(自定义钩子)?
什么时候应该使用 custom hooks?
使用 custom hooks有什么好处?
什么是 hooks?Hooks 可以做到以下事情:
在功能组件中使用state和“hook into”的生命周期方法。
在组件之间重用有状态逻辑,这简化了组件逻辑,最重要的是,让你跳过编写classes。
如果你已经使用过React,你就会知道复杂多变,有状态的逻辑是如何得到的,当应用程序为功能添加了几个新功能时,就会发生组件代码变得复杂而难以维护这种情况。为了尝试简化这个问题,React背后的大脑试图找到解决这个问题的方法。
(1) 在组件之间重用有状态逻辑
hooks允许开发人员编写简单,有状态的功能组件,并在开发时花费更少的时间来设计和重构组件层次结构。怎么样?使用钩子,您可以在组件之间_获取_和_分享_有状态逻辑。
(2) 简化组件逻辑
当您的应用程序中出现不可避免的指数级逻辑增长时,简单的组件就回因为各种状态逻辑和生命周期等等因素,而变得繁琐和复杂。组件的职责增长并变得不可分割。反过来,这使编码变得麻烦并且测试困难。
class是React架构的重要组成部分。class有许多好处,但它们为初学者创造了入门的障碍。对于class,您还必须记住将this绑定到事件处理程序,因此代码可能变得冗长且有点多余。
如何使用hooks?React版本 16.8.
import { useState, useEffect } from "react";
很简单,但你如何实际使用这些新方法?以下示例非常简单,但这些方法的功能非常强大。
useState hook方法使用状态钩子(state hook)的最好方法是对其进行解构并设置原始值。第一个参数将用于存储状态,第二个参数用于更新状态。
例如:
const [weight, setWeight] = useState(150); onClick={() => setWeight(weight + 15)}
weight是状态
setWeight是一种用于更新状态的方法
useState(150)是用于设置初始值(任何基本类型)的方法
值得注意的是,您可以在单个组件中多次构造状态hook:
const [age, setAge] = useState(42); const [month, setMonth] = useState("February"); const [todos, setTodos] = useState([{ text: "Eat pie" }]);
因此,该组件可能看起来像:
import React, { useState } from "react"; export default function App() { const [weight, setWeight] = useState(150); const [age] = useState(42); const [month] = useState("February"); const [todos] = useState([{ text: "Eat pie" }]); return ( Current Weight: {weight} Age: {age} Month: {month} setWeight(weight + 15)}> {todos[0].text} ); }useEffect钩子方法
使用effect hook 就好像使用componentDidMount, componentDidUpdate, 和 componentWillUnmount这类的生命周期的方法。
例如:
// similar to the componentDidMount and componentDidUpdate methods useEffect(() => { document.title = You clicked ${count} times; });
组件更新的任何时候,渲染后都会调用useEffect。现在,如果你只想在变量count改变时更新useEffect,你只需将该事实添加到数组中方法的末尾,类似于高阶reduce方法末尾的累加器。
// check out the variable count in the array at the end... useEffect(() => { document.title = You clicked ${count} times; }, [ count ]);
让我们结合两个例子:
const [weight, setWeight] = useState(150); useEffect(() => { document.title = You weigh ${weight}, you ok with that?; }, [ weight ]); onClick={() => setWeight(weight + 15)}
因此,当触发onClick时,也会调用useEffect方法,并在DOM更新后在文档标题中呈现新的数据。
例:
import React, { useState, useEffect } from "react"; export default function App() { const [weight, setWeight] = useState(150); const [age] = useState(42); const [month] = useState("February"); const [todos] = useState([{ text: "Eat pie" }]); useEffect(() => { document.title = You weigh ${weight}, you ok with that?; }); return ( Current Weight: {weight} Age: {age} Month: {month} setWeight(weight + 15)}> {todos[0].text} ); }
useEffect非常适合进行API调用:
useEffect(() => { fetch("https://jsonplaceholder.typicode.com/todos/1") .then(results => results.json()) .then((data) => { setTodos([{ text: data.title }]); }); }, []);
React钩子看起来很棒,但是如果你花一点时间,你可能会意识到在多个组件中重新初始化多个钩子方法,比如useState和useEffect,可能会违背DRY(Don"t repeat yourself)原则。那么,让我们看看如何通过创建自定义钩子来重用这些新内置方法。
关于使用hooks的一些规则?是的,React钩子有规则。这些规则乍一看似乎是非常规的,但是一旦你理解了React钩子如何启动的基础知识,规则就很容易理解。
(1) 必须在顶层以相同的顺序调用挂钩。(依次调用)
Hooks创建一个钩子调用数组来保持秩序。这个命令有助于React告诉区别,例如,在单个组件中或跨应用程序的多个useState和useEffect方法调用之间。
例如:
// This is good! function ComponentWithHooks() { // top-level! const [age, setAge] = useState(42); const [month, setMonth] = useState("February"); const [todos, setTodos] = useState([{ text: "Eat pie" }]); return ( //... ) }
在第一次渲染时,42,February,[{text:"Eat pie"}]都被推入状态数组。
当组件重新渲染时,忽略useState方法参数。
age,month和todos的值是从组件的状态中检索的,这是前面提到的状态数组。
(2) 无法在条件语句或循环中调用挂钩。
由于启动hooks的方式,不允许使用within条件语句或循环。对于hooks,如果在重新渲染期间初始化的顺序发生变化,则很可能您的应用程序无法正常运行。您仍然可以在组件中使用条件语句和循环,但不能在代码块内使用钩子。
例如:
// DON"T DO THIS!! const [DNAMatch, setDNAMatch] = useState(false) if (name) { setDNAMatch(true) const [name, setName] = useState(name) useEffect(function persistFamily() { localStorage.setItem("dad", name); }, []); } // DO THIS!! const [DNAMatch, setDNAMatch] = useState(false) const [name, setName] = useState(null) useEffect(() => { if (name) { setDNAMatch(true) setName(name) localStorage.setItem("dad", name); } }, []);
(3) 钩子不能用在class组件中。
钩子必须在功能组件或自定义钩子函数中初始化。自定义钩子函数只能在功能组件中调用,并且必须遵循与非自定义钩子相同的规则。
您仍然可以在同一个应用程序中使用类组件。您可以使用hooks作为类组件的子项呈现功能组件。
(4) 自定义钩子应该以单词use开头并且是驼峰式的。
这是一个强有力的建议而非规则,但它将有助于您的应用程序的一致性。你也会知道,当你看到一个以“use”为前缀的函数时,它可能是一个自定义钩子。
自定义挂钩只是遵循与非自定义挂钩相同规则的函数。它们允许您整合逻辑,共享数据以及跨组件重用钩子。
什么时候应该使用自定义hook?当您需要在组件之间共享逻辑时,最好使用自定义挂钩。在JavaScript中,当您想要在两个多带带的函数之间共享逻辑时,您可以创建另一个函数来支持它。好吧,就像组件一样,hooks也是function。您可以提取hooks逻辑,以便在应用程序的组件之间共享。在编写自定义hooks时,您可以命名它们(再次以“use”开头),设置参数,并告诉它们应该返回什么(如果有的话)。
例如:
import { useEffect, useState } from "react"; const useFetch = ({ url, defaultData = null }) => { const [data, setData] = useState(defaultData); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { fetch(url) .then(res => res.json()) .then((res) => { setData(res); setLoading(false); }) .catch((err) => { setError(err); setLoading(false); }); }, []); const fetchResults = { data, loading, error, }; return fetchResults; }; export default useFetch;使用自定义hook有什么好处?
Hooks允许您在应用程序增长时抑制复杂性,并编写更易于理解的代码。下面的代码是两个具有相同功能的组件的比较。在第一次比较之后,我们将在伴随容器的组件中使用自定义钩子展示更多好处。
以下类组件应该看起来:
import React from "react"; class OneChanceButton extends React.Component { constructor(props) { super(props); this.state = { clicked: false, }; this.handleClick = this.handleClick.bind(this); } handleClick() { return this.setState({ clicked: true }); } render() { return ( You Have One Chance to Click ); } } export default OneChanceButton;
如何使用钩子实现相同的功能来简化代码并提高可读性:
import React, { useState } from "react"; function OneChanceButton(props) { const [clicked, setClicked] = useState(false); function doClick() { return setClicked(true); } return ( You Have One Chance to Click ); } export default OneChanceButton;结论
React hooks是一个惊人的新功能!实施的理由是合理的;并且,再加上这一点,我相信这将极大地降低React编码的门槛,并使其保持在最喜欢的框架之上列表。看到这会如何改变第三方库的工作方式,尤其是状态管理工具和路由器,将会非常令人兴奋。
总之,React钩子:
无需使用类组件即可轻松与React的生命周期方法相关联
通过增加可重用性和抽象复杂性来帮助减少代码量
帮助简化组件之间共享数据的方式
推荐阅读:https://juejin.im/post/5be8d3...
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/54024.html
摘要:前言楼主最近在整理的一些资料,为项目重构作准备,下午整理成了这篇文章。给传入的是一个初始值,比如,这个按钮的最初要显示的是。取代了提供了一个统一的。 showImg(https://segmentfault.com/img/bVbpUle?w=900&h=550); Hooks are a new addition in React 16.8. They let you use sta...
摘要:前言楼主最近在整理的一些资料,为项目重构作准备,下午整理成了这篇文章。给传入的是一个初始值,比如,这个按钮的最初要显示的是。取代了提供了一个统一的。 showImg(https://segmentfault.com/img/bVbpUle?w=900&h=550); Hooks are a new addition in React 16.8. They let you use sta...
摘要:当组件安装和更新时,回调函数都会被调用。好在为我们提供了第二个参数,如果第二个参数传入一个数组,仅当重新渲染时数组中的值发生改变时,中的回调函数才会执行。 前言 首先欢迎大家关注我的Github博客,也算是对我的一点鼓励,毕竟写东西没法获得变现,能坚持下去也是靠的是自己的热情和大家的鼓励,希望大家多多关注呀!React 16.8中新增了Hooks特性,并且在React官方文档中新增...
摘要:到目前为止,表达这种流程的基本形式是课程。按钮依次响应并更改获取更新的文本。事实证明不能从返回一个。可以在组件中使用本地状态,而无需使用类。替换了提供统一,和。另一方面,跟踪中的状态变化确实很难。 备注:为了保证的可读性,本文采用意译而非直译。 在这个 React钩子 教程中,你将学习如何使用 React钩子,它们是什么,以及我们为什么这样做! showImg(https://segm...
摘要:课程制作和案例制作都经过精心编排。对于开发者意义重大,希望对有需要的开发者有所帮助。是从提案转为正式加入的新特性。并不需要用继承,而是推荐用嵌套。大型项目中模块化与功能解耦困难。从而更加易于复用和独立测试。但使用会减少这种几率。 showImg(https://segmentfault.com/img/bVbpNRZ?w=1920&h=1080); 讲师简介 曾任职中软军队事业部,参与...
阅读 1948·2019-08-29 16:27
阅读 1298·2019-08-29 16:14
阅读 3344·2019-08-29 14:18
阅读 3403·2019-08-29 13:56
阅读 1221·2019-08-29 11:13
阅读 2084·2019-08-28 18:19
阅读 3406·2019-08-27 10:57
阅读 2228·2019-08-26 11:39