react入门教程02 - JSX简介、ES6、ReactDOM

本系列在《The Road to learn React》指导下，记录如何写出 Hacker News (译者注:一个著名黑客论坛)应用，以及更多相关知识的梳理，能够更好的教会你 React。

上一篇: 《react入门教程01 - 简介、开发环境搭建、创建第一个React应用》

JSX简介

前一节使用create-react-app创建了一个样板项目，我们现在来探索项目的源代码。我们先看看src/App.js文件。

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      

        

          
          
Welcome to React
        
        

          To get started, edit src/App.js and save to reload.
        
      
    );
  }
}

export default App;

上述的代码中，import/export语句和class声明，这些都是JavaScript ES6的特性。声明了一个组件之后，可以在项目任何地方实例化这个组件/创建这个组件的实例。

在这个文件有一个叫做App的React ES6类组件(class component)。这是一个组件声明。

render() 方法包含了它返回的元素(element)。元素是组件的构成部分。

以上，就是组件、实例和元素之间的区别。

render方法中的代码就是JSX。JSX 允许你在JavaScript中混入HTML。

下面，我们修改一下内容:

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render() {
    return 

        
欢迎学习react入门教程
      
;
  }
}

export default App;

在JSX中使用变量:

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render() {
    var welcome = "欢迎学习react入门教程";
    return 

        
{welcome}
      
;
  }
}

export default App;

下面运行npm start，看看效果吧。

ES6

ES6的学习，重点去看 教程: ECMAScript 6 入门。

这里特别提一下 两个关键字: const 和 let。以及复杂的JavaScript使用、ES6箭头函数、ES6类。

const 和 let

我们在前面的例子中使用的是关键字 var 来声明变量。JavaScript ES6中引入了另外两个声明变量的关键字: const 和 let。在 JavaScript ES6中， 你将会很少能看到 var 了。

被 const 声明的变量不能被重新赋值或重新声明。

// 这种写法是不可行的
const helloWorld = 'Welcome to the Road to learn React';

helloWorld = 'Bye Bye React';

被关键字 let 声明的变量可以被改变。

// 这种写法是可行的
let helloWorld = 'Welcome to the Road to learn React'; 

helloWorld = 'Bye Bye React';

使用 const 声明的变量不能被改变，但是如果这个变量是数组或者对象的话，它里面持有的内容可以被更新。它里面持有的内容不是不可改变的。

// allowed
const helloWorld = {
    text: 'Welcome to the Road to learn React'
};
helloWorld.text = 'Bye Bye React';

用 const 来代替 var:

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render() {
    const welcome = "欢迎学习react入门教程";
    return 

        
{welcome}
      
;
  }
}

export default App;

更多的关于 ES6 const 和 ES6 let 内容。

复杂的Javascript

到目前为止你在你的 JSX 中渲染了一些简单的变量。

这里，在JSX中渲染一个列表信息:

import React, { Component } from 'react';
import './App.css';

const list = [
  {
    title: "React",
    url: "https://facebook.github.io/react/",
    author: "Jordan Walke",
    num_comments: 3,
    points: 4,
    objectID: 0
  },
  {
    title: "Redux",
    url: "https://github.com/reactjs/redux",
    author: "Dan Abramov, Andrew Clark",
    num_comments: 2,
    points: 5,
    objectID: 1
  }
];

class App extends Component {
  ...
}

export default App;

在JSX 中使用 JavaScript 内置的 map 函数，遍历列表显示:

...

class App extends Component {
  render() {
    return (
      

        {list.map(function(item) {
          return (
            

              
                {item.title}
              
              {item.author}
              {item.num_comments}
              {item.points}
            
          );
        })}
      
    );
  }
}

export default App;

这里解释下 每个成员上的关键字(key)属性，是一个辅助属性，在列表变化的时候用来识别其中成员的添加、更改和删除的状态。

ES6 箭头函数

JavaScript ES6 引入了箭头函数。箭头函数表达式比普通的函数表达式更加简洁。

// function expression
function () { ... }

// arrow function expression
() => { ... }

使用ES6 箭头函数，让map函数更加简洁:

{list.map(item => {
  return (
    

      
        {item.title}
      
      {item.author}
      {item.num_comments}
      {item.points}
    
  );
})}

ES6类

JavaScript ES6 引入了类的概念。类通常在面向对象编程语言中被使用。

React 使用 JavaScript ES6 类来实现 ES6 类组件。

import React, { Component } from 'react';

...

class App extends Component { 
render() {
        ... 
    }
}

这个 App 类就从 Component 类中继承了它的功能。这个 Component 类是从一个基本 ES6 类中继承来的 ES6 组件类。它有一个 React 组件所需要的所有功能。渲染(render)方法就是其中你可以使用的一个功能。

这个 Component 类封装了所有 React 类需要的实现细节。它使得开发者们可以在 React 中使用类来创建组件。

React Component 类暴露出来的方法都是公共的接口。这些方法中有一个方法必须被重写， 其他的则不一定要被重写。你会在以后的讲述生命周期的章节中学到它们。这个 render() 方法是必须被重写的方法，因为它定义了一个 React 组件的输出。它必须被定义。

ReactDOM

接下来看看React 世界的入口文件 src/index.js :

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(, document.getElementById('root'));
registerServiceWorker();

简单来说，ReactDOM.render() 会使用你的 JSX 来替换你的 HTML 中的一个 DOM 节点。这样你就可以很容易地把 React 集成到每一个其他的应用中。ReactDOM.render() 可以在你的 应用中被多次使用。你可以在多个地方使用它来加载简单的 JSX 语法、单个 React 组件、 多个 React 组件或者整个应用。但是在一个纯 React 的应用中，你只会使用一次用来加载你的整个组件树。

ReactDOM.render() 有两个传入参数。第一个是准备渲染的 JSX。第二个参数指定了 React 应用在你的 HTML 中的放置的位置。这个位置是一个 id='root' 的元素。你可以在文件 public/index.html 中找到这个 id 属性。

(可选)调试方法: 模块热替换

模块热替换(HMR)是一个帮助你在浏览器中重新加载应用的工具，并且无需再让浏览 器刷新页面。你可以在 create-react-app 中很容易地开启这个工具:在你 React 的入口文件 src/index.js 中，添加一些配置代码。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(, document.getElementById('root'));
registerServiceWorker();

if (module.hot) {
    module.hot.accept();
}

配置完成。接下来再尝试在你的 src/App.js 文件中更改一下变量 helloWorld，浏览器应该不 会刷新页面，但是应用还是会重新加载并且显示正确的输出。

(完)