台州市建设厅网站,网站建设核心,桂林小学网站建设,wordpress图片主题cxudy使用规则
只能在组件中或者其他自定义的Hook函数中调用
只能在组件的顶层调用#xff0c;不能嵌套在if、for、 其他函数中
基础Hook 函数
useState
useState是一个hook函数#xff0c;它允许我们向组件中添加一个状态变量#xff0c;从而控制影响组件的渲染结果
示例1…使用规则
只能在组件中或者其他自定义的Hook函数中调用
只能在组件的顶层调用不能嵌套在if、for、 其他函数中
基础Hook 函数
useState
useState是一个hook函数它允许我们向组件中添加一个状态变量从而控制影响组件的渲染结果
示例1
function App() {// 创建一个状态变量// count: 状态变量setCount: 更新状态变量的函数const [count, setCount] useState(0)return (divp当前数值是{count}/pbutton onClick{() setCount(count 1)}加一/button/div)
}示例2
function App() {const [userName, setUserName] useState(111);return (divinputtypetextvalue{userName}placeholder请输入onChange{(e) setUserName(e.target.value)}/div当前输入值是{userName}/div/div);
}注意
在react中状态被认为是只读的直接修改状态不能引发视图的更新对于对象类型的状态变量应该始终传给set方法一个全新的对象来进行修改
function App() {const [form, setForm] useState({age: 0})return (divp当前年龄是{form.age}/pbutton onClick{() setForm({...form,age: form.age 1})}加一/button/div)
}useRef
获取、操作DOM
function App() {// 使用 useRef生成ref对象并绑定到dom上const inputRef useRef(null);// 获取domconst getDom () {console.log(inputRef.current);};return (divinput typetext ref{inputRef} placeholder请输入 /button onClick{getDom}获取dom/button/div);
}useEffect
useEffect是一个React Hook函数用于在React组件中创建不是由事件引起而是由渲染本身引起的操作比如发送AJAX请求、更改DOM等
function App() {const [content, setContent] useState();const [note, setNote] useState();useEffect(() {// 获取每日英语function getEnglish() {fetch(https://api.oioweb.cn/api/common/OneDayEnglish).then((res) res.json()).then((data) {console.log(data);setContent(data.result.content);setNote(data.result.note);});}getEnglish();}, []);return (divdiv英文{content}/divdiv翻译{note}/div/div);
}不同依赖项说明
没有依赖项组件初始渲染组件更新时执行空数组依赖只在初始渲染时执行一次添加特定依赖项组件初始渲染特性依赖项变化时执行
没有依赖项
function App() {const [content, setContent] useState(0);useEffect(() {console.log(副作用执行了);});return (divbutton onClick{() setContent(content 1)}{content}/button/div);
}空数组依赖
function App() {const [content, setContent] useState(0);useEffect(() {console.log(副作用执行了);}, []);return (divbutton onClick{() setContent(content 1)}{content}/button/div);
}特性依赖变化
function App() {const [content, setContent] useState(0);useEffect(() {console.log(副作用执行了);}, [content]);return (divbutton onClick{() setContent(content 1)}{content}/button/div);
}清除副作用
在useEffect中编写的由渲染本身引起的对接组件外部的操作 社区也叫做副作用操作比如在useEffect中开启了一个定时器我们想在组件卸载时把这个定时器再清理掉这个过程就是清除副作用。
useEffect(() {console.log(副作用执行了);return () {console.log(清除副作用);};
}, []);清除副作用的函数最常见的执行时机是在组件卸载时自动执行。
function App() {const [show, setShow] useState(true);return (div父组件button onClick{() setShow(false)}卸载Son组件/button{show Son /}/div);
}
function Son() {const [currentDate, setCurrentDate] useState();useEffect(() {const timer setInterval(() {const newDate new Date().toLocaleTimeString();setCurrentDate(newDate);console.log(当前时间, newDate);}, 1000);return () {// 不清除副作用即使组件不适用了定时器还会执行clearInterval(timer);};}, []);return (divdiv子组件/divdiv当前时间是{currentDate}/div/div);
}自定义Hook
自定义Hook是以use打头的函数通过自定义Hook函数可以用来实现逻辑的封装和复用
function App() {const [state, toggle] useToggle()return (div{ state div这是一个div/div }button onClick{toggle}切换/button/div)
}function useToggle(){// 可复用的逻辑代码const [state, setState] useState(true)const toggle () {setState(!state)}// 那些状态和方法需要在其他组件中使用则返回return [state, toggle]
}通用思路
声明一个以use大头的函数在函数体内封装可以复用的逻辑将组件中用的的状态或者回调函数return出去对象或者数组形式在那个组件中用到这个逻辑就执行这个函数结构出来状态和回调进行使用
function App() {const [content, note] useOneDayEnglish();return (divdiv英文{content}/divdiv翻译{note}/div/div);
}function useOneDayEnglish() {const [content, setContent] useState();const [note, setNote] useState();useEffect(() {// 获取每日英语function getEnglish() {fetch(https://api.oioweb.cn/api/common/OneDayEnglish).then((res) res.json()).then((data) {console.log(data);setContent(data.result.content);setNote(data.result.note);});}getEnglish();}, []);return [content, note];
}
