React基础应用及常用代码

基础知识

babel.config.js

js,html,css,Vue,react,angular,nodejs,webpack,less,ES6,commonjs等的关系

ECMAScript 6（ES6）

let、const、var 的区别

Webpack、npm、node关系

props和state区别

通用框架类

ES 6

export

React

React.Fragment

render()

Class类定义

class类式组件React.Component

prototype：实例属性|实例方法

私有属性定义与存值函数|取值函数

static：静态属性|静态方法

class：使用注意点

class：类中this指向问题与规避方法

context

constructor() 构造函数

extends：单继承语法与原型链

React：Class类式组件定义

继承父类初始state属性

React：Class类式组件-绑定点击事件

基本应用

import引入组件

基础知识

babel.config.js

Babel 将较新的 Javascript 转换为旧的 Javascript，以便较旧的浏览器(尤其是 IE11)可以理解它。

js,html,css,Vue,react,angular,nodejs,webpack,less,ES6,commonjs等的关系

前端开发根本只有三种语言,js,html和css

随着业务的复杂,前端也需要进行模块化开发,可是js本身不具备模块化语法,无法进行模块化.为了解决这个问题,出现了CommonJS,AMD,CMD,UMD和ES6规范,这些规范都包含了js模块化方案.从而解决了JS全局污染和依赖管理混乱问题.这些更多属于MVC中的M.

而Vue,react,angular更多属于构建用户界面的V的框架.提高页面开发效率.

less则聚焦于kuozcss语言,让css变成可编程.

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

Nodejs则扩展是js的使用场景,让js不仅能够在浏览器运行,同时也可以在各种平台上运行,其实内部本质是吧js翻译成了c++.

总结来说, 不管怎么变,一切都是围绕js,html和css进行扩展.

npm

我们发现用到node环境的地方，都会出现npm这个名词，那么npm是干什么的？npm是node.js的包管理器，它为javascript开发人员提供了一个集中管理工具，开发人员可以将自己开发的代码包上传到npm的官网，npm通过注册表来维护每个包的信息，其他开发人员可以很方便的使用npm的指令下载和解压需要使用的代码包，无需关注每个包的依赖包，npm在下载时会自动将依赖包下载并管理起来，解放双手！

生成一个pakeage.json文件，这个文件中会记录项目中使用的包以及版本，实现项目的依赖版本管理，此后新增/更新的包都会记录在这个文件中，增加项目的移植性。

webpack主要有以下功能：

自定义插件 | webpack 中文文档 | webpack中文文档 | webpack中文网 (webpackjs.com)

代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等浏览器可以识别的格式/类型。

文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等。

代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。

模块合并：在采用模块化的项目里会有很多个模块和文件，需要构建功能把模块分类合并成一个文件。

自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器，提升开发效率。

在前端项目中，通过webpack.config.js(默认使用此文件名)来控制webpack编译打包相关的配置，具体配置这里不赘述。

CommonJS

前文讲了这么多概念，似乎一直没提到CommonJS，那么CommonJS是什么，跟前文提到的一些概念有什么关系？

看过webpack配置文件的同学应该会发现webpck的配置文件中会使用到很多require和export关键词，而vue文件中则频繁使用的是import和export，我们知道这几个关键词是用于导入和导出模块，模块是什么？为何会有这种差异？这就涉及到模块化和CommonJS规范了。

模块化

模块化开发是一种管理方式，是一种生产方式，一种解决问题的方案，一个模块就是实现特定功能的文件，有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块，可以很好的解决命名冲突等各种问题。

但是模块开发需要遵循一定的规范，因此诞生了CommonJS、AMD、CMD和ES6等模块化规范。

CommonJS规范

node.js是基于CommonJS规范的，CommonJS是模块化的规范之一。

根据commonjs规范，一个单独的文件就是一个模块。加载模块使用require方法，该方法读取一个文件并执行，最后返回文件内部的exports对象

使用方式：

// 导入

require("module");

require("../app.js");

// 导出

exports.getStoreInfo = function() {};

module.exports = someValue;

CommonJS使用require加载模块时是使用同步加载的方式，是专门为服务器端设计的模块化规范，不适用于浏览器端。

AMD规范

如果是浏览器环境，要从服务器端加载模块，这时就必须采用非同步模式，因此浏览器端一般采用AMD规范，require.js即基于AMD规范。

AMD 即Asynchronous Module Definition，中文名是“异步模块定义”的意思，它采用异步方式加载模块，模块的加载不影响它后面语句的运行，所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行

使用方式：

// 定义

define("module", ["dep1", "dep2"], function(d1, d2) {...});

// 加载模块

require(["module", "../app"], function(module, app) {...});

使用AMD规范可以实现在浏览器端异步加载多个模块，并且可以并行加载，但是其存在代码阅读和书写困难、开发成本高等问题。

CMD规范

CMD跟AMD相似，也是采用异步加载模块的方式。它们的区别是：CMD相当于按需加载，定义一个模块的时候不需要立即制定依赖模块，在需要的时候require就可以了，比较方便；而AMD则相反，定义模块的时候需要制定依赖模块，并以形参的方式引入回调函数中。

使用方式：

define(function(require, exports, module) {

var a = require('./a');

a.doSomething();

// 依赖就近书写，什么时候用到什么时候引入

var b = require('./b');

b.doSomething();

});

sea.js即使用了CMD规范。

ES6规范

ES6模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。commonjs和AMD模块，都只能在运行时确定这些东西。比如，commonjs模块就是对象，输入时必须查找对象属性。

ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。

使用方式：

// 导入

import "/app";

import React from “react”;

import { Component } from “react”;

// 导出

export function multiply() {...};

export var year = 2018;

export default ...

...

node的默认模块格式是CommonJS，目前还没决定怎么支持ES6模块。所以，只能通过Babel这样的转码器，在Node里面使用ES6模块。

总结

通过前文中对基本概念的介绍，相信大家已经大概理解这些概念和vue之间的关系了：vue是基于ES6的JS框架；ES6是JavaScript的一套标准规范；webpack可以对前端项目进行编译、压缩和打包，webpack是使用node开发，运行在node环境中的一个工具；node遵循CommonJS规范；npm是node的包管理器。

本质上vue不依赖node、webpack、npm等，但是在实现前端工程化的进程中，这些技术可以让开发人员将更多的注意力放在代码编写中，不再过多的关注兼容性、规范化、编译打包甚至依赖版本管理等，很大地提升了开发效率。

原文链接：https://blog.csdn.net/u011244839/article/details/103654979

ECMAScript 6（ES6）

ECMAScript 6（ES6），也被称为 ECMAScript 2015（ES2015），是 JavaScript 语言的一个版本。ES6 是对 JavaScript 语言的一系列重大更新，引入了许多新的语法特性和功能，以改进 JavaScript 的可读性、可维护性和开发效率。在技术上，ES6 是 ECMAScript 标准的第六个版本。

let、const、var 的区别

1. 使用 var 声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象。

2. 使用 let 声明的变量，其作用域为该语句所在的代码块内，不存在变量提升。

3. 使用 const 声明的是常量，在后面出现的代码中不能再修改该常量的值。

Webpack、npm、node关系

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源，可以有效减少由新特性带来的浏览器的兼容性问题。

npm是Node.js 官方提供 Node 生态系统的包管理工具，自带依赖和版本的控制，让开发者专注于业务。是 Node.js 包的标准发布平台，用于 Node.js 包的发布、传播、依赖控制

node是指基于V8引擎提供了一种可以让JS代码跑在后端的能力

webpack将npm中安装的包打包成更小的浏览器可读的静态资源

webpack依赖于node环境，但它只是一个前端的打包工具，打包的是静态资源，和后台没有关系

props和state区别

1.props不能被其所在的组件修改，从父组件传递进来的属性不会在组件内部更改；props意为属性，只可父组件改变子组件的props，而子组件不能自更新，props是子组件暴露给外部的公有接口

2.state只能在所在组件内部更改，或在外部调用setState函数对状态进行间接修改。

总结：简单来说，props是父组件传递过来的属性，比如列表页跳转到新增页，新增页的props都是列表传递过来的，并且我们在新增页面是无法去修改props属性的

所以当我在新增页面想要联动去修改一些属性我们要写到state里面才能取到最新变更后的属性

通用框架类

ES 6

export

export default 是ES6 模块化系统中用来导出模块的默认成员。当在一个模块中只导出一个成员时，可以使用 export default 将其导出为默认成员，在导入时可以忽略成员名称，直接导入默认成员，比如：

// 导出默认成员 export default function add(a, b) { return a + b; } // 导入默认成员 import sum from './util'; console.log(sum(1, 2)); // 3

注意：一个模块只能导出一个默认成员。如果一个模块需要导出多个成员，可以使用 export 语法分别导出，比如：

// 导出多个成员 export function add(a, b) { return a + b; } export function subtract(a, b) { return a - b; } // 导入多个成员 import { add, subtract } from './util'; console.log(add(1, 2)); // 3 console.log(subtract(2, 1)); // 1

React

React.Fragment

react return里返回多个元素值要有父标签包裹。

React.Fragment组件能够在不额外创建 DOM 元素的情况下，让 render()方法中返回多个元素。相当于空标签<></>。

render()

基本用法

import React, { Component, Fragment } from "react";

import "./App.css";

class App extends Component {

render() {

return (

<div>

</div>

<ul>

</ul>

</>

);

}

export default App;

一、React中的render()

1、render()：是 class 组件中唯一必须实现的方法

2、当 render 被调用时，它会检查 this.props 和 this.state 的变化并返回以下类型之一：

（1）React 元素。通常通过 JSX 创建。例如，<div /> 会被 React 渲染为 DOM 节点，<MyComponent /> 会被 React 渲染为自定义组件，无论是 <div /> 还是 <MyComponent /> 均为 React 元素。

（2）数组或 fragments。使得 render 方法可以返回多个元素。

（3）Portals。可以渲染子节点到不同的 DOM 子树中。

（4）字符串或数值类型。它们在 DOM 中会被渲染为文本节点

（5）布尔类型或 null。什么都不渲染。（主要用于支持返回 test && <Child /> 的模式，其中 test 为布尔类型。)

3、render() 函数应该为纯函数，这意味着在不修改组件 state 的情况下，每次调用时都返回相同的结果，并且它不会直接与浏览器交互。

4、如需与浏览器进行交互，请在 componentDidMount() 或其他生命周期方法中执行你的操作。保持 render() 为纯函数，可以使组件更容易使用、维护。

5、在React.Component类的子类中会重新定义(实现)

6、在react中，触发render的有4条路径。

以下假设shouldComponentUpdate都是按照默认返回true的方式。

（1）首次渲染Initial Render

（2）调用this.setState （并不是一次setState会触发一次render，React可能会合并操作，再一次性进行render）

（3）父组件发生更新（一般就是props发生改变，但是就算props没有改变或者父子组件之间没有数据交换也会触发render）

（4）调用this.forceUpdate

Class类定义

通过构造函数生成JavaScript对象实例的方式，固然可以满足实际开发需求，但是，这种写法跟传统的面向对象语言（比如 C++ 和 Java）差异很大，很容易让新学习这门语言的程序员感到困惑。所以，ES6引入了新的Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类，然后通过new class类名的方式创建对象。

那么，如何定义一个类呢？语法其实非常简单，

class 类名{

//构造器-固定写法

constructor(参数列表){

//todo:做一些实例属性初始化的操作

this.propertyName = 参数1;

...

this.propertyName = 参数n；

}

//实例成员

methodName(参数列表){

//toDo:实现一些功能

}

class类式组件React.Component

React框架允许开发者基于ES6的Class类和extends继承语法定义类式组件，只需要继承React核心库react.js中暴露出来的React.Component父类即可

prototype：实例属性|实例方法

以下通过class类的语法，将上面回顾部分中的Point对象模板重构为ES6-Class风格的类。示例代码如下

class Point{

//构造器

constructor(x,y) {

//初始化实例属性x,y

this.x = x;

this.y = y;

this.name = "Point-Function";

}

//定义实例方法

getName(){

return this.name;

}

getX(){

return this.x;

}

getY(){

return this.y;

}

getLocation(){

return `(${this.x},${this.y})`;

}

toString(){

return `x=${this.x},y=${this.y}`;

}

//定义Point类的对象

const point = new Point(100,150);

console.log(point.name);

console.log(point.getName());

console.log(point.getLocation());

私有属性定义与存值函数|取值函数

熟悉Java后端编程语言的朋友应当十分了解，每当我们使用Java去定义一个类时，总会将成员属性私有化，并为类内部的成员属性添加getter/setter方法，体现的是类定义的一种封装思想，可以提升变量访问的安全性。

ES6的class-类语法规则中包含了如何实现类实例属性的私有化——在属性名之前通过#符号修饰，声明为一个私有属性，同时也可以提供接口供外部对象访问、修改私有属性——这就是存值函数（set函数）和取值函数（get函数）。

以下，我们将为Point类定义一个私有属性version，并借助get/set函数来获取、修改它。

class Point{

//私有属性

#version = 'v1.0';

//存值函数

set version(version){

//设置#version私有属性的值之前,可以做一些过滤、预处理操作

if(typeof version === "undefined" || version == null) return;

this.#version = version;

}

//取值函数

get version(){

return this.#version;

}

//静态属性

static msg = "Point_class";

//静态方法

static showMsg(){

console.log(this);

console.log(Point.msg);

}

//构造器

constructor(x,y) {

//初始化实例属性x,y

this.x = x;

this.y = y;

this.name = "Point-Function";

}

//定义实例方法

getName(){

return this.name;

}

getX(){

return this.x;

}

getY(){

return this.y;

}

getLocation(){

return `(${this.x},${this.y})`;

}

toString(){

return `x=${this.x},y=${this.y}`;

}

//定义Point类的对象

const point = new Point(100,150);

//修改私有成员属性的值

point.version = 'v2.0';

console.log(point.version);

static：静态属性|静态方法

class Point{

//静态属性

static msg = "Point_class";

//静态方法

static showMsg(){

console.log(this);

console.log(Point.msg);

}

//构造器

constructor(x,y) {

//初始化实例属性x,y

this.x = x;

this.y = y;

this.name = "Point-Function";

}

//定义实例方法

getName(){

return this.name;

}

getX(){

return this.x;

}

getY(){

return this.y;

}

getLocation(){

return `(${this.x},${this.y})`;

}

toString(){

return `x=${this.x},y=${this.y}`;

}

//调用静态成员

Point.showMsg();

class：使用注意点

为简化类型判断、类初始化操作，ES6新增了in关键字、static静态代码块之类的内容，具体可见：ES6 入门教程。下面，我们来看一些class类使用时的一些注意点，因为这可能影响到之后我们编写React的class类式组件。

①严格模式：JavaScript 严格模式（strict mode）即在严格的条件下运行。ES5中经常是通过"use strict" 指令实现，例如：JQuery脚本库源码中也开启了严格模式。

严格模式会对原来的代码产生什么影响呢？首要一点就是，我们无法使用未声明的变量，这意味着JavaScript会脱离以往“懒散”的代码结构，以更高的标准运行在浏览器上。

②不存在变量提升。意味着，Class类的使用，必须在定义之后，如下的写法是不被允许的。

③name属性。本质上，ES6 的类只是 ES5 的构造函数的一层包装，所以函数的许多特性都被Class继承，包括name属性。name属性总是对应紧跟在class关键字后面的类名，除非你对它进行修改操作。

还有一些其它注意点或者技巧，如：Generator方法等，我们这里用不太到，暂时先跳过。

class：类中this指向问题与规避方法

还有一个重要的问题就是：Class类中的this指向问题。这将会影响到后续：在定义React类式组件过程中，尤其是事件回调方法的使用。

我们知道，如果类的成员方法内部含有this，那么它默认指向当前类的实例。但是，一旦我们开始尝试单独去调用类的成员方法，那么就很可能报错——原因：会导致成员方法的this指向发生改变。举个例子，

class Point{

constructor(x,y) {

this.x = x;

this.y = y;

}

getX(){

console.log(this);

return this.x;

}

getY(){

console.log(this);

return this.y;

}

const point = new Point(100,150);

console.log(point.getX());//100

//下面做一个对象解构

const { getY } = point;

console.log(getY());//expect value:150,real value:直接报错

我们看一下输出结果，很明显，在解构之后，getY()方法在独立调用时，this的指向变了，已经变为undefined。

为什么是undefined呢？至少我们预期的，不是Point类的对象point，那它也应该是window全局对象啊。我们可能忽略了一点，上面有提到，ES6的class是在严格模式下执行的，我们无法去访问未定义的变量。而恰好，class内部的这个全局范围内，this变量是未定义的，并非指向window对象，所以是undefined。

那么，如何避免上述问题，让this指向我们想要指的那个地方呢？

有以下两种解决方法：

方法①：在constructor()构造器中显示调用bind()方法，修改this的指向。修改后的代码如下，

class Point{

constructor(x,y) {

this.x = x;

this.y = y;

//bind-显示绑定this指向

this.getY = this.getY.bind(this);

}

getX(){

console.log(this);

return this.x;

}

getY(){

console.log(this);

return this.y;

}

const point = new Point(100,150);

console.log(point.getX());//100

//下面做一个对象解构

const { getY } = point;

console.log(getY());//expect value:150,real value:150.

方法②：

使用箭头函数，箭头函数内部的this总是指向定义时所在的对象。且不看如何理解，我们先看下如何编写代码。

class Point{

constructor(x,y) {

this.x = x;

this.y = y;

}

getX(){

console.log(this);

return this.x;

}

getY = ()=>{

console.log(this);

return this.y;

}

const point = new Point(100,150);

console.log(point.getX());//100

//下面做一个对象解构

const { getY } = point;

console.log(getY());//expect value:150,real value:150.

可以看到，现在确实是预期的输出结果。那么是什么原因呢？先明确一点，箭头函数中的this，是在函数定义时候绑定的，并且是固定不可变的；之前会报错的形式，其this是在执行函数的时候绑定的。箭头函数在什么时候被定义呢？显然是和类一起定义的，因此，箭头函数内部的this会总是固定指向实例对象。

context

在react中，context是一个无需为每层组件手动添加props就能在组件树之间进行数据传递的方法；context提供了一种在组件之间共享指定值的方式，而且不必显式的通过组件树的逐层传递props。

constructor() 构造函数

方法格式如下：

constructor(props)

在 React 组件挂载之前，会调用它的构造函数 constructor()。

React.Component 子类实现构造函数时，应在其他语句之前前调用 super(props)。

在 React 中，构造函数仅用于以下两种情况：

通过给 this.state 赋值对象来初始化内部 state。
为事件处理函数绑定实例。

如果不初始化 state 或不进行方法绑定，则不需要为 React 组件实现构造函数。

在 constructor() 函数中不要调用 setState() 方法。如果你的组件需要使用内部 state，请直接在构造函数中为 this.state 赋值初始 state：

constructor(props) { super(props); // 不要在这里调用 this.setState() this.state = { counter: 0 }; this.handleClick = this.handleClick.bind(this);}

只能在构造函数中直接为 this.state 赋值。如需在其他方法中赋值，你应使用 this.setState() 替代。

extends：单继承语法与原型链

ES5中的传统继承方式比较复杂，方式种类内容也很多，包括：原型链继承、组合继承、寄生组合式继承等等，可以自行搜索学习。下面看ES6中的继承语法。

ES6的class继承语法借助extends关键字实现，规则十分之简单，规则如下，

class 父类{

constructor(){

}

class 子类 extends 父类{

constructor(){

super();//必须显示调用父类构造函数

}

注意到，子类通过extends关键字继承父类时，在构造函数内部，必须首先通过super关键字，调用父类的构造方法，这一动作的目的是：用来新建一个父类的实例对象。如果不做，那么程序就会报错。为什么呢？

原因在于：ES6规定，子类自己的this对象，必须要先通过父类的构造函数完成塑造，得到与父类相同的实例属性和方法，然后在对其加工，添加子类拓展出来的新的实例属性和方法。换言之，父类实例的创建必须在子类实例之前，或者说子类实例构建的原材料就是父类实例。所以，必须先得到这个原材料——父类实例，否则编译器它“巧妇难为无米之炊”啊，你想让它凭空捏造出来一个子类实例，它自然做不到，就会报错了。

在之后，通过extends关键字继承React.Component父类时，也一定要注意这一点。

另一点是，在子类的构造函数中，只有调用super()之后，才可以使用this关键字，否则会报错。这是因为子类实例的构建，必须先完成父类的继承，只有super()方法才能让子类实例继承父类。

遵循如上规则的示例代码如下，

class Point {

constructor(x, y) {

this.x = x;

this.y = y;

}

class ColorPoint extends Point {

constructor(x, y, color) {

//step-1

super(x, y);

//step-2

this.color = color;

}

关于继承的特点，概括起来为：

【1】父类的私有属性子类无法继承；

【2】父类的实例属性、实例方法、静态属性、静态方法都会被继承。

除上面的内容之外，我们再谈一谈`原型链`。

我们知道，大多数浏览的ES5语法实现过程中，每个对象都有一个__proto__属性，指向对应的构造函数的prototype属性。其中：__proto__属性，是对象才有的；而prototype，是函数才有的。从网上摘录的一句比较清楚的解释如下，

举个例子，我们来探索一下prototype和__proto__之间的关系，示例代码如下，

function Point(x, y) {

//成员属性

this.x = x;

this.y = y;

}

//挂载实例属性

Point.prototype.name = "Point-Function";

//挂载实例方法

Point.prototype.getName = function (){

return this.name;

}

Point.prototype.getX = function() {

return this.x;

}

Point.prototype.getY = function (){

return this.y;

}

Point.prototype.getLocation = function (){

return `(${this.x},${this.y})`;

}

Point.prototype.toString = function() {

return "x=" + this.x + ",y=" + this.y;

};

const point = new Point(100,150);

//比较point.__proto__ === Point.prototype

console.log(point.__proto__ === Point.prototype);

//打印point.__proto__

console.log(point);

//打印Point.prototype

console.log(Point.prototype);

console.log(Point.prototype.prototype);

打印结果如下，

可以看到，

①Point.prototype完全等价于point.__proto__属性，表示的是同一个对象。

②当对Point构造函数取两次prototype，打印的结果为undefined。

我们来结合之前的描述，尝试通过画图来对上面的打印结果进行解释。

如上图所示，即为Point构造函数、Point原型对象、Point对象三者之间的存在的关系。

之前有提到：ES6的class类可以视为ES5的function构造函数的一种语法糖，其prototype属性在class上依旧存在。那么，在ES6的extends语法之下，如何描述上述这3者之间的关系呢？从网上摘录出来的一个解释如下，

（2）分析类A本身与类B之间的继承关系，主要是两条线：①构造函数的继承线；②方法的继承线。之所以这样区分，是因为（1）中，我们已经验证，Class A和Class B，就相当于是ES5中的构造函数function A和function B，本质上数据类型还是function；此外，类的实例方法是挂载到构造函数的原型对象prototype上的，所以要分两条线进行分析。其关系如下图所示，

至此，关于extends类的继承和原型链关系分析部分的内容就结束了。除此之外，ES6还允许我们去继承原生内置构造函数，像：Error、Date、Array等（ES5中是不可以的，无法实现的），其基本语法规则和上述jextends继承语法规则一致，就不在此赘述了。

React：Class类式组件定义

至此，关于ES6中class类语法规则的主要内容已经回顾完毕，下面叙述如何基于class类语法规则，定义一个React的类式组件。

React官网给出了一个简单例子如下，

class Welcome extends React.Component {

render() {

return <h1>Hello, {this.props.name}</h1>;

}

主要思路就是：继承React核心库react.js中开发出来的类类型React.Component父类，并重写render()实例方法，基于JSX语法规则返回一个Virtual DOM-虚拟DOM元素。

继承父类初始state属性

React：Class类式组件-绑定点击事件

严格来讲，此部分数据React事件处理部分的内容。我们在此处简单使用一下，来对应上面有讲到的关于Class-类中this指向的问题，在React类式组件定义中的应用。先看一下，官网关于使用部分的介绍，如下图所示，

React 元素的事件处理和 DOM 元素的很相似，但是有一点语法上的不同

React 事件的命名采用小驼峰式 (camelCase) ，而不是纯小写
使用JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串

那么，我们在使用时，只需要遵循上述规则，并绑定好事件，提供事件处理函数即可。先截个图，回忆一下原生DOM中的事件属性和描述信息。

需求描述：为上面的三栏布局，每一栏添加一个点击事件，点击事件触发之后，打印对应的组件显示文字内容。

实现思路：由于是JSX创建的虚拟DOM对象，那么，我们将onclick转换为小驼峰命名格式，并绑定到对应的JSX-VDOM节点上即可；此外，我们将事件回调函数写到React的class类式组件内部。

分步实现：

（1）尝试为Left组件，绑定点击事件，示例代码如下，

（2）尝试点击Left子组件，但是发现控制台报错，显示当前this为undefined。

（3）立即想到，之前有介绍关于ES6-class类内部的this指向问题。由于：①函数的定义形式，规定了它内部的this指向是在运行时，由调用者确定的；②此处是在点击事件内部触发的回调函数，导致当前实例函数并不是由组件对象发起调用的，因此，在严格模式下，对应的this就变成了undefined。

那么，我们借助之前的思路，将handlerClick()实例方法的定义形式转换为箭头函数的形式，使其内部的this在handlerClick定义时就确定为当前类的对象——组件实例。修改代码如下所示，

基本应用

import引入组件

import基本语法

在React中，使用import 语句引入外部文件或模块的语法如下:

import[模块名)from"路径/模块名"

其中，大括号0是必需的，用于指定要引入的具体模块。路径/模块名是指要引入的文件或模块的位置。当只需要引入默认导出时，可以省略大括号。

、常见引入方式

在 React 中，根据引入的对象类型和位置的不同，可以分为以下几种常见的引入方式:

1.引入默认导出

如果被引入的模块使用了默认导出 (export default)，则可以使用以下方式进行引入:

import 模块名 from“路径/模块名"

例如，引入一个名为 Button 的组件:

import Button from./components/Button”

2.引入命名导出

当被引入的模块使用了命名导出 (export)时，需要使用import 语句中的大括号0指定要引入的具体模块。

import[模块名]from“路径/模块名

例如，同时引入一个名为 Button 的组件和一个名为 Input 的组件:

import [ Button, Input ] from./components

3.引入所有导出

有时候，需要引入一个模块中的所有导出。可以使用以下语法:

import*as 变量名 from“路径/模块名”

例如，引入一个名为 components 的模块中的所有导出:

"./components~import *as components from

引入后，可以通过 components 变量来访问该模块中的所有导出。

三、实例应用

下面通过一个实例来演示 import 语句的使用。假设我们有一个 React 应用，需要引入一个名为 Button 的组件和一个名为Input 的组件，同时还需要引入一个名为 styles的CSS样式文件。

首先，在项目的根目录下创建一个名为 components 的文件夹，并在该文件夹下分别创建 Button.js、Input.js 两个组件文件，代码如下:

Button.js:

jsx

import React fromreact"

const Button = 0=> return <button>Click me</button>:

export default Button;

Input.js:

jsx

import React from "react”

const Input = (=>[

return <input type="text” />;

export default Input;

接下来，在项目的根目录下创建一个名为 styles 的文件夹，并在该文件夹下创建一个名为 button.css 的 CSS 样式文件，内容如下:

button.css:

css

button

backgroundcolor: blue;color: white;padding: 10px 20px;border: none;

cursor: pointer;

最后，在项目的入口文件(通常是 App.js 或 index.js)中引入所需的组件和样

式文件:

jsx

import React from"react”import Button from “./components/Button'import Input from "./components/Input";"./styles/button.css"import

const App = 0=>{return

<div>

</div>

export default App;

这样，我们就成功地引入了 Button 和 Input 组件以及 button.css 样式文件，可以在 App 组件中使用它们了。

四、总结