当前位置 : 主页 > 网页制作 > React >

简易总结react-hook三大基础

来源:互联网 收集:自由互联 发布时间:2021-06-15
react-hook的最重要的三大基础 import { useEffect, useState, useContext } from ‘react‘ 1、每一个简单的一句话总结 useEffect // 万能的生命周期、每次都触发的生命周期、可以重复写多个的生命周期

react-hook的最重要的三大基础

import { useEffect, useState, useContext } from ‘react‘

1、每一个简单的一句话总结

useEffect // 万能的生命周期、每次都触发的生命周期、可以重复写多个的生命周期
useState  // 创建值、创建改变值的方法
useContent // react自带的redux(mobx)、方便组建间传值

2、conState

const [count, setCount] = useState(0)

3、useEffect

// 表示只执行一次
useEffect(() => {
}, []) 

// 第一次执行,以及表示count变化时执行
useEffect(() => {
}, [count]) 

4、useContent

// 用于创建共同的父级
import { createContext } from ‘react‘
const UserContext = new createContext()

// 父级内容包裹上下文
// value 父级传值的内容
<UserContext.Provider value={{ number, setNumber }}>
</UserContext.Provider>

// 子级要有方法获取UserContext(这里是props的方法,也可以export引出然后引入)
<Content1 test={UserContext} />
// 子级然后就可以直接使用useContent获取,并且直接调用即可
const test = useContext(state.test)
网友评论