React 从入门到进阶之路(二)

2019年7月2日10:56:51React 从入门到进阶之路(二)已关闭评论 178

在之前的文章中我们引见了 React 开辟的情况搭建及目次引见和整顿,本篇文章将引见 React 建立组件、JSX 语法、绑定数据和绑定对象。

之前我们已将项目运转了起来,我们再来看一下目次组织:

React 从入门到进阶之路(二)

个中 App.js 文件为我们的根组件,内里的代码:

React 从入门到进阶之路(二)

个中 import 为我们须要引入的文件,在 App.js 中我们引入了 React ,一张 svg 图片和 css 款式,然后接纳 ES6 对象的写法,App 对象继续了 React 的 Component ,而且经由过程 render 的体式格局安排我们的模板,这就是 JSX 语法,HTML 与 JavaScript 混写。末了将对象 App 袒露进来。

运转效果为:

React 从入门到进阶之路(二)

 

浏览器的显现效果就是 App.js 文件中 render 内里的代码运转所得出的效果。以是我们只须要修正 App.js 内里的 render 不等就能在浏览器端显现分歧的效果,然则一切的代码都写在内里代码会许多,不便于保护,以是我们须要将其举行模块化治理。

我们将 App.js 举行以下修正:

 1 import React, {Component} from 'react';
 2 import Home from './components/Home';
 3 
 4 class App extends Component {
 5     render() {
 6         return (
 7             <div className="App">
 8                <Home/>
 9             </div>
10         );
11     }
12 }
13 
14 export default App;

从上面的代码我们能够看出我们从 components 目次下引入了 Home.js 组件,并将其放在了render 里,这里注重的是由于 HTML 标签的 class 类名变成 className,这是由于

class 是JavaScript中的保存关键字,而JSX是JavaScript的扩大。这就是React不运用`class`而运用`className`的主要原因。

另有我们在引入组件时组件称号需为首字母大写。若是我们的 HTML 代码向换行的话须要在最外层包罗一个根节点。

接下来我们在 components 目次下建立 Home.js 文件,并在 Home.js 文件中插进去以下代码:

 1 import React, {Component} from 'react';
 2 
 3 class Home extends Component {
 4     constructor(props){
 5         super(props);
 6         this.state = {
 7             name: "zhangsan"
 8         }
 9     }
10     render() {
11         return (
12             <div>
13                 Hello {this.state.name}
14             </div>
15         );
16     }
17 }
18 
19 export default Home;

 顺序 http://localhost:3000 运转后我们将在浏览器端看到输出效果 Hello zhangsan

个中 constructor 组织函数内需写 super(); 透露表现我们的要领继续自 Component,我们能够向数据绑定在 this.state 的对象属性中,并在 HTML 模板中经由过程 { } 的情势将数据挂在到模板引擎上。

 

Es6中的super能够用在类的继续中,super关键字,它指代父类的实例(即父类的this对象)。子类必须在constructor要领中挪用super要领,不然新建实例时会报错。这是由于子类没有本身的this对象,而是继续父类的this对象,然后对其举行加工。若是不挪用super要领,子类就得不到this对象。

 

在 constructor(props) , super(props) 是用于父子组件间传值时须要用到的。

 

avatar