目录
useState 的初始值(参数)只会在组件第一次渲染时生效
hooks是什么?
Hooks
:钩子、钓钩、钩住。
是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。
是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
作用: 为函数组件提供状态、生命周期等原本 在Class 组件中才提供的功能
-
Hooks 只能在函数组件中使用
-
可以理解为通过 Hooks 为函数组件钩入 class 组件的特性
Hooks 前后,组件开发模式的对比
-
React v16.8 以前: class 组件(提供状态) + 函数组件(展示内容)
-
React v16.8 及其以后:
-
class 组件(提供状态) + 函数组件(展示内容)
-
Hooks(提供状态) + 函数组件(展示内容)
-
混用以上两种方式:部分功能用 class 组件,部分功能用 Hooks+函数组件
-
为什么要有 Hooks?
两个角度:1.组件的状态逻辑复用 2.class 组件自身的问题
react组件的本质
React 是用于构建用户界面的 JavaScript 库 。
React组件是对特定功能的封装,主要用来对UI进行拆分。
React 组件的模型其实很直观,就是从 Model 到 View 的映射,这里的 Model 对应到 React 中就是 state 和 props
公式:组件(State+Props) = UI
class 组件自身的问题
在根据状态来渲染UI这件事上,class 组件并没有发挥它最重要的功能:
-
组件之间很少继承
-
组件之间很少相互访问
函数式组件的好处
-
函数本身比较简单,更好的胜任根据状态来渲染UI这件事
-
hooks让函数组件内部有了维护状态的能力
-
hooks带来了组件的逻辑复用能力
hooks的使用策略
-
react没有计划从React中移除class
-
Hook 和现有代码可以同时工作,你可以渐进式地使用:
-
不推荐直接使用 Hooks 大规模重构现有组件
-
推荐新功能用 Hooks,复杂功能实现不了的,也可以继续用 class
-
找一个功能简单、非核心功能的组件开始使用 hooks
-
-
class 组件相关的 API 在hooks中可以不用
-
state与setState
-
钩子函数,
componentDidMount
、componentDidUpdate
、componentWillUnmount
-
`this
相关的用法
-
-
原来学习的内容还是要用的
-
JSX:
{}
、onClick={handleClick}
、条件渲染、列表渲染、样式处理等 -
组件:函数组件、组件通讯
-
React 开发理念:
单向数据流
、状态提升
等
-
useState-基本使用
使用useState
为函数组件提供状态
使用场景
当你想要在函数组件中,使用组件状态时,就要使用 useState 这个Hook 了
作用
为函数组件提供状态(state)
步骤
-
导入。
useState
函数 -
调用
useState
函数,传入初始值,返回状态
和修改状态的函数
-
使用
-
在 JSX 中展示
状态
-
特定的时机调用修改状态的函数来改状态
-
示例
import { useState } from 'react'
// useState 是hook,hook是use开头的函数
const Count = () => {
// 0 是初始值
// 返回值是一个数组
const stateArray = useState(0)
// 状态值 -> 0
const state = stateArray[0]
// 修改状态的函数
const setState = stateArray[1]
return (
<div>
{/* 展示状态值 */}
<h1>useState Hook -> {state}</h1>
{/* 点击按钮,让状态值 +1 */}
<button onClick={() => setState(state + 1)}>+1</button>
</div>
)
}
-
参数:状态初始值。比如,传入 0 表示该状态的初始值为 0
-
注意:此处的状态可以是任意值(比如,数值、字符串等),而 class 组件中的 state 必须是对象
-
-
返回值:数组,包含两个值:1 状态值(state) 2 修改该状态的函数(setState)
使用数组解构简化代码
使用数组解构简化 useState
的使用。约定:修改状态的函数名称以 set 开头,后面跟上状态的名称
// 解构出来的名称可以是任意名称
const [state, setState] = useState(0)
const [age, setAge] = useState(0)
const [count, setCount] = useState(0)
useState-处理表单元素
-
用useState初始化内容和修改内容的方法
-
向input元素上设置value和onChange属性
import React, { useState } from 'react'
import ReactDom from 'react-dom'
export default function App () {
const [content, setContent] = useState('')
return (
<div>
{content}
<input value={content} onChange={(e) => setContent(e.target.value)} />
</div>
)
}
ReactDom.render(<App />, document.getElementById('root'))
useState-setXXX回调函数格式
useState 两种格式
格式1:传入值
useState(0) useState('abc')
格式2:传入回调
useState(() => { return 初始值 })
-
回调函数的返回值就是状态的当前值
-
回调函数只会触发一次
使用场景
格式1:传入值
如果状态就是一个普通的数据(比如,字符串、数字、数组等)都可以直接使用 useState(普通的数据)
格式2:传入回调
-
初始状态需要经过一些计算得到。
useState(()=>{这里有一些计算, return 结果}))
setXXX的参数可以是回调
状态需要迭代累计。 setXXXXX((上一次的值) => { return 新值 })
setCount(initState => {
// ...
return newState
})
经典场景
希望state有连续叠加的效果
import React, { useState } from 'react'
import ReactDom from 'react-dom'
export default function App () {
const [count, setCount] = useState(0)
const hClick1 = () => { //点击一次 增加1,没有叠加
setCount(count+1)
setCount(count+1)
setCount(count+1)
}
const hClick2 = () => { //点击一次 增加3, 可以叠加
setCount((count)=>count+1)
setCount((count)=>count+1)
setCount((count)=>count+1)
}
return (
<div>
count:{count}
<button onClick={hClick1}>多次连续setCount-值</button>
<button onClick={hClick2}>多次连续setCount-值</button>
</div>
)
}
ReactDom.render(<App />, document.getElementById('root'))
useState-组件的更新过程
函数组件没有生命周期
示例代码
import { useState } from 'react'
const Count = () => {
console.log('Count...')
const [count, setCount] = useState(0)
return (
<div>
{/* 展示状态值 */}
<h1>useState Hook -> {count}</h1>
{/* 点击按钮,让状态值 +1 */}
<button onClick={() => setCount(count + 1)}>+1</button>
</div>
)
}
更新过程
函数组件使用 useState hook 后的执行过程,以及状态值的变化:
-
组件第一次渲染:
-
执行该函数中的代码逻辑
-
调用
useState(0)
将传入的参数作为状态初始值,即:0 -
渲染组件,此时,获取到的状态 count 值为: 0
-
用户点击按钮,调用 setCount(count + 1)
修改状态,因为状态发生改变,所以,该组件会重新渲染
-
组件第二次渲染:
-
再次执行该组件中的代码逻辑
-
再次调用
useState(0)
:-
此时 React 内部会拿到最新的状态值而非初始值
-
该案例中最新的状态值为 1
-
-
再次渲染组件,此时,获取到的状态 count 值为:1
-
useState 的初始值(参数)只会在组件第一次渲染时生效
const [count, setCount] = useState(()=>{
console.log('useState...') // 这句只会输出一次
return 0
})
也就是说,以后的每次渲染,useState 获取到都是最新的状态值。React 组件会记住每次最新的状态值!
总结
状态更新,整个组件的逻辑重新运行一次;
useState只会在组件第一次渲染时使用状态的初值,随后都会使用状态的最新值
useState 这个 Hook 就是用来管理 state 的,它可以让函数组件具有维持状态的能力。也就是说,在一个函数组件的多次渲染之间,这个 state 是共享的。
如何为函数组件提供多个状态?
两种方案
方案1:
useState({状态1, 状态2.....})
方案2:
useState(状态1) useState(状态2)
推荐使用方案2
调用 useState
Hook 多次即可,每调用一次 useState Hook 可以提供一个状态。
注意:
hooks: setXXX(新值) ==> 用新值去替换之前的值
class: setState({要修改的属性})
useState的使用规则
-
useState只能直接出现在 函数组件 内部
-
useState不能嵌套在 if/for/
原因: React 是按照 Hooks 的调用顺序来识别每一个 Hook,如果每次调用的顺序不同,导致 React 无法知道是哪一个 Hook。 可以通过开发者工具进行查看