网站建设捌金手指专业1,有哪些做普洱茶网站的,企业网站开发设计,40岁了开始学室内设计Hook
是React16.8一个新增项,它可以让你在不编写class的情况下使用state以及其他的React特性特点: 无需修改组件结构的情况下复用状态逻辑将组件相互关联的部分拆分成更小的函数,复杂组件将变得更容易理解更简洁、更易理解的代码
使用Hook的栗子
import React, { useState …Hook
是React16.8一个新增项,它可以让你在不编写class的情况下使用state以及其他的React特性特点: 无需修改组件结构的情况下复用状态逻辑将组件相互关联的部分拆分成更小的函数,复杂组件将变得更容易理解更简洁、更易理解的代码
使用Hook的栗子
import React, { useState } from reactexport 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 (divp点击了 {count} 次/p// 每点击一次按钮,次数1button onClick{() setCount(count 1)}点击/buttonp年龄: {age}/pp选择的水果: {fruit}/pp// 每点当input框输入改变时,更新input的值input typetext value{input} onChange{e setInput(e.target.value)} /// 将水果放入水果列表中.然后清空inputbutton onClick{(){setFruits([...fruits, input]);setInput()}}新增水果/button/pul{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发生改变时才触发这个副作用钩子注: 相当于是观察数据,当观察的数据发生变化时执行第二个参数用于收集观察的数据
自定义钩子 - 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
