[React] Write a stateful Component with the React useState Hook and TypeScript
Here we refactor a React TypeScript class component to a function component with a useState hook and discuss how props and state types can be modeled accordingly.
import * as React from "react";
import { render } from "react-dom"; import "./styles.css"; type ButtonProps = {
label?: string;
children: React.ReactNode;
};
type ButtonState = {
isOn: boolean;
};
function Button (props: ButtonProps) { const [state, setState] = React.useState<ButtonState>({
isOn: false
}); const toggle = () => setState({ isOn: !state.isOn }); const { children } = props;
const { isOn } = state;
const style = {
backgroundColor: isOn ? "red" : "green"
};
return (
<button style={style} onClick={toggle}>
{children(isOn)}
</button>
);
} Button.defaultProps = {
label: "Hello World!"
}; function App() {
return (
<Button>
{isOn => (isOn ? <div> Turn off</div> : <div> Turn on</div>)}
</Button>
);
} const rootElement = document.getElementById("root");
render(<App />, rootElement);
[React] Write a stateful Component with the React useState Hook and TypeScript的更多相关文章
- [React] Refactor a Stateful List Component to a Functional Component with React PowerPlug
In this lesson we'll look at React PowerPlug's <List /> component by refactoring a normal clas ...
- React.createClass和extends Component的区别
React.createClass和extends Component的区别主要在于: 语法区别 propType 和 getDefaultProps 状态的区别 this区别 Mixins 语法区别 ...
- React Native 中的component 的生命周期
React Native中的component跟Android中的activity,fragment等一样,存在生命周期,下面先给出component的生命周期图 getDefaultProps ob ...
- React 的 PureComponent Vs Component
一.它们几乎完全相同,但是PureComponent通过prop和state的浅比较来实现shouldComponentUpdate,某些情况下可以用PureComponent提升性能 1.所谓浅比较 ...
- React 源码剖析系列 - 不可思议的 react diff
简单点的重复利用已有的dom和其他REACT性能快的原理. key的作用和虚拟节点 目前,前端领域中 React 势头正盛,使用者众多却少有能够深入剖析内部实现机制和原理. 本系列文章希望通过剖析 ...
- [React] Update State Based on Props using the Lifecycle Hook getDerivedStateFromProps in React16.3
getDerivedStateFromProps is lifecycle hook introduced with React 16.3 and intended as a replacement ...
- React躬行记(5)——React和DOM
React实现了一套与浏览器无关的DOM系统,包括元素渲染.节点查询.事件处理等机制. 一.ReactDOM 自React v0.14开始,官方将与DOM相关的操作从React中剥离,组成单独的rea ...
- 【React】383- React Fiber:深入理解 React reconciliation 算法
作者:Maxim Koretskyi 译文:Leiy https://indepth.dev/inside-fiber-in-depth-overview-of-the-new-reconciliat ...
- React教程:4 个 useState Hook 示例
摘要: React示例教程. 原文:快速了解 React Hooks 原理 译者:前端小智 到 React 16.8 目前为止,如果编写函数组件,然后遇到需要添加状态的情况,咱们就必须将组件转换为类组 ...
随机推荐
- 如何自定义 maven中的archetype
1.首先使用eclipse创建一个新的maven project,然后把配置好的一些公用的东西放到相应的目录下面 比如说会将一些常用的java代码存放到src/main/java目录下面: 会将一些通 ...
- 在ASP.NET MVC4中实现同页面增删改查,无弹出框02,增删改查界面设计
在上一篇"在ASP.NET MVC4中实现同页面增删改查,无弹出框01,Repository的搭建"中,已经搭建好了Repository层,本篇就剩下增删改查的界面了......今 ...
- iPhone上将短信内容发送到指定邮箱的方法
iPhone上将短信内容发送到指定邮箱的方法 迄今为止,移动应用安全基本聚焦在以下几个方面,一是移动设备管理BYOD(bring your own device),二是移动恶意软件分析,三是移动设备用 ...
- Spring Framework 4.1.3 还是一样给力
Spring Framework 4.1.3 发布,此版本是 4.1.x 系列的第三个维护版本,包括超过50 个 bug 修复和改进.本来是计划月末发布,但是想早些发布,配合这周要发布的 Spring ...
- Wireshark基本用法 && 过滤规则 && 协议详解
基本使用: https://www.cnblogs.com/dragonir/p/6219541.html 协议解析: https://www.jianshu.com/p/a384b8e32b67 ( ...
- 每天一个linux命令-tai命令
动态监视文件尾部. 命令参数: -f 循环读取 -q 不显示处理信息 -v 显示详细的处理信息 -c<数目> 显示的字节数 -n<行数> 显示行数 --pid=PID 与-f合 ...
- 迷宫问题的C语言求解
1 .Preface /** * There have been many data to introduce the algorithm. So I will try to simply expla ...
- Python获取数字的二进制值
目标 想要获取一个整形数字的二进制表示 bin 内置函数 看一下官方的解释 Convert an integer number to a binary string prefixed with &qu ...
- java8 快速入门 lambda表达式 Java8 lambda表达式10个示例
本文由 ImportNew - lemeilleur 翻译自 javarevisited.欢迎加入翻译小组.转载请见文末要求. Java 8 刚于几周前发布,日期是2014年3月18日,这次开创性的发 ...
- sql server 复制,镜像,日志传输及故障转移集群区别
一, 数据库复制 SQL Server 2008数据库复制是通过发布/订阅的机制进行多台服务器之间的数据同步,我们把它用于数据库的同步备份.这里的同步备份指的是备份服务器与主服务器进行 实时数据同步, ...