ES6写法的reactjs

reactjs是目前最火的单页面框架，面向ES6语法，使用JSX语法进行组件化开发。JSX语法是把js和html混合起来编写代码，其核心就是以“<”“>”包裹html，以“{ }”来包裹js语法。
只需要多写几遍就行，个人觉得没必要专门学习什么是jsx。reactjs语法非常简单，难的是把reactjs和其他的一系列东西混合起来如何使用。
这篇博客只针对reactjs语法，而对其webpack搭建环境、babel解析等不关心。（至于基本的环境，我已经在github上的示例上搭建好了。）

这篇博客牵扯的示例demo的github地址：https://github.com/liwudi/reactjs_study_es6.git
说明：项目启动方式，在每个示例demo下：
第一步，npm install 作用：下载依赖
第二步，npm start 作用：启动项目

接下来我们看react基本语法：
首先、reactjs单页面应用的html模板是这样的。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
</head>
<body>
<div id = "root"></div>
<script src="http://localhost:8080/bundle.js"></script>
</body>
</html>

然后、react的jsx示例如下：
- reactjs-demo1
最简单的react示例：

import React from 'react';import { render } from 'react-dom';render(<h1>hello mapbar_front</h1>,document.getElementById("root"));

说明：*import*，是ES6语法中的导入模块的关键字，类似之前的require的功能。
这里因为我们做的是react单页面应用，就导入react相关的两个包---'*react*'和'*react-dom*';*React*,*render*是从两个包"react"以及"react-dom"中导入的“变量”，*React是一个对象*，*render是一个函数*。render这个函数的作用：它有两个参数，第二个参数找到单页面应用的*入口*（id为root的盒子），
把<h1>hello mapbar_front</h1>（第一个参数）*填充*到这个id为root的盒子中。

reactjs-demo2
jsx语法说明：

/*** Created by mapbar_front on 2017/7/7.*/
import React from 'react';import { render } from 'react-dom';let arr = ['reactjs','webpack','es6','router','redux'];render(<div><h1>React技术栈</h1><ul>{arr.map((item,index) => <li key={index}>{item}</li>)}</ul></div>,document.getElementById("root"));

说明：jsx语法就是在html中嵌套js，使用{}，在js中嵌套html，使用<>,这个demo中，在ul中嵌套js语法，根据数组arr，返回相对应数量的<li></li>。map方法是es5的数组方法，返回一个处理过后的数组。是react中最常用的数组方法之一。

//这是箭头函数的使用。使用=>代替function关键字。
(param) => {//doing
}

reactjs-demo3
组件的简单示例：

/*** Created by mapbar_front on 2017/7/7.*/import React,{ Component } from 'react';import { render } from 'react-dom';class Main extends Component{render(){return <div>hello,mapbar_front!</div>}
}render(<Main />,document.getElementById("root"));

说明：render（<Main />,document.getElementById("root")）;
第一个参数其实是代表Main这个类中的render函数return的部分。
Main就是一个组件，组件就是由我们自己定义使用的类（ES6中）。class是ES6语法的增加的最重要的一部分，这说明了一项转变，JavaScript向着OOP面向对象的语法的转变。
extends是继承的关键字，在react中，所有的组件都继承自Component类，Component是react自己的顶级定义组件。

reactjs-demo4
组件分离
react在前端的一项开创性技术就是组件化开发，把页面中的模块一步步分离出一个个更小的组件，这样便于维护和重复利用。
如果我们这样写render：

let arr = ['reactjs','webpack','es6','router','redux'];
render(<div><h1>react技术栈</h1><ul>{
arr.map((item,index) => <li key={index}>{item}</li>)}</ul>
</div>,document.getElementById("root"));

分离第一步：把render函数第一个参数当做一个外层组件。以定义一个类的方式来实现。

class Main extends Component{render(){return <div><h1>react技术栈</h1><ul>{
arr.map((item,index) => <li key={index}>{item}</li>)}</ul></div>}
}render(<Main />,document.getElementById("root"));

分离第二步：把组件Main中的更小的h1标签和ul标签分离出来，定义成其他的组件。

class Header extends Component{render(){return <h1>react技术栈</h1>}
}
class Header extends Component{render(){return(<ul>{arr.map((item,index) => <li key={index}>{item}</li>)}</ul>)}
}
class Main extends Component{render(){return <div><Header /><List /></div>}
}render(<Main />,document.getElementById("root"));

这样在Main中引用定义好的Header组件和List组件。可是这样是不是感觉有什么问题？组件化开发，我们应该把一个单独的组件放在一个单独的js文件中，以便于我们重复利用。
所以我们建立一个Header.js和一个List.js文件来存放组件。
现在的基本情况是这样进行分离组件的：

//index.js
import React,{ Component } from 'react';import { render } from 'react-dom';import Header from './components/Header';import List from './components/List';class Main extends Component{render(){return <div><Header /><List /></div>}
}render(<Main />,document.getElementById("root"));

//Header.js
import React,{ Component } from 'react';export default class Header extends Component{render(){return <h1>react技术栈</h1>}
}

//List.js
import React,{ Component } from 'react';let arr = ['reactjs','webpack','es6','router','redux'];export default class Header extends Component{render(){return(<ul>{arr.map((item,index) => <li key={index}>{item}</li>)}</ul>)}
}

这样，我们就实现了组件的分离。每次在在使用Header组件的时候，只需要使用import引入就行。（List组件同理）

reactjs-demo5
属性的使用：this.props，特性是不可改变。
在真实的dom中，各种标签都有属性，比如script标签有src属性。
在组件中，也拥有属性，获取属性的方式就是this.props。
属性最大的作用就是—父组件和子组件的通信。

import React,{ Component } from 'react';import { render } from 'react-dom';class Main extends Component{render(){return <div>{this.props.title}</div>}
}render(<Main title="hello,mapbar_front" />,document.getElementById("root"));

说明：在这里title就是组件的属性。在Main组件中就可以使用这个属性，使用方式是this.props.title。

reactjs-demo6
状态的使用：this.state,特性是可以改变，改变状态界面重新渲染。改变方式是this.setState()。

import React,{ Component } from 'react';import { render } from 'react-dom';class Main extends Component{constructor(props){super(props);this.state = {value: true}}changeValue(){this.setState({value:!this.state.value});}render(){return <div><p>mapbar_front,{this.state.value?"like":"dislike"} reactjs!</p><button onClick={() => {this.changeValue();}}>change</button></div>}
}render(<Main />,document.getElementById("root"));

说明：状态在constructor构造函数中定义，在react中，constructor构造函数的固定写法同上。其中super(props)是继承的关键字。
上面示例中，在constructor中定义状态，在changeValue中改变状态，它是一个事件函数，在点击button中执行这个函数。
this.state.value？"like":"dislike"是一个三目运算。

reactjs-demo7
this.props.children,这个是个特殊属性，这个属性代表组件所有的子元素。

import React,{ Component } from 'react';import { render } from 'react-dom';class Main extends Component{render(){return <div>{this.props.children}</div>}
}render(<Main><h1>hello</h1><h1>world</h1>
</Main>,document.getElementById("root"));

reactjs-demo8
组件生命周期
componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()
我们最常使用的生命周期函数是：componentDidMount()。

import React,{ Component } from 'react';import { render } from 'react-dom';class Main extends Component{constructor(props){super(props);this.state = {list:[]}}render(){return <div><h1>商品列表</h1><ul>{this.state.list.map((item,index) => <li key={index}>{item.className}</li>)}</ul></div>}componentDidMount(){let _this = this;$.get(this.props.source,function (data) {data = JSON.parse(data);console.log(data);_this.setState({list:data})})}
}render(<Main source="http://datainfo.duapp.com/shopdata/getclass.php" />,document.getElementById("root"));

说明：在这个示例demo中，使用了生命周期函数中的componentDidMount，也就是组件加载完成时，进行ajax请求。
这里使用jQuery的$.get()方法，在获取数据之后setState，改变state中的list，重新进行render加载组件，所以界面会刷新。
这里也牵扯到另一个知识点，就是react的ajax请求，这里把请求url放在组件的属性中，react不依赖其他任何库，这是在webpack配置中加载了jQuery，所以能够使用jQuery的方式请求数据。
正常情况下，react使用的是promise进行数据请求。关于promise这里不做讨论。

reactjs-demo9
获取用户输入：
这一篇可参考我的另一篇博客react中ref的使用

至此，react的ES6写法已完结，这只不过是一些简单的demo，需要深入学的东西还有很多。

如果觉得不错，在我的github上点点小星星啊！
github地址：https://github.com/liwudi/reactjs_study_es6.git

ES6写法的reactjs相关推荐

JavaScript get set方法 ES5/ES6写法
网上鲜有get和set的方法的实例,在这边再mark一下. get和set我个人理解本身只是一个语法糖,它定义的属性相当于"存储器属性" 为内部属性提供了一个方便习惯的读/写方式 ...
JavaScript get set方法 ES5 ES6写法
title: JavaScript get set方法 ES5/ES6写法 date: 2018-05-07 10:38:50 tags: 前端 categories: 前端网上鲜有get和set的 ...
react-native ES5与ES6写法对照表
转载链接:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/react-native-es5-and-es6-writing-tabl ...
php es6写法,ES6...扩展运算符(示例代码)
在数组中的应用扩展运算符(spread)是三个点(...).它好比 rest 参数的逆运算,++将一个数组转为用逗号分隔的参数序列++. console.log(...[1, 2, 3]) // 1 ...
模块化操作（es6写法）
ES6模块化规范 ES6使用 export 和 import 来导出.导入模块. 导出模块创建 es6模块化/userApi.js export function getList() {consol ...
【JS】——数组拼接的多种方式包括ES6写法
1. 前言很多时候的我们需要进行数组的拼接,再此就整理了js的数组多种拼接方式. 2. 数据准备需要拼接的数组,简单例子 let num = [1,2,3]; let numTemp = [3,3 ...
php es6写法,Web/PHPStorm ES6 语法支持以及实时编译
最近用PHPstorm 写了点es6的语法的东西, what ? 编辑器报错了查了查, 原来把编辑器设置一下,就可以了, Preferences > Languages & Frame ...
vue 非es6 写法怎么按须加载_Vue源码必学指南：flow(语法检查)以及rollup(模板打包)...
点击上方蓝色字关注我们~ 一.前言虽然 Vue3 已经公开了代码,但是Vue3.0还处于开发阶段,直接上手使用Typescript是不合适的 , 对于前端的老手是不错的选择, 但是如果没有研究源码经 ...
es6箭头函数(=)与展开特性运算符(...)的使用
2019独角兽企业重金招聘Python工程师标准>>> 箭头函数的几个写法 //当含有固定个参数的时候,es5写法 function test(a,b){ ..}//es6写法(es ...

ES6写法的reactjs

ES6写法的reactjs相关推荐

最新文章

热门文章