react Hooks的使用---第一部分

react Hook的使用

useState的使用

  • 因为函数式组件没有声明周期没有状态,利用hook可以达到一样的效果。Hook 使你在无需修改组件结构的情况下复用状态逻辑。
// 引入react 和 useState
import React, { useState } from 'react'
// 定义函数组件
function Test() {
    const [count, setCount] = useState(0) // 这里的count相当于类组件中的this.state.count但是函数组件是没有this和state的,直接使用即可。setCount相当于类组件中的setState,是用于修改count的值的。
    const [age, setAge] = useState(x => 5)//useState里面可以接受一个函数的返回值
    // setCount可以直接修改count的值,也可以通过函数的方式返回一个值,其中默认传入参数为之前的count,一下分别通过直接修改count和用函数来修改age的例子
    return (
        <div>
            <p>your count is {count}</p> 
            <p>your age is {age}</p>
            <button onClick={() => setCount(count+1)}>setCount</button>
            <button onClick={() => setAge((x) => x+5)}>setAge</button>
        </div>
    )
}

useEffect

// useEffect是一个异步的操作。
import React, { useState, useEffect } from 'react';
function LUseEffect (){
    const [count, setCount] = useState(0)
    useEffect(()=>{
        console.log('this is useEffect')
    })
    console.log(count)
    return (
        <div>
            <p>{count}</p>
        </div>
    )
}
export default LUseEffect

第一个可以传入一个函数,第二个参数为监听的依赖(数组形式),依赖改变则执行,依赖不改变则不执行。第二个传入参数为空数组,则表示只会在页面加载的时候触发一次(传入了监听依赖后首次渲染页面也会触发,相当于componentDidMount

import React, { useState, useEffect } from 'react';
function LUseEffect (){
    const [count, setCount] = useState(0)
    useEffect(()=>{
        console.log('this is useEffect')
    },[count])// 监听了count,除了首次渲染后,每次count的值改变也会触发。
    return (
        <div>
            <p>{count}</p>
            <button onClick={()=>{setCount(x => x+1)}}>setCount</button>
        </div>
    )
}
export default LUseEffect

如果表示组件将要卸载的时候清除一些事件可以useEffect里面return一个函数,组件被卸载前进行执行

useEffect(()=>{
        console.log('this is useEffect')
        return ()=>console.log('据说这里是将要被卸载的时候执行哦')
},[count])

上面的代码在组件的卸载时执行,因为监听了count的改变,等同于卸载后重新挂载,也会触发。

使用useEffect来监听props的状态,可以达到props改变后来进行相关的处理以及渲染,相当于componentWillUpdate,来获取到props的改变,进行相关的操作。渲染性能高效,没有改变的Dom不会一起被渲染,如name不会和count一起被重新渲染,只会重新渲染count

import React, { useState, useEffect } from 'react';
const Son = (props)=>{
    const [propsKeys, setPropsKeys] = useState([])
    const [propsValues, setPropsValues] = useState()
    useEffect(()=>{
        setPropsKeys(Object.keys(props))
        setPropsValues(Object.values(props))
    },[props])
    return (
    <div>
        我接受的props的{
            propsKeys.map((item, index) => {
                return (
                    <p key={index}>keys is {item}, and value is {propsValues[index]}</p>
                )
            })
        }
    </div>
    )
}
function LUseEffect (){
    const [count, setCount] = useState(0)
    useEffect(()=>{
        console.log('this is useEffect')
        return ()=>console.log('据说这里是将要被卸载的时候执行哦')
    },[count])
    return (
        <div>
            <p>{count}</p>
            <button onClick={()=>{setCount(x => x+1)}}>setCount</button>
            <p>this is son</p>
            <Son num={count}  name='lx'/>
        </div>
    )
}
export default LUseEffect




暂无评论