简易总结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 介绍「 ...
随机推荐
- vue生命周期详细过程
- vue项目中图片预览旋转功能
最近项目中需要在图片预览时,可以旋转图片预览,在网上找了下,发现有一款功能强大的图片组件:viewerjs. git-hup: https://github.com/fengyuanchen/view ...
- 4.Servlet(动态web资源)
Servlet (动态web资源) 开发一个动态web资源(即开发一个Java程序向浏览器输出数据) 需完成以下两个步骤 1.编写一个Java类,实现servelet接口 2.把开发好的Java类部署 ...
- 第二章、Django以及数据库的配置
目录 第二章.Django以及数据库的配置 一.小白必会三板斧 二.静态文件配置 三.form表单 action和method参数可以写的形式 四.request对象及方法 五.django连接数据库 ...
- centos 6.4系统双网卡绑定配置详解
Linux双网卡绑定实现就是使用两块网卡虚拟成为一块网卡(需要交换机支持),这个聚合起来的设备看起来是一个单独的以太网接口设备,通俗点讲就是两块网卡具有相同的IP地址而并行链接聚合成一个逻辑链路工作. ...
- 【2017-05-30】WebForm文件上传。从服务端删除文件
用 FileUpload控件进行上传文件. <asp:FileUpload ID="FileUpload1" runat="server" /> ...
- Ubuntu系统---安装QQ
使用Ubuntu很不方便,如果有什么消息的话,还要回到windows中查看.预想在Ubuntu上直接安装一个QQ,有网友说使用WebQQ发现老是掉线,于是这里安装QQ国际版. 首先,下载安装包. 这里 ...
- python再学习笔记
python各种半桶水QAQ,一些特性经常跟其他语言搞混,官方入门文档重读温习...... 最好用4个空格的缩进空值是Python里一个特殊的值,用None表示变量就是在程序中用来指向这些数据对象的, ...
- github仓库管理项目
一,建立本地git仓库 首先,git要求使用者必须提供自己的身份标识,为此我们需要在git bash中执行以下命令: git config --global user.name 'aa.Tessst ...
- vector简单使用
在刷ccf题的时候日常做完去网上查看别的同学怎么做的 发现有使用vector后三十几行代码就写出来的,虽然时间复杂度和我一样十几毫秒,but !我看中了它的代码量啊!多么的少啊! 所以百度了vecto ...