从es6到React入门

React的入门对不同的基础水平来说，难度是不一致的，这里假设的是具有熟练水准的es6.

React组件

React的组件是一项由html、css、事件和处理、初始数据、组件状态等内容组成的一种基本视图视图单元，它具有独立和自由组合、扩展的能力。这种组件的能力将一盘散沙状的前端做了中等程度的组合，平衡了整体管理、自由扩展。

在真正的编写React组件之前，先需要了解一下React组件的生命周期，即组件是经过什么样的解析过程后在浏览器展示组件的。组件的声明周期：1、首先是通过构造函数，获得初始数据、初始状态，以及组件继承关系；2、组件的render阶段，主要是生成 组件的主体html、css，以及事件、处理函数、初始数据、组件状态和嵌套组件的引入；3、将组件render阶段生成的主体结构添加到页面的DOM结构中；4、启动组件的挂载函数，做一些挂载的初始化处理，如定时等；5、通过设置新状态、新数据、强制更新组件等方式，重新来一遍2、3、4的步骤，但是结构不变内容发生变化，这叫做组件更新；6、当组件被document对象舍弃时，触发组件的卸载函数，做数据和状态的清理工作。

示例代码如下所示：

class TianDiZuHe extends React.Component{



/*

1、初始化，只运行一次。

2、props是初始化数据，初始化后想要获取需要保存在组件的state中，如果没有保存，后续无法取用

3、render中函数处理的this其实会发生变化，在组件中时this是指组件对象，在事件处理函数中的this是指当前DOM对象，因此要保证this的指向确定

*/

constructor(props){

super(props);

this.state={

content:props

};

this.handleClick=this.handleClick.bind(this);

console.log(props);

}

/*

这个函数的内容将会在组件挂载到document对象的DOM结构上时调用，

如果不需要在挂载时有前置处理和检查，可以省略掉这个函数

*/

componentDidMount(){

console.log("it is mounted.");

}

/*

这个函数的内容将会在组件从document对象的DOM结构上卸载时调用，

如果不需要在卸载时做关联状态销毁处理，可以省略掉这个函数

*/

componentWillUnmount(){

console.log("it is unmounted.");

this.setState({content:null});

}

/*

组件中相关的事件处理函数，可以处理事件并更新组件状态。因为状态更新是一个非即时的操作，有时间限制的化可以强制更新组件

*/

handleClick(event){

event.preventDefault();

console.log("handle click event");

alert(this.state.content.year);

}

/*

组件的DOM结构，每个组件必须有的

*/

render(){

return <div onClick={this.handleClick}>

<div>年</div>

<div>{this.props.year}</div>

<div>月</div>

<div>{this.props.month}</div>

<div>日</div>

<div>{this.props.day}</div>

<div>时</div>

<div>{this.props.hour}</div>

</div>;

}

}

//将自定义组件初始化到对应的DOM节点下

ReactDOM.render(<TianDiZuHe year="壬寅" month="丁未" day="壬申" hour="戊申"/>,document.getElementById("testarea"));

学会了React组件，基本上入门问题就解决了。React是一个有用的框架，但是不是全能的框架，表单验证部分还是需要引入第三方的验证框架或者自行手动编写。React的表单验证基本上遵循最原始的验证规则，即：单项输入完成后验证单项和关联输入、提交时做整单验证。