千锋教育2022版React全家桶教程_react零基础入门到项目实战完整版

React Hooks(钩子)

一、使用hooks的理由

1.高阶组件为了复用，导致代码层级复杂（函数式组件可以缓解）

2.可以生命周期复杂的问题

3.因为function组件是无状态组件，因为需要状态改成class成本高

二、hooks钩子函数

1.useState（保存组件状态）

用法：

（1）在空白的js文件中使用rfc创建一个基础的函数式组件

（2）引入useState

import React,{useState} from 'react'

（3）useState的使用

const [state,setstate]=usestate(initialState)

state:代表初始值

setstate:改变初始值的唯一方法

initialState:代表传入的初始值

例：

const [name,setName]=useState('张三')

const [age,setAge]=useState(18)

return <div>

{name}今年{age}岁了

<button onClick={()=>{

setName('李四')

setAge(20)

}}>改变name和age<button>

</div>

注意：函数式里没有this