react Hooks
useEffect
1、useEffect是didMount和didUpdate和willUnmount三个函数的集合
2、useEffec(fun):fun会在每次组件render之后执行,而fun中return的cleanup会在willUnmount中执行
3、useEffect(fun,[xxx])第二个参数用于订阅哪个props修改后执行,可以利用此优化
自定义hook
1、以 “use
” 开头的函数,函数内部可以调用其他的 Hook
2、Hook 是一种复用状态逻辑的机制,所以每次使用自定义 Hook 时,其中的所有 state 和副作用都是完全隔离的。只是处理state的逻辑一样
// useFriendStatus import React, { useState, useEffect } from 'react'; function useFriendStatus(friendID) {
const [isOnline, setIsOnline] = useState(null); useEffect(() => {
function handleStatusChange(status) {
setIsOnline(status.isOnline);
} ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
};
}); return isOnline;
} function FriendStatus(props) {
const isOnline = useFriendStatus(props.friend.id); if (isOnline === null) {
return 'Loading...';
}
return isOnline ? 'Online' : 'Offline';
} function FriendListItem(props) {
const isOnline = useFriendStatus(props.friend.id); return (
<li style={{ color: isOnline ? 'green' : 'black' }}>
{props.friend.name}
</li>
);
}
react Hooks的更多相关文章
- 通过 React Hooks 声明式地使用 setInterval
本文由云+社区发表 作者:Dan Abramov 接触 React Hooks 一定时间的你,也许会碰到一个神奇的问题: setInterval 用起来没你想的简单. Ryan Florence 在他 ...
- 初探React Hooks & SSR改造
Hooks React v16.8 发布了 Hooks,其主要是解决跨组件.组件复用的状态管理问题. 在 class 中组件的状态封装在对象中,然后通过单向数据流来组织组件间的状态交互.这种模式下,跨 ...
- React hooks实践
前言 最近要对旧的项目进行重构,统一使用全新的react技术栈.同时,我们也决定尝试使用React hooks来进行开发,但是,由于React hooks崇尚的是使用(也只能使用)function c ...
- 理解 React Hooks
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由志航发表于云+社区专栏 TL;DR 一句话总结 React Hooks 就是在 react 函数组件中,也可以使用类组件(classe ...
- React Hooks新特性学习随笔
React Hooks 是 React 16.8 的新增特性.它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性. 前言 本篇主要以讲几个常用的api为主. 1.u ...
- 关于React Hooks,你不得不知的事
React Hooks是React 16.8发布以来最吸引人的特性之一.在开始介绍React Hooks之前,让咱们先来理解一下什么是hooks.wikipedia是这样给hook下定义的: In c ...
- react hooks 全面转换攻略(三) 全局存储解决方案
针对 react hooks 的新版本解决方案 一.redux维持原方案 若想要无缝使用原来的 redux,和其配套的中间件 promise,thunk,saga 等等的话 可以使用 redux-re ...
- react新特性 react hooks
本文介绍的是react新特性react hooks,本文面向的是有一定react开发经验的小伙伴,如果你对react还不是很熟悉的话我建议你先学习react并多多联系. 首先我们都知道react有3种 ...
- 30分钟精通React今年最劲爆的新特性——React Hooks
你还在为该使用无状态组件(Function)还是有状态组件(Class)而烦恼吗? --拥有了hooks,你再也不需要写Class了,你的所有组件都将是Function. 你还在为搞不清使用哪个生命周 ...
- React Hooks 深入系列 —— 设计模式
本文是 React Hooks 深入系列的后续.此篇详细介绍了 Hooks 相对 class 的优势所在, 并介绍了相关 api 的设计思想, 同时对 Hooks 如何对齐 class 的生命周期钩子 ...
随机推荐
- zabbix触发器表达式
zabbix触发器表达式 触发器使用逻辑表达式来评估通过item获取的数据是处于哪种状态, 触发器中的表达式使用很灵活,我们可以创建一个复杂的逻辑测试监控,触发器表达式形式如下: {<serve ...
- 工具类封装之--CommonUtils
/** * @file_name : CommonUtils.java * @author : * @date : 2018年3月15日 * Description: */ package cn.xx ...
- 将pip源设置为国内源的方法
需要将pip源设置为国内源,阿里源.豆瓣源.网易源等 - windows (1)打开文件资源管理器(文件夹地址栏中) (2)地址栏上面输入 %appdata% (3)在这里面新建一个文件夹 pip ( ...
- C#操作Control异步工具类
/// <summary> /// 异步工具类 /// </summary> public class TaskTools { /// <summary> /// ...
- aop(execution()表达式)
execution(* com.tp.soft.service..*.*(..)) 整个表达式可以分为五个部分: 1.execution(): 表达式主体. 2.第一个*号:表示返回类型,*号表示所有 ...
- element-UI表单验证
转载自: 一.简单逻辑验证(直接使用rules) 实现思路 •html中给el-form增加 :rules="rules"•html中在el-form-item 中增加属性 pro ...
- spring AOP AspectJ 定义切面实现拦截
总结记录一下AOP常用的应用场景及使用方式,如有错误,请留言. 1. 讲AOP之前,先来总结web项目的几种拦截方式 A: 过滤器 使用过滤器可以过滤URL请求,以及请求和响应的信息,但是过 ...
- [Linux]最新sublime text 3显示图标
sublime text 3显示图标 执行命令 sudo vim /usr/share/applications/sublime_text_3.desktop 添加相应信息 [Desktop Entr ...
- ajax得到后端数据一直提示为[object Object]解决方法
前段ajax <script type="text/javascript"> function requestJson() { $.ajax({ type : &quo ...
- python使用adb获取Android Phone截图(解决Windows传输编码导致png文件损坏的问题)
使用adb命令 ./adb shell screencap -p 可以截取当前屏幕,并且作为stdout,传给外部.那么对于python,我们可以用如下代码获取数据流. 使用Popen创建子进程用于读 ...