react中的函数组件

Hooks只能在函数组件中使用

-----为函数组件提供状态和生命周期

-----解决了类函数自身携带的问题,例如:同一业务的状态和业务逻辑被拆分到不同位置,

-----组件的状态逻辑复用问题

-----类组件不利于代码压缩和优化,也不利于TS的类型推导

Hooks渐进策略

Hooks和之前class的写法可以共存,没必要为了写Hooks而写Hooks

useState()基本使用(1)

作用:为函数组件提供状态和修改状态的方法

useState()可以是任意状态

const [list, setlist] = setState(0)
//此处的状态可以是任意值(例如:数组,字符串,对象等),类组件中的state必须为对象
render(
<div>
 <p>{list}</p>   
    <button onClick={()=>setlist(list+1)}>+1</button>
 </div>
)

useState()基本使用(2)

目前:useState只能在函数组件内部调用,所以返回的状态也是函数内部的局部变量

const [list, setlist] = setState(0)
//setlist()是一个函数调用,参数表示新的状态值,
//调用setlist()后,会返回一个新的状态值替换旧的状态值
//修改成功后会重新渲染
//状态的不可变性,要使用新的状态值替换旧的状态值,不要直接修改原状态

useState与组件更新过程

组件第一次渲染

1.调用函数式组件,从头开始执行组件中的业务逻辑

2.调用useState()将传入的参数作为初始状态值

3开始渲染组件

组件第2次渲染

1.点击按钮,调用setlist(list+1)来修改状态,因为状态发生改变,所以该组件会重新渲染

2.再次执行一遍组件中的业务逻辑代码

3.再次useState(0),这时拿到最新状态而不是初始值

...后面以此类推

注意:useState()的初始值只会在组件第一次生效

useState另一种写法

useState(()=>{
    return 初始值
})
//如果状态通过一些计算得到时使用

useState不能在函数,if for里面写

useEffect副作用

----比如:手动修改DOM,AXJA请求,本地存储

执行时机:初始化时和数据变化的时候执行

相当于类中的componentDidMount + componentDidUpdate。

import React, { useState, useEffect } from 'react'
​
const App = () => {
    const [count, setCount] = useState(() => 0)
    useEffect(() => {
        // 1. 初始化时执行
        // 2. 数据变化的时候执行
        document.title = count
    })
    return (
        <div>
            <p>{count}</p>
            <button onClick={() => setCount(count + 1)}>click</button>
        </div>
    )
}
​
export default App