React Hook
程序员文章站
2022-06-21 12:27:26
...
Hook 是 React 16.8 增加的新特性,它可以使你在不使用 class 的时候使用 state 和 react 的其他特性。
State Hook
例:用 State Hook 实现一个计数器。
import React,{useState} from 'react';
function Counter(){
const [count,setCount] = useState(0);
return <>
<p>当前计数:{count}</p>
<button onClick={() => setCount(count + 1)}>点击加一</button>
</>
}
ReactDOM.render(<Counter />,document.getElementById('root'))
- useState 唯一的参数就是传进去的初始参数 ‘0’,它不是一个对象。如果需要的话,可以把它设置为对象,且这个参数只有第一次渲染时会用到。
- 解构出来的第一个参数是初始化 state 返回的 getter。第二个参数是修改初始化参数的回调函数。
- Hook 不能在 class 组件中使用。
- 更新 state,总是替换它,而不是像 class 中的状态合并它。
Effect Hook
Effect Hook 类似于 class 组件中的componentDidMount、componentDidUpdate 和 componentWillUnmount,它们的用途相似,所以表现就为:React 完成 DOM 的更改之后,Effect 会运行,因为它在组件内部声明,同时它也就可以访问到组件的 props 和 state。
import React,{useState,useEffect} from 'react';
function Counter(){
const [count,setCount] = useState(0);
useEffect(()=>{document.title = `点击了${count}次`})
return <>
<p>当前计数:{count}</p>
<button onClick={() => setCount(count + 1)}>点击加一</button>
</>
}
ReactDOM.render(<Counter />,document.getElementById('root'))
- 上面这个例子,当点击了 button ,更新完 DOM 之后,标题会因为 Effect 函数更新。
- 在 Effect 里面返回一个清除 Effect 的,这样就可以取消 Effect 对这个组件的订阅。
Hook 使用规则
- 只能在函数最外层调用 Hook,不要在循环、条件判断或者子函数中调用。
- 只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用。
上一篇: React 监听页面滚动
下一篇: js判断两个日期大小