React无状态组件之改造

之前经常会在一些贴子中看到，React组件是存在有状态组件和无状态组件之分的。那么问题就来了，到底什么是有状态组件？什么又是无状态组件呢？相信前端的小伙伴们可能会很少有人去挖掘这个东西。那么在经过两天的奋战之后，成功的将无状态组件手动改造成有状态组件，实现代码不多，重要的是一个细路和实现问题。

接下来在上代码之前，还是得先描述一下这个有状态组件和无状态组件在书写方式和功能上面到底是什么区别？有状态组件是使用ES6中的class关键字来创建的，而无状态组件则是通过ES5之前的构造函数来实现。前者组件中的状态在更新之后会实时反馈到视图层上，后者则不会；另外，还有更重要的一点是，前者可以使用React中提供所有的生命周期函数，而后者则在生命周期上面显得苍白无力。今天，我们不抬杠更不去追究其实用价值，重点去看这个构造函数是如何一步步变得和class类创造出来的组件同样的势不可挡！

step1：先把需要的脚本给它引入进来。

<script src="https://www.snrthn.com/plugins/react.js"></script>
<script src="https://www.snrthn.com/plugins/react-dom.js"></script>
<script src="https://www.snrthn.com/plugins/prop-types.js"></script>
<script src="https://www.snrthn.com/plugins/babel.js"></script>

step2：下面的代码是写的script标签内的，注意type="text/babel"，否则解析不了。

<script type="text/babel">
function inherit (Target, Origin) {
	var MiddleWare = function () {};
	MiddleWare.prototype = Origin.prototype;
	Target.prototype = new MiddleWare();
	Target.prototype.contructor = Target;
	Target.prototype.stepfather = Origin;
}

function App () {
	React.Component.call(this);
	this.state = {
		label: '状态值',
		state: 0
	}
}

inherit(App, React.Component);

var protoHandle = {
	render () {
		var { label, state } = this.state;
		return (
			<div>
				<h1>Hello React! </h1>
				<h2>我变成了一个有状态组件</h2>
				<hr/>
				<h2>{ label }: { state }</h2>
				<hr/>
				<input type="button" value="改变状态" onClick={ function () { this.changeState() }.bind(this) } />
			</div>
		)
	},
	changeState () {
		this.setState({
			state: this.state.state += 1
		})
	},
	componentDidMount () {
		console.log('生命周期之组件挂载之后');
	},
	componentDidUpdate () {
		console.log('数据已实时更新');
	}
}

Object.assign(App.prototype, protoHandle);

ReactDOM.render(
	<App/>,
	document.getElementById('app')
)
</script>

最后，大概来总结一下。通过以上的改造之后，我们使用构造函数创建的组件，通过修改state的值，也能在视图层上实时反馈出来。另外，就随便测试了两个生命周期函数，也是没有任何问题的。是不是感觉很嗨啊！哈哈