Hooks
Hooks 是一种函数,该函数允许您从函数式组件 “勾住(hook into)” React 状态和生命周期功能。
有状态组件,就可以使用函数式组件来定义了。
类组件和函数组件
类组件:
import React, { Component } from 'react'
export default class Example extends Component {
state = {
count: 0
}
addCount() {
this.setState({ count: this.state.count+1 })
}
render() {
return (
<div>
<p>You clicked {this.state.count}</p>
<button onClick={this.addCount.bind(this)}>Click me</button>
</div>
)
}
}
函数组件:
import React, { useState } from 'react'
function Example() {
//解构赋值 声明一个新的状态变量,我们将其称为 "count"
const [count, setCount] = useState(0)
return (
<div>
<p>You Click {count} Times</p>
<button onClick={() => {setCount(count + 1);console.log(useState);}}>Click me</button>
</div>
)
}
export default Example
useState
返回一对:current state(状态)值和一个允许你更新它的函数。- 所以用数组解构赋值进行自定义状态。
- React 假定如果多次调用
useState
,则在每次渲染期间以相同的顺序执行。
React 依赖于调用 Hooks 的顺序:(不同的状态的记录是通过useState的执行顺序)
// ------------
// 第一次渲染
// ------------
useState('Mary') // 1. 用'Mary'初始化名称状态变量
useEffect(persistForm) // 2. 添加一个 effect 用于持久化form
useState('Poppins') // 3. 使用 'Poppins' 初始化 surname 状态变量
useEffect(updateTitle) // 4. 添加一个 effect 用于更新 title
// -------------
// 第二次渲染
// -------------
useState('Mary') // 1. 读取 name 状态变量(忽略参数)
useEffect(persistForm) // 2. 替换 effect 以持久化 form
useState('Poppins') // 3. 读取 surname 状态变量(忽略参数)
useEffect(updateTitle) // 4. 替换 effect 用于更新 title
使用State Hook
- hooks在class中不起作用
- 如果我们想在状态中存储多个不同的值,我们将调用
useState()
多次 - hooks需要一个一个的设置状态值,不能将前后的状态进行合并操作。
初始化state:
import {
useState } from 'react';
function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
//使用useState(x)来初始化一个状态
读取state:
<p>You clicked {count} times</p>
//函数组件直接读取state值
更新state:
<button onClick={() => setCount(count + 1)}>
Click me
</button>
//使用setXxx()来更新
使用Effect Hook
可以将 useEffect
Hook 视为 componentDidMount、componentDidUpdate 和 componentWillUnmount 的组合。
通过使用Effect Hook ,您可以告诉 React 在渲染后要做些什么,React 将记住传递的函数(我们将把它称为 “effect” ),然后在执行DOM更新后调用它。(类似与类组件中this.setState的第二个回调参数)
- 每次渲染后
useEffect
都会运行。(异步的不影响视图更新) - 组件内调用
useEffect
,Hooks支持JavaScript闭包。 - 可以使用多个
useEffect
,进行组件的逻辑分解。
import { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
// Similar to componentDidMount and componentDidUpdate:
useEffect(() => {
// Update the document title using the browser API
document.title = `You clicked ${count} times`;
});
return (
<div&