Public Class Fields allow you to add instance properties to the class definition with the assignment operator (=). In this lesson, we'll look at their use case for simplifying event callbacks and state initialization with a React component.

Handle function:

// Better
handleClick = () => {
...
} // Not good
constructor() {
super();
this.handleClick = this.handleClick.bind(this);
} handleClick() {
...
}

Handle State:

// Better
state = {count: } // Not good
constructor() {
super();
this.state = {count: };
}

Using puiblic field, we can actually remove 'constructor' because it is no longer necessary.

class App extends React.Component {
state = {clicks: } handleClick = () => {
this.setState(prevState => {
return {clicks: prevState.clicks + }
})
} render() {
return (
<div>
<div>
Click Count: {this.state.clicks}
</div>
<button
onClick={this.handleClick}
>
Click Me!
</button>
</div>
)
}
} ReactDOM.render(
<App />,
document.getElementById('root')
)

[React] Public Class Fields with React Components的更多相关文章

  1. React 与 React Native 底层共识:React 是什么

    此系列文章将整合我的 React 视频教程与 React Native 书籍中的精华部分,给大家介绍 React 与 React Native 结合学习的方法,此小节主要介绍 React 的底层原理与 ...

  2. React Tutorial: Basic Concept Of React Component---babel, a translator

    Getting started with react.js: basic concept of React component 1 What is React.js React, or React.j ...

  3. (转)2019年 React 新手学习指南 – 从 React 学习线路图说开去

    原文:https://www.html.cn/archives/10111 注:本文根据 React 开发者学习线路图(2018) 结构编写了很多新手如何学习 React 的建议.2019 年有标题党 ...

  4. js class static property & public class fields & private class fields

    js class static property class static property (public class fields) const log = console.log; class ...

  5. 使用react搭建组件库:react+typescript+storybook

    前期准备 1. 初始化项目 npx create-react-app react-components --template typescript 2. 安装依赖 使用哪种打包方案:webpack/r ...

  6. React Canvas:高性能渲染 React 组

    React Canvas 提供了使用 Canvas 渲染移动 Web App 界面的能力,替代传统的 DOM 渲染,具有更接近 Native App 的使用体验.React Canvas 提供了一组标 ...

  7. React 深入系列1:React 中的元素、组件、实例和节点

    文:徐超,<React进阶之路>作者 授权发布,转载请注明作者及出处 React 深入系列,深入讲解了React中的重点概念.特性和模式等,旨在帮助大家加深对React的理解,以及在项目中 ...

  8. 利用 Create React Native App 快速创建 React Native 应用

    本文介绍的 Create-React-Native-App 是非常 Awesome 的工具,而其背后的 Expo 整个平台也让笔者感觉非常的不错.笔者目前公司是采用 APICloud 进行移动应用开发 ...

  9. React:快速上手(6)——掌握React Router

    React:快速上手(6)——掌握React Router 引入Router 安装 npm install react-router-dom 基础组件 React Router中有三种类型的组件:路由 ...

随机推荐

  1. Win8.1系统所有的路径都无法更改文件夹名称

    平台:win8.1 问题:所有的路径,无论是桌面还是分区还是文件夹内,可以新建和删除文件夹,但不能给文件夹改名,提示“文件或文件夹不存在 ” 分析:安装了几次photoshop后莫名其妙出现这个问题, ...

  2. Quartz学习总结(1)——Spring集成Quartz框架

    一.Quartz简介 Quartz是OpenSymphony开源组织在Job scheduling领域又一个开源项目,它可以与J2EE与J2SE应用程序相结合也可以单独使用.Quartz可以用来创建简 ...

  3. C# Unity依赖注入利用Attribute实现AOP功能

    使用场景? 很多时候, 我们定义一个功能, 当我们要对这个功能进行扩展的时候, 按照常规的思路, 我们一般都是利用OOP的思想, 在原有的功能上进行扩展. 那么有没有一种东西, 可以实现当我们需要扩展 ...

  4. nagios 安装配置(包含nrpe端)全 (一)

    一.nagios安装: 1.安装下面命令: 这是本人监控服务时自己定义插件所用到的几个系统命令.可不安装. (1)iostat:监控磁盘IO信息: apt-getinstall sysstat (2) ...

  5. libiconv 支持的编码

    libiconv 支持的编码 php 中的 iconv() 函数常用来作编码转换用.作一些不同编码的动态数据的转换时常遇到一些未知编码的数据,这时 iconv() 支持那些编码转换就很重要. 刚开始, ...

  6. 数据类型的提升(promotion)

    假如参与运算的数据类型不同或者取值范围过小,编译器会自动将其转换为相同的类型,这个类型就叫数据类型的提升(promotion). 1. C++ 语言环境的规定 unsigned char a = 17 ...

  7. 纯C++实现的HTTP请求封装(POST/GET)

    纯C++实现的HTTP请求(POST/GET),支持windows和linux, 进行简单的封装, 方便调用.实现如下: #include "HttpConnect.h" #ifd ...

  8. 11. ZooKeeper之启动、停止服务。

    转自:https://blog.csdn.net/en_joker/article/details/78673607 启动服务 首先我们来看下如何启动ZooKeeper服务.常见的启动方式有两种. J ...

  9. GO语言学习(十五)Go 语言指针

    Go 语言指针 Go 语言中指针是很容易学习的,Go 语言中使用指针可以更简单的执行一些任务. 接下来让我们来一步步学习 Go 语言指针. 我们都知道,变量是一种使用方便的占位符,用于引用计算机内存地 ...

  10. Android---- 获取当前应用的版本号和当前android系统的版本号

    Android 应用程序获得版本号 我们可以在AndroidManifest.xml中设置程序的版本号等,如android:versionName="1.0",那如果想在代码中获取 ...