1.useState()
功能：让函数组件也可以有state状态, 并进行状态数据的读写操作
语法：const [xxx, setXxx] = React.useState(initValue)
- 参数: 第一次初始化指定的值在内部作缓存
- 返回值: 包含2个元素的数组, 第1个为内部当前状态值, 第2个为更新状态值的函数
- setXxx()2种写法:
- setXxx(newValue): 参数为非函数值, 直接指定新的状态值, 内部用其覆盖原来的状态值
- setXxx(value => newValue): 参数为函数, 接收原本的状态值, 返回新的状态值, 内部用其覆盖原来的状态值
代码：
import React from 'react'
import ReactDOM from 'react-dom'
function Demo(){
const [count,setCount] = React.useState(0)
//加的回调
function add(){
//setCount(count+1) //第一种写法
setCount(count => count+1 )
}
return (
<div>
<h2>当前求和为：{count}</h2>
<button onClick={add}>点我+1</button>
</div>
)
}
export default Demo
useEffect()
功能：在函数组件中执行副作用操作(用于模拟类组件中的生命周期钩子)
- react中的副作用操作:
- 发ajax请求数据获取
- 设置订阅 / 启动定时器
- 手动更改真实DOM
语法：
useEffect(() => {
// 在此可以执行任何带副作用操作
return () => { // 在组件卸载前执行
// 在此做一些收尾工作, 比如清除定时器/取消订阅等
}
}, [stateValue]) // 如果指定的是[], 回调函数只会在第一次render()后执行
- 第二个参数传递情况：
- 不传时，执行时间为初次渲染和state中任何状态改变时；
- 为[]时，执行时间为初次渲染；
- 数组中有值时[stateValue]，执行时间为初次渲染和指定stateValue状态改变时；
- 可以看做如下三个函数的组合
- componentDidMount()
- componentDidUpdate()
- componentWillUnmount()
代码：
import React from 'react'
import ReactDOM from 'react-dom'
function Demo(){
const [count,setCount] = React.useState(0)
React.useEffect(()=>{
let timer = setInterval(()=>{
setCount(count => count+1 )
},1000)
return ()=>{
clearInterval(timer)
}
},[])
//加的回调
function add(){
//setCount(count+1) //第一种写法
setCount(count => count+1 )
}
return (
<div>
<h2>当前求和为：{count}</h2>
<button onClick={add}>点我+1</button>
</div>
)
}
export default Demo
useCallback()
功能：记忆函数，它可以防止因为组件重新渲染，导致方法被重新创建，起到缓存作用
语法：
useCallback(() => {
// 回调函数，当stateValue改变后，该函数才会重新声明
}, [stateValue])
- 第二个参数传递情况：
- 为空数组，就是第一次创建后就被缓存，如果后期stateValue改变了，拿到的还是老的stateValue
- 不传入第二个参数，每次都会重新声明一次，拿到的就是最新的stateValue
useMemo()
功能： useCallback()的功能可以由useMemo()所替代，useMemo()也可以返回一个记忆函数
语法：useMemo(() => fn, [])
useRef()
功能：保存标签对象,功能与React.createRef()一样
语法：const refContainer = useRef()
代码：
import React from 'react'
import ReactDOM from 'react-dom'
function Demo(){
const [count,setCount] = React.useState(0)
const myRef = React.useRef()
//加的回调
function add(){
//setCount(count+1) //第一种写法
setCount(count => count+1 )
}
//提示输入的回调
function show(){
alert(myRef.current.value)
}
return (
<div>
<input type="text" ref={myRef}/
<h2>当前求和为：{count}</h2>
<button onClick={add}>点我+1</button>
</div>
)
}
export default Demo
useContext()
功能： 可以共享状态，作用是进行状态的分发（React16.x以后的版本支持），避免了使用Props进行数据的传递
语法：
// 第一步：创建全局的Context
const AppContext = React.createContext([初始化参数])
function Demo {
render(
// 第二步：通过全局的Context进行状态值的共享
<AppContext.Provider value={{ name: '张三' }}>
<A />
<B />
</AppContext>
)
}
// 第三步： 在组件中获取
function B {
const {name} = useContext(AppContext);
return (
<div className="grand">
<h3>我是B组件</h3>
<h4>我从Demo组件接收到的名字: {name}</h4>
</div>
)
}
useReducer()
功能：
语法：
文章来源地址https://www.toymoban.com/news/detail-453641.html
文章来源：https://www.toymoban.com/news/detail-453641.html
到了这里，关于react hooks的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
