简易总结react-hook三大基础
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)
简易总结react-hook三大基础的更多相关文章
- 手把手教你使用Vue/React/Angular三大框架开发Pagination分页组件
DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎S ...
- 使用React Hook后的一些体会
一.前言 距离React Hook发布已经有一段时间了,笔者在之前也一直在等待机会来尝试一下Hook,这个尝试不是像文档中介绍的可以先在已有项目中的小组件和新组件上尝试,而是尝试用Hook的方式构建整 ...
- react的三大属性
react的三大属性 state props refs props 来自外部属性 states 来自内部状态 refs 用于表示组件内某个元素 state基础(最重要的属性) state是组件对象最 ...
- React Native 入门基础知识总结
中秋在家闲得无事,想着做点啥,后来想想,为啥不学学 react native.在学习 React Native 时, 需要对前端(HTML,CSS,JavaScript)知识有所了解.对于JS,可以看 ...
- [React] Detect user activity with a custom useIdle React Hook
If the user hasn't used your application for a few minutes, you may want to log them out of the appl ...
- React Hook 学习
1.官方文档 https://react.docschina.org/docs/hooks-intro.html 2.阮一峰 reactHook http://www.ruanyifeng.com/b ...
- React Hook:使用 useEffect
React Hook:使用 useEffect 一.描述 二.需要清理的副作用 1.在 class 组件中 2.使用 effect Hook 的示例 1.useEffect 做了什么? 2.为什么在组 ...
- GraphQL + React Apollo + React Hook + Express + Mongodb 大型前后端分离项目实战之后端(19 个视频)
GraphQL + React Apollo + React Hook + Express + Mongodb 大型前后端分离项目实战之后端(19 个视频) GraphQL + React Apoll ...
- GraphQL + React Apollo + React Hook 大型项目实战(32 个视频)
GraphQL + React Apollo + React Hook 大型项目实战(32 个视频) GraphQL + React Apollo + React Hook 大型项目实战 #1 介绍「 ...
随机推荐
- canvas-八卦图和时钟实现
八卦图: <body> canvas id="></canvas> <script> //获取到画布元素 let myCanvas = docume ...
- Webpack4 splitChunks配置,代码分离逻辑
博客不知道啥时候写的了,一直在草稿箱没写完,突然感觉今年过去大半了,又没怎么写博客.写写完,有始有终 1.代码分离升级 原来项目代码分离是通过下面的配置,基于bundle-loader插件,通过rou ...
- Web Api 将DataTable装换成Excel,并通过文件流将其下载
不废话,直接上代码 前端代码 <input type="button" class="layui-btn" value="Test-GetFil ...
- ESP8266 UDP通信
#include "driver/uart.h" #include "espconn.h" void ICACHE_FLASH_ATTR user_rf_pre ...
- 2.XML语言
XML语言 常见应用: XML技术除用于 /*保存有关系的数据*/之外,它还经常作软件配置文件,以描述程序模块之间的关系. 在一个系统软件中,为提高系统的灵活性,它所启动的模块通常由其配置文件决定 例 ...
- Packet for query is too large (4,544,730 > 4,194,304). You can change this value on the server by setting the 'max_allowed_packet' variable.
修改 my.ini 加上 max_allowed_packet =6710886467108864=64M默认大小4194304 也就是4M修改完成之后要重启mysql服务,如果通过命令行修改就不用 ...
- git回退到历史版本
问题描述 在开发的过程中,想要修改一个参数的命名.然后修改各种地方,并且push上码云的远程仓库.然后突然发现还要改很多地方,突然后悔不想改动了.那该怎么办呢? 处理步骤 回退本地的git版本 将本地 ...
- python打包工具distutils、setuptools的使用
python中安装包的方式有很多种: 源码包:python setup.py install 在线安装:pip install 包名(linux) / easy_install 包名(window) ...
- Codeforces 1216E2 枚举位数+二分
两个二分 枚举位数 #include <bits/stdc++.h> #define MOD 1000000007 using namespace std; typedef long lo ...
- ThreadPoolExecutor源码分析二
接上文,这里继续分析源码 private static final int COUNT_BITS = Integer.SIZE - 3; private static final int CAPA ...