浅谈ES6 class实现React Class

爱被打了一巴掌 2022-06-17 13:47 209阅读 0赞

使用ES6 class可以以一个JavaScript类来定义React Class。

1、使用React.createClass：

2、使用ES6 class：

class Counter extends React.Component {
    	constructor(props) {
    		super(props);
    		this.state = {count: props.initial};
    	}
    	count() {
    		this.setState({count: this.state.count + 1});
    	}
    	render() {
    		return (
    			<div onClick={this.count.bind(this)}>
    				Click times：{this.state.count}
    			</div>
    		);
    	}
    }
    Counter.propTypes = { 
    	initial: React.PropTypes.number 
    };
    Counter.defaultProps = { 
    	initial: 0 
    };
    ReactDOM.render(
    	<Counter />, 
    	document.getElementById("timeBox")
    );

3、使用ES6 class与React.createClass的不同：

①　React.createClass提供getInitialState 方法，而ES6 class在构造函数里设置初始的state；

②　React.createClass提供getDefaultProps方法和propTypes 属性，而propTypes 和 defaultProps 在ES6 class的构造函数里被定义为属性，而不是在class body里。

③　ES6 class中不会自动绑定this到实例上，必须显示的使用.bind(this) 或使用箭头函数 =>：

正确用法1：

正确用法2：

<div onClick={() => this.count()}>

错误用法：

建议在构造函数中绑定事件处理器，以便对于所有实例只需绑定一次：

constructor(props) {
    	super(props);
    	this.count =this.count.bind(this);
    	this.state = {count: props.initial};
    }

直接使用：

4、无状态函数

1) 可以用JavaScript函数来定义React类，如使用无状态函数语法：

function MyBox(props) {
    	return <div>Hello, {props.name}</div>;
    }
    ReactDOM.render(
    	<MyBox name="react"/>, 
    	document.getElementById("timeBox")
    );

2) 可以使用ES6箭头函数来定义React类：

const MyBox = (props) => <div>Hello {props.name}</div>;
    ReactDOM.render(
    	<MyBox name="react"/>, 
    	document.getElementById("timeBox")
    );

上述两种方法用于纯函数态的组件，必须没有保持任何内部状态，没有备份实例，也没有组件生命周期方法。

大多数组件都应该是无状态函数，如果可能，这将是推荐的模式。

3) 仍然可以以设置函数属性的方式来指定 propTypes 和 defaultProps：

①　用JavaScript函数：

②　使用ES6箭头函数：