Hook

是React16.8一个新增项,它可以让你在不编写class的情况下使用state以及其他的React特性
特点:
1. 无需修改组件结构的情况下复用状态逻辑
2. 将组件相互关联的部分拆分成更小的函数,复杂组件将变得更容易理解
3. 更简洁、更易理解的代码

使用Hook的栗子

import React, { useState } from 'react'export default function HookTest() {// useState(initState)const [count, setCount] = useState(0)// 多个状态const [age] = useState(20)const [fruit, setFruit] = useState('banana')const [input, setInput] = useState('')const [fruits, setFruits] = useState(['apple', 'banana'])return (<div><p>点击了 {count} 次</p>// 每点击一次按钮,次数+1<button onClick={() => setCount(count + 1)}>点击</button><p>年龄: {age}</p><p>选择的水果: {fruit}</p><p>//  每点当input框输入改变时,更新input的值<input type="text" value={input} onChange={e => setInput(e.target.value)} />// 将水果放入水果列表中.然后清空input<button onClick={()=>{setFruits([...fruits, input]);setInput('')}}>新增水果</button></p><ul>{fruits.map(f => (<li key={f} onClick={() => setFruit(f)}>{f}</li>))}</ul></div>)
}

副作用钩子 - Effect Hook

useEffect就是一个Effect Hook,给函数组件增加了操作副作用的能力.
它跟class组件中的componentDidMount、componentDidUpdate和componentwillUnmount具有相同作用(只不过是合并了)
栗子: 更新 HooksTest.js

import React, {useState, useEffect } from 'react';
useEffect(() => {// Update the document title using the browser APIdocument.title = `您点击了 ${count}次`
})// 监听count的变化
useEffect(() => {console.log('count依赖');document.title = `您点击了${count}次`
},[count]);
// 此时只有count发生改变时才触发这个副作用钩子

注:
1. 相当于是观察数据,当观察的数据发生变化时执行
2. 第二个参数用于收集观察的数据

自定义钩子 - Custom Hook

自定义Hook是一个函数,其名称以"use"开头,函数内部可以调用其他的Hook.

function useAge() {const [age, setAge] = useState(0);useEffect(() => {setTimeout(() =>{setAge(20)}, 2000)});return age;
}// 使用
const age = useAge();
<p>年龄 {age? age: 'loading...' }</p>

react --- Hook的使用相关推荐

在React Hook里使用history.push跳转
在React Hook里使用history.push跳转 react hook里用不了this.props.history的解决方法首先引入 import { useHistory } from ' ...
源码解析 React Hook 构建过程
2018 年的 React Conf 上 Dan Abramov 正式对外介绍了React Hook,这是一种让函数组件支持状态和其他 React 特性的全新方式,并被官方解读为这是下一个 5 年 R ...
React Hook基本使用踩坑指南
React因为提倡函数式编程,所以提出了Hook思想来增强函数组件的功能,以此来替代基于Class的组件.但是我们有可能从基于Class这样的实例化组件转向函数组件时思想还没有完全转过来,还是用基于实 ...
react hook问题讲解
React Hook 官网地址:https://react.docschina.org/docs/hooks-faq.html (1)问题分析? Hook 是什么? Hook 是一个特殊的函数,它可以 ...
hook xposed 自定义类_【开始学习React Hook(1)】Hook之useState
react hook是react推出的一种特殊函数.这些函数可以让你在不创建react class的情况下依然可以使用react的一些特性(诸如目前react的钩子函数拥有的所有特性). 最常用的ho ...
React hook 中的数据获取
相关说明: 对于hook相关词不翻译,感觉翻译后怪怪的. effect hook 效果钩子,用于执行一些副作用例如获取数据 . state hook 状态钩子. 使用----------- 和 --- ...
slqite3库查询数据处理方式_绝活！十一个优质React Hook库, 收藏备用
本文字数:6539字预计阅读时间:18分钟建议阅读方式:收藏备用温馨提示:最近全国大幅降温,注意防寒保暖,开心跨年长按识别,后台回复 "电子书" 即可领取<JavaS ...
react讲解（函数式组件，react hook）
文章目录前言一.函数式组件理解: 作用代码示例: 函数组件注意事项二.React hook React Hooks 优势 Hook 使用规则 2.常用的hook useState useEf ...
ref使用之react / react hook
在react典型的数据流中,props传递是父子组件交互的一种方式:通过传递一个新的props值来使子组件重新render,从而达到父子组件通信.某些情况下(例如和第三方的dom库整合,或者某个dom ...
React Hook之Effect Hook
文章目录 Effect Hook概念性内容介绍: 如果朋友们想在里面进行异步操作的话请这样用[或者你可以把这个方法放到外面在这里调用即可]: 我们可以监听某个状态的变化来进行一些操作 useEffec ...

react --- Hook的使用

Hook

使用Hook的栗子

副作用钩子 - Effect Hook

自定义钩子 - Custom Hook

react --- Hook的使用相关推荐

最新文章

热门文章