博客 技术博客 javascript react

用ES6书写React

前段时间学习react+redux的时候发现现在大家基本上都是在用es6的方式编写react代码。由于习惯了react本身的编写方式，起初看得云里雾里。当自己实践过后发现es6+react确实能够让代码更加简洁，提高开发效率。

起步

首先需要安装react

1
npm install react react-dom --save-dev

使用es6（7）需要babel转换器，本人使用的是webpack自动化工具

1
2
3
4
5
npm install webpack --save-dev
npm install babel-preset-es2015 --save-dev //转换至es5
npm install babel-preset-react --save-dev //转换jsx至es5
npm install babel-preset-stage-2 --save-dev //支持es7
npm install babel-loader --save-dev //webpack的babel加载器

配置webpack

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//webpack.config.js
module.exports={
	entry:"./main.js",
	output:{
		path:__dirname,
		filename:"app.js"
	},
	module:{
		loaders:[{
			test:/\.js$/,
			exclude:/node_modules/,
			loader:"babel-loader",
			query:{
				presets:["es2015","stage-2","react"]
			}
		}]
	}
}

现在准备工作做好了，接下来的任务就是用新的方式编写入口文件。（main.js）

ES6-React

加载模块

通过引入react.js和react-dom.js我们可以直接使用React和ReactDOM这两个对象，这是传统的方式

1
2
3
//html中需要先引入react.js和react-dom.js
console.log(React);
console.log(ReactDOM);

现在我们使用es6的方式

1
2
3
4
5
//不需要提前引入任何文件
import React from "react";
import ReactDOM from "react-dom";
console.log(React);
console.log(ReactDOM);

创建组件

使用类来创建组件代替React.createClass

1
2
3
4
import React from "react";
class MyComponent extends React.Component{
//组件内部代码
}

你也可以用另一种方式

1
2
3
4
import React,{Component} from "react";
class MyComponent extends Component{
//组件内部代码
}

State/Props/PropTypes

1
2
3
4
5
6
7
8
9
10
11
12
13
//传统的react
var MyComponent=React.createClass({
  getDefaultProps:function(){
    return {
      name:"SunnyChuan",
      age:22
    };
  },
  propTypes:{
    name:React.PropTypes.string.isRequired,
    age:React.PropTypes.number.isRequired
  }
});

es6允许将props和propTypes当作静态属性在类外初始化

1
2
3
4
5
6
7
8
9
class MyComponent extends React.Component{}
MyComponent.defaultProps={
  name:"SunnyChuan",
  age:22
};
MyComponent.propTypes={
  name:React.PropTypes.string.isRequired,
  age:React.PropTypes.number.isRequired
};

es7支持直接在类中使用变量表达式，这也是我推荐的写法

1
2
3
4
5
6
7
8
9
10
class MyComponent extends React.Component{
  static defaultProps={
    name:"SunnyChuan",
    age:22
  }
  static propTypes={
    name:React.PropTypes.string.isRequired,
    age:React.PropTypes.number.isRequired
  }
}

state和前两个不同，它不是静态的

1
2
3
4
5
6
7
8
9
10
11
12
13
class MyComponent extends React.Component{
  static defaultProps={
    name:"SunnyChuan",
    age:22
  }
  state={
     isMarried:false
  }
  static propTypes={
    name:React.PropTypes.string.isRequired,
    age:React.PropTypes.number.isRequired
  }
}

函数

React.createClass本身接收的是一个对象，对于对象中的方法，es6允许使用key(){}的形式取代key:function(){}

1
2
3
4
5
6
7
8
class MyComponent extends React.Component{
  state={
    count:0
  }
  handleChange(){
    this.setState({count:this.state.count+1});
  }
}

需要注意的是，由于使用class创建组件，react不会再自动帮我们绑定作用域了，我们需要自己手动解决

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class MyComponent extends React.Component{
  state={
    count:0
  }
  handleChange(){
    this.setState({count:this.state.count+1});
  }
  render(){
    return (
      <div>
        <h2>当前计数是：{this.state.count}</h2>
        <button onClick={this.handleChange.bind(this)}>点击</button>
      </div>
    )
  }
}

如果你觉得这种每次都需要绑定的方法太麻烦，也可以在构造函数中去绑定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
class MyComponent extends React.Component{
  constructor(props){
    super(props);
    this.handleChange=this.handleChange.bind(this);
  }
  state={
    count:0
  }
  handleChange(){
    this.setState({count:this.state.count+1});
  }
  render(){
    return (
      <div>
        <h2>当前计数是：{this.state.count}</h2>
        <button onClick={this.handleChange}>点击</button>
      </div>
    )
  }
}

如果你觉得这种方式也麻烦，可以使用es6的箭头函数（自动绑定作用域），但是前提是你的环境要支持es7，因为箭头函数相当于表达式声明函数的简写，只有es7支持在类中这么使用（类中使用表达式state/props/propTypes也只有es7支持）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class MyComponent extends React.Component{
  state={
    count:0
  }
  handleChange=()=>{
    this.setState({count:this.state.count+1});
  }
  render(){
    return (
      <div>
        <h2>当前计数是：{this.state.count}</h2>
        <button onClick={this.handleChange}>点击</button>
      </div>
    )
  }
}

组件生命周期

所有的组件生命周期都可以当作普通函数使用上述三种方式编写，componentWillMount比较特殊，它还可以在构造函数中编写

1
2
3
4
5
6
7
8
9
10
11
class MyComponent extends React.Component{
  componentWillMount(){
    console.log("Hello SunnyChuan");
  }
}
//二者等价
class MyComponent extends React.Component{
  constructor(props){
    console.log("Hello SunnyChuan")
  }
}

扩展操作符

使用react开发最常见的问题就是父组件要传给子组件的属性较多时比较麻烦

1
2
3
4
5
6
7
8
class MyComponent extends React.Component{
//假设MyComponent已经有了name和age属性
  render(){
    return (
      <SubComponent name={this.props.name} age={this.props.age}/>
     )
  }
}

使用扩展操作符可以变得很简单

1
2
3
4
5
6
7
8
class MyComponent extends React.Component{
//假设MyComponent已经有了name和age属性
  render(){
    return (
      <SubComponent {...this.props}/>
     )
  }
}

上述方式是将父组件的所有属性都传递下去，如果这其中有些属性我不需要传递呢？也很简单

1
2
3
4
5
6
7
8
9
class MyComponent extends React.Component{
//假设MyComponent有很多属性，而name属性不需要传递给子组件
  var {name,...MyProps}=this.props;
  render(){
    return (
      <SubComponent {...Myprops}/>
     )
  }
}

上述方法最常用的场景就是父组件的class属性需要被单独提取出来作为某个元素的class，而其他属性需要传递给子组件。

模块化开发组件

说了这么多，个人认为es6+react最吸引人的地方就是模块化开发，将每个小（大）组件当作一个模块

1
2
3
4
5
6
7
8
9
10
11
//father.js
import React from "react";
import ReactDOM from "react-dom";
import {SonComponent} from "son.js";
class FatherComponent extends React.Component{ 
  //省去中间的业务逻辑
  render(){
    return (<SonComponent/>);
  }
}
ReactDOM.render(<FatherComponent/>,document.getElementById("ss"));
1
2
3
4
5
6
7
8
9
//son.js
import React from "react";
class SonComponent extends React.Component{
  //省去中间的业务逻辑
  render(){
    return (<h2>"SunnyChuan"</h2>);
  }
}
export {SonComponent};

如果你把子组件的导出设置为default export，那么在导入时就不必再加{}

1
2
//father.js
import SonComponent from "son.js";
1
2
3
4
//son.js
export default class SonComponent extends React.Component{
  //省去中间的业务逻辑
}

花一点时间学习es6（7）+react的开发方式，你会更加喜欢使用react。

标签
博客 技术博客 javascript react
ESC