开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

React:createClass vs React.Component？为什么教程会忽略React.Component

React是一个用于构建用户界面的JavaScript库。在React中，有两种创建组件的方式：createClass和Component。

createClass是React早期版本中用于创建组件的方法。它是一个工厂函数，接受一个对象作为参数，该对象包含组件的各种属性和方法。通过createClass创建的组件可以使用getInitialState方法来定义初始状态，并且可以使用mixins来共享代码。然而，createClass在React v16.0.0版本中被废弃，不再推荐使用。

相反，React.Component是ES6类的语法糖，用于创建组件。通过继承React.Component类，我们可以定义一个组件类，并且可以使用constructor方法来初始化状态。使用React.Component创建的组件更加简洁和易于理解，也更符合现代JavaScript的语法规范。

为什么教程会忽略React.Component呢？这可能是因为教程的目标是向初学者介绍React的基本概念和用法，而createClass是React早期版本的用法，已经不再推荐使用。为了避免混淆和给初学者带来困惑，教程可能选择忽略createClass并专注于React.Component的使用。

推荐的腾讯云相关产品和产品介绍链接地址：

云服务器（CVM）：提供可扩展的计算能力，支持多种操作系统和应用场景。详情请参考：https://cloud.tencent.com/product/cvm
云数据库MySQL版（CDB）：提供高性能、可扩展的关系型数据库服务。详情请参考：https://cloud.tencent.com/product/cdb_mysql
云原生容器服务（TKE）：提供高度可扩展的容器化应用管理平台。详情请参考：https://cloud.tencent.com/product/tke
人工智能机器学习平台（AI Lab）：提供丰富的人工智能算法和模型训练平台。详情请参考：https://cloud.tencent.com/product/ailab
物联网开发平台（IoT Explorer）：提供全面的物联网设备管理和数据处理能力。详情请参考：https://cloud.tencent.com/product/iothub
移动推送服务（信鸽）：提供高效可靠的移动设备消息推送服务。详情请参考：https://cloud.tencent.com/product/xgpush
云存储（COS）：提供安全可靠的对象存储服务，适用于各种场景。详情请参考：https://cloud.tencent.com/product/cos
区块链服务（BCS）：提供简单易用的区块链应用开发和管理平台。详情请参考：https://cloud.tencent.com/product/bcs
腾讯云元宇宙：腾讯云的元宇宙计划正在积极探索和研发中，敬请期待。

请注意，以上推荐的腾讯云产品仅供参考，具体选择应根据实际需求和场景进行评估。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

React.createClass vs extends React.Component

import React from 'react'; let TodoItem = React.createClass({ render(){ return </div...import React from 'react'; class TodoItem extends React.Component{ constructor(props){ super...例子的顺序都是先写React.createClass, 再写extends React.Component 1. propTypes 和 getDefaultProps import React from...from 'react'; let TodoItem = React.createClass({ handleClick(){ console.log(this); // React...但是有一些比较好的替代方案: core-decorators.js react-mixin 参考文章 React.createClass versus extends React.Component Reusable

5768 0

React.createClass vs extends React.Component

import React from 'react'; let TodoItem = React.createClass({ render(){ return </div...import React from 'react'; class TodoItem extends React.Component{ constructor(props){ super...例子的顺序都是先写React.createClass, 再写extends React.Component 1. propTypes 和 getDefaultProps import React from...from 'react'; let TodoItem = React.createClass({ handleClick(){ console.log(this); // React...但是有一些比较好的替代方案: core-decorators.js react-mixin 参考文章 React.createClass versus extends React.Component Reusable

5732 0

Airbnb ReactJSX 风格指南

目录基本规则(Basic Rules) Class vs `React.createClass` vs stateless 混合(Mixins) 命名(Naming) 声明(Declaration)...Class vs `React.createClass` vs stateless 如果你要用 state refs，最好用 class extends React.Component 而不是 React.createClass.... eslint: react/prefer-es6-class react/prefer-stateless-function // bad const Listing = React.createClass...mixins 会引入一些隐含依赖，导致命名冲突，会导致滚雪球式的复杂度。大多数情况下，mixins 都可以通过组件，高阶组件 HOC或者工具模块更好的实现。...另外，这也意味着你的代码可以忽略类型检查。

1.4K1 0

React的无状态和有状态组件

不过React.createClass创建React组件有其自身的问题存在： React.createClass会自动绑定函数方法，导致不必要的性能开销，增加代发过时的可能性； React.createClass...React.Component React.Component是以ES6的形式来创建React组件，也是现在React官方推荐的创建组件的方式，其和React.createClass创建的组件一样，也是创建有状态的组件...React.Component正在逐渐取代React.createClass，上面的例子使用React.Component实现如下。...总的来说：无状态函数式写法优于React.createClass，而React.Component优于React.createClass。...能用React.Component创建的组件的就尽量不用React.createClass形式创建组件。

1.4K3 0

小结React(二)：组件知多少

ES6的React.Component实现： // 3,React.Component import React from 'react' import ReactDOM from 'react-dom...的特点： ReactComponent.png 2.2.3React.createClass和React.Component如何选择？...可以看出React更推荐以React.Component的形式来创建一个有状态的组件，React.Component最终会完全取代React.createClass。...但在找到Mixins的替代方案前，不会废弃掉React.createClass。...如图，右边是受控的： controlled-vs-uncontrolled-cover.png 5.小结万丈高楼平地起，作为介绍React Hooks的基础篇，本文主要梳理了什么是组件、三种创建组件的方式

2.6K55 2

(转) 谈一谈创建React Component的几种方式

在最开始的时候我以为创建组件只需要调用createClass这个api就可以了；但学习了ES6的语法后，又知道了可以利用继承，通过extends React.component来创建组件；后来在阅读别人代码的时候又发现了...几种方法 1.createClass 如果你还没有使用ES6语法，那么定义组件，只能使用React.createClass这个helper来创建组件，下面是一段示例： var React = require...("react"); var Greeting = React.createClass({ propTypes: { name: React.PropTypes.string //属性校验...来调用父类的构造函数，同时我们看到组件的state是通过在构造函数中对this.state进行赋值实现，而组件的props是在类Greeting上创建的属性，如果你对类的属性和对象的属性的区别有所了解的话，大概能理解为什么会这么做...对比 createClass vs Component 对于React.createClass 和 extends React.Component本质上都是用来创建组件，他们之间并没有绝对的好坏之分，只不过一个是

4902 0

ES6+ 开发 React 组件

替代了使用 React.createClass 方法来定义一个组件，我们可以定义一个 bonafide ES6 类来扩展 React.Component： 1 2 3 4 5 class Photo extends... React.Component { render() { return ; }..., brought to you by React.createClass var PostInfo = React.createClass({ handleOptionsButtonClick: ...Peek under the hood 来看看为什么能实现。动态属性名称 & 模板字符串其中一个对象常量增强是可以分配到一个派生属性名称。...我们最初可能会像下面这样设置一些状态： 1 2 3 4 5 6 7 var Form = React.createClass({ onChange: function(inputName, e) {

7048 0

React创建组件的三种方式及其区别

或者说为什么会出现对应的定义方式呢？下面就简单介绍一下。无状态函数式组件创建无状态函数式组件形式是从React 0.14版本开始出现的。...但是随着React的发展，React.createClass形式自身的问题暴露出来： React.createClass会自绑定函数方法（不像React.Component只绑定需要关心的函数）导致不必要的性能开销...React.Component React.Component是以ES6的形式来创建react的组件的，是React目前极为推荐的创建有状态组件的方式，最终会取代React.createClass形式；...将上面React.createClass的形式改为React.Component形式如下： class InputControlES6 extends React.Component { constructor...但是在找到Mixins替代方案之前是不会废弃掉React.createClass形式。所以：能用React.Component创建的组件的就尽量不用React.createClass形式创建组件。

2K3 0

React Native之React速学教程(下)

React Native之React速学教程(下) 本文出自《React Native学习笔记》系列文章。...通过《React Native之React速学教程》你可以对React有更系统和更深入的认识。...为了方便大家学习，我将《React Native之React速学教程》分为上、中、下三篇，大家可以根据需要进行阅读学习。概述本篇为《React Native之React速学教程》的最后一篇。...心得：很多React/React Native的初学者经常会被ES6问题迷惑：官方建议我们ES6，但是网上搜到的很多教程和例子都是基于ES5版本的，所以很多人感觉无法下手，下面就让我们一起认识ES6与ES5...定义组件 ES5 在ES5里，通常通过React.createClass来定义一个组件类，像这样： var Photo = React.createClass({ render: function

2.8K5 0

前端技能树，面试复习第 19 天—— React 基础一点通

React 高阶组件、Render props、hooks 有什么区别，为什么要不断迭代?...浅比较会忽略属性和或状态突变情况，其实也就是数据引用指针没有变化，而数据发生改变的时候 render 是不会执行的。如果需要重新渲染那么就需要重新开辟空间引用数据。...React.Component：通过 constructor 设置初始状态（4）this区别 React.createClass：会正确绑定 this React.Component：由于使用了 ES6...// RFC React.createClass 会自绑定函数方法，导致不必要的性能开销，增加代码过时的可能性。...React.createClass 与 React.Component 区别： ① 函数 this 自绑定 React.createClass 创建的组件，其每一个成员函数的 this 都由

3353 1

React 基础实例教程

= React.createClass({ render: function() { return I'm Pual } }); var Info = React.createClass...事件的绑定与event对象传值由于React对事件的绑定处理忽略了原始支持的onclick属性，在使用其他JS库时，可能会遇到问题如WdatePicker日期插件，它的使用方式是直接在HTML中绑定...中就不适用了，onclick会直接被忽略，onClick因为传的不是函数也被忽略，所以需要换个法子 render() { // return <input type="text" name...依照state状态的diff来判断是否需要重新渲染数据，在InfoWrap中不会更新两次HTML，但还是会向子Info中传入两次属性props class Info extends React.Component...在使用一些插件的时候可能会遇到问题，如日期插件bootstrap-datepicker class DatePicker extends React.Component { constructor

4.4K2 0

2021前端react高频面试题

2021前端react高频面试题 React视频教程系列 React 实战：CNode视频教程完整教程目录：点击查看 React经典教程-从入门到精通完整教程目录：点击查看最新最全前端毕设项目（小程序...+VUE+Noed+React+uni app+Express+Mongodb）完整教程目录：点击查看 2021前端React精品教程完整教程目录：点击查看 1：讲讲什么是 JSX ？...为什么浏览器无法读取JSX？** 浏览器只能处理 JavaScript 对象，而不能读取常规 JavaScript 对象中的 JSX。...; } } 复制代码 props // ES5 var App = React.createClass({ propTypes: { name: React.PropTypes.string...; } } 复制代码 state // ES5 var App = React.createClass({ getInitialState: function() {

7640 0

React Object实现React对象

不使用ES6 通常情况下，定义一个React组件可以使用ES6规范中的class关键字： class Greeting extends React.Component { render() {...React.Component { // ... } Greeting.propTypes = { name: React.PropTypes.string }; Greeting.defaultProps...该提议不一定会被委员会接纳。如果非常想要尝试这种写法，你可以有这几种实现方式：在构造函数中绑定方法。使用箭头来定义方法。使用 React.createClass 。...所有混合器的生命周期方法都会被调用，React会按照混合器设定的顺序来执行。不使用JSX 对于React来说JSX并不是必须要使用的表达式。当在环境中不想在家额外的编译工具时尤其适用。...、由 React.Component创建的子类或者一个普通无状态的组件。

8182 0

React组件详解

目前，React支持三种方式来定义一个组件，分别是： - ES5的React.createClass方式； - ES6的React.Component方式； - 无状态的函数组件方式。...例如，使用React.createClass创建的组件，事件函数会自动绑定相关的函数，这样会导致不必要的性能开销，而React.Component则是有选择性的绑定有需要函数。...随着ES6语法的普及，React.createClass正逐渐被React.Component方式所替代。并且，使用React.Component方式创建的组件更符合面向函数编程的思想，可读性也更高。...3.6.2 ES5与ES6组件对比相比React.createClass方式，React.Component带来了诸多语法上的改进： 1. import ES6使用import方式替代ES5的...3. this绑定使用React.createClass方式创建的组件，事件函数会自动绑定this函数，但是此种方式会带来不必要的性能开销，增加了代码过时的可能性。

1.5K2 0

前端必会react面试题合集2

(obj) => obj)}; }}vue 或者react 优化整体优化虚拟dom为什么虚拟 dom 会提高性能?...React 声明组件的三种方式：函数式定义的无状态组件ES5原生方式React.createClass定义的组件ES6形式的extends React.Component定义的组件（1）无状态函数式组件...// RFC React.createClass会自绑定函数方法，导致不必要的性能开销，增加代码过时的可能性。...（3）E6继承形式 React.Component // RCC 目前极为推荐的创建有状态组件的方式，最终会取代React.createClass形式；相对于 React.createClass可以更好实现代码复用...React.createClass与React.Component区别：① 函数this自绑定React.createClass创建的组件，其每一个成员函数的this都有React自动绑定，函数中的this

2.2K7 0

react高频知识点梳理

React 声明组件的三种方式：函数式定义的无状态组件ES5原生方式React.createClass定义的组件ES6形式的extends React.Component定义的组件（1）无状态函数式组件...// RFC React.createClass会自绑定函数方法，导致不必要的性能开销，增加代码过时的可能性。...（3）E6继承形式 React.Component // RCC 目前极为推荐的创建有状态组件的方式，最终会取代React.createClass形式；相对于 React.createClass可以更好实现代码复用...无状态组件相对于于后者的区别：与无状态组件相比，React.createClass和React.Component都是创建有状态的组件，这些组件是要被实例化的，并且可以访问组件的生命周期方法。...React.createClass与React.Component区别：① 函数this自绑定React.createClass创建的组件，其每一个成员函数的this都有React自动绑定，函数中的this

1.4K2 0

React学习（8）—— 高阶应用：不使用ES6、JSX实现React

不使用ES6 通常情况下，定义一个React组件可以使用ES6规范中的class关键字： class Greeting extends React.Component { render() {...这就意味着在类中申明的方法在执行时并不会自动属于当前实例，必须在构造函数中显示的使用.bind(this)方法绑定到当前实例： class SayHello extends React.Component...该提议不一定会被委员会接纳。如果非常想要尝试这种写法，你可以有这几种实现方式：在构造函数中绑定方法。使用箭头来定义方法。使用 React.createClass 。...所有混合器的生命周期方法都会被调用，React会按照混合器设定的顺序来执行。不使用JSX 对于React来说JSX并不是必须要使用的表达式。当在环境中不想在家额外的编译工具时尤其适用。...组件被编译成一段字符串、由 React.Component创建的子类或者一个普通无状态的组件。

5441 0

React中创建组件的3种方式

问题就在这里，如果传递的是一个字符串，那么在创建虚拟DOM对象时，React会认为这是一个原生的HTML标签，但是这显然不是一个原生的HTML标签，因此去创建一个不存在的标签肯定是会报错的。...如果首字母大写，那么就会当成一个变量传递进去，这个时候React会知道这是一个自定义组件，因此他就不会报错了。...mixins的前世今生 3.如何选择哪种方式创建组件　　　　　　由于React团队已经声明React.createClass最终会被React.Component的类形式所取代。...但是在找到Mixins替代方案之前是不会废弃掉React.createClass形式。所以：能用React.Component创建的组件的就尽量不用React.createClass形式创建组件。...2、否则（如需要state、生命周期方法等），使用`React.Component`这种es6形式创建组件

2K3 0

web前端经典react面试题

React 声明组件的三种方式：函数式定义的无状态组件ES5原生方式React.createClass定义的组件ES6形式的extends React.Component定义的组件（1）无状态函数式组件...// RFC React.createClass会自绑定函数方法，导致不必要的性能开销，增加代码过时的可能性。...（3）E6继承形式 React.Component // RCC 目前极为推荐的创建有状态组件的方式，最终会取代React.createClass形式；相对于 React.createClass可以更好实现代码复用...React.createClass与React.Component区别：① 函数this自绑定React.createClass创建的组件，其每一个成员函数的this都有React自动绑定，函数中的this...浅比较会忽略属性和或状态突变情况，其实也就是数据引用指针没有变化，而数据发生改变的时候render是不会执行的。如果需要重新渲染那么就需要重新开辟空间引用数据。

9592 0

react面试题合集

;component 和 function// ES5var MyComponent = React.createClass({ render: function() { return...; }}props// ES5var App = React.createClass({ propTypes: { name: React.PropTypes.string },...React 区分 Class组件和 Function组件的方式很巧妙，由于所有的类组件都要继承 React.Component，所以只要判断原型链上是否有 React.Component 就可以了：AComponent.prototype...instanceof React.Component为什么 JSX 中的组件名要以大写字母开头因为 React 要知道当前渲染的是组件还是 HTML 元素当调用setState时，React render...Diff算法中React会借助元素的Key值来判断该元素是新近创建的还是被移动而来的元素，从而减少不必要的元素重渲染。

6383 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭