React Hook 概述
什么是 Hook:
Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
这篇文章有什么:
这里不过多阐述使用 Hook 的动机,网上都有,如果一定要用 Hook ,这片文章将收集,初次使用 Hook ,所需要知道的干货。
Hook 知识点:
State Hook | Effect Hook | useContext | useReducer | useCallback | useCallback | useRef
State Hook:
import React, { useState } from 'react'; function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }
const [state, setState] = useState(initialState);
useState:主要是为了给函数添加状态的。最好(必须)在函数的最外层申明使用,不要在if或者else里面使用。
initialState:是 state 的初始值,不限制数据类型,不写默认 undefined。
setState:是改变 state 的方法,类似于原来的 setState({state:false }),区别是没有钩子函数,也就是不能这样- -> setState({state:false }, () => { console.log(state) }) 操作。 setState 函数用于更新 state,它接收一个新的 state 值并将组件的一次重新渲染加入队列(注意:可以在 render 中使用 setState ,不会重复触发 render)。
在后续的重新渲染中,useState
返回的第一个值将始终是更新后最新的 state。
useContext
之前我们使用context (上下文)来解决多层嵌套传props,分三步
- createContext创建Context
- 使用Context.Provider组件提供数据
- Context.Provider的所有后代组件,都可以通过Context.Consumer使用数据数据
const ColorContext = React.createContext('black') function Button(props){ return ( <ColorContext.Consumer> {color=> <button style={{ background: color }}> {color,props.children} </button>} </ColorContext.Consumer> ); } function MiddleWare(){ return ( <Button>我来了</Button> ) } function App() { return ( <div> <ColorContext.Provider value='yellow'> <MiddleWare></MiddleWare> </ColorContext.Provider> </div> ); }
useContext方案
不再需要 consumer,
+useContext接收一个createContext()返回的对象
function Button2(props){ const color = useContext(ColorContext) return <button style={{ background: color }}>{(color, props.children)}</button> }
可以提供Provider以改变传值
function MiddleWare(props) { return <ColorContext.Provider value="yellow"> <Button2>指定provider</Button2> </ColorContext.Provider> }
原文地址:https://www.cnblogs.com/MrZhujl/p/11944614.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 简单学习Android TextView
- Android 滑动返回Activity的实现代码
- centos7搭建hadoop2.10高可用(HA)
- 在 React 中实现 keep alive(可参与文末讨论哦)
- Android仿淘宝切换商品列表布局效果的示例代码
- android 右滑返回的示例代码
- 关于linux服务器hosts文件配置详解
- android中Glide实现加载图片保存至本地并加载回调监听
- CentOS8部署LNMP环境之编译安装mysql8.0.29的教程详解
- Android获取内置sdcard跟外置sdcard路径
- Android简易电话拨号器实例详解
- Linux 为特定的用户或用户组启用或禁用 SSH的方法
- Android 中IntentFilter的匹配规则实例详解
- Android VideoCache视频缓存的方法详解
- Android标题栏最右边添加按钮的实例