vue，，react，这三个框架，本来打算学vue。图书馆资料就一本，就转向了React（图书馆突然买了好多。。。），其实还是因为它能够使用开发，现在开发安卓我用的是，想着前端学习，也要加把劲了，迈入更好的路。

一直在印象笔记写：

1：组件入门

TIPS：引入库文件（现在还没到jsx，用了两个，一个核心，一个dom库）

1.1使用预定义组件（这些是预定的组件构造器）

ReactDOM.render();//渲染函数ReactDOM.render(“what”，where);//绑定用idReact.DOM.*({JSON属性}，子节点}//属性省略null， 子节点可以嵌套,组件构造器
ReactDOM.render(React.DOM.h1(null,"你好，React"),document.getElementById('example'));等同于：
你好

1.2:嵌套使用：（说实话，没用JSX时候，复杂的时候，我都写蒙了，找不到括号匹配了。。。）

ReactDOM.render(React.DOM.span({style:{color:"red"}},React.DOM.em({style:{color:"blue"}}," 我是斜体蓝色span"),"我是正常红色span"),document.getElementById('ex1'));等同于：
我是斜体蓝色我是正常红色

1.3.使用自定义组件（这个以后是主要使用的啦）

var myELe = React.createClass({propTypes:{name:React.PropTypes.string.isRequired,title:React.PropTypes.string},getDefaultProps:function(){return {title:"我是默认属性值"}},render:function(){return React.DOM.span(null,"我是自定义组件span"+this.props.title)//调用属性值}});//自定义组件函数React.createClass();//参数，json格式，render渲染函数，返回React组件ReactDOM.render(React.createElement(myEle),document.getElementById('ex3'));//引用工厂模式：var myEle2 = React.createFactory(myEle);ReactDOM.render(myele2(),document.getElementById('ex3'));

tips：默认属性值，只能返回非的属性值，设置接收属性值的对象：:{属性名：属性值，React..值类型.是否必须

创建组件，渲染传入需要接收的属性值，如果非没有传，则使用函数返回的值！

在定义组件对象时，this.props.属性名,可以调用属性

1.4 State状态（对象里面值为函数，称方法）

下面是一个完整的自定义组件与渲染

var myIput = React.createClass({//默认属性json格式proptypes:{text:React.PropTypes.string},//默认属性设置函数getDefaultProps:function(){return {text:''}},//初始化状态函数，动态设置属性值getInitialState:function(){return {text:this.props.text}},//自定义方法，设置state状态_textChange:function(e){this.setState({text:e.target.value})},//渲染函数，设置监听器，onChange：自定义方法render:function(){return React.DOM.div(null,React.DOM.textarea({defaultValue : this.props.text,onChange : this._textChange}),React.DOM.h3(null,this.state.text.length))}});//自定义组件，一个实时计算输入字符长度的组件调用：var myInput_render = ReactDOM.render(React.createElement(myIput,{text:'default'}),document.getElementById('ex4'));

1.5外部访问组件

myInout_render.setState({text:""});//外部访问组件，并改变state，不推荐！

1.6生命周期方法：使用生命周期给我们后来方面实时修改页面数据

componentWillUpdate()//组件再次渲染调用，如render前调用，组件的props与state发生改变会调用componentDidUpdate()//render执行完毕，更新的组件同步DOM后调用，不会在初始化调用componentWillMount()//新节点插入前调用componentWillDidMount()//新节点插入之后调用componentWillUnmount()//组件从DOM移除调用shouldComponentUpdate(newProps,newState)//在componentWillUpdate之前触发{···_log:function(Mname,args){console.log(Mname,args);},componentWillUpdate:function(){this._log('componentWillUpdate:渲染前调用|props与state改变调用',arguments)},componentDidUpdate:function(){this._log('componentWillDidUpdate:render执行完，同步DOM之后调用',arguments)},shouldComponentUpdate:function(newProps,newState){this._log('shouldComponentUpdate:componentWillUpdate之前触发，返回false能禁止render调用',arguments);return true},componentDidMount:function(){this._log('componentDidMount:新节点插入之后触发',arguments)},componentWillMount:function(){this._log("componentWillMount:新节点插入之前触发",arguments)},componentWillUnmount:function(){this._log('componentWillUpdate:组件从DOM移触发',arguments)}···}

1.6 mixin简化重复的生命周期方法（其实就是一个json格式，简化了写法）

var myMixin_one = {_log:function(Mname,args){console.log(Mname,args);},componentWillUpdate:function(){this._log('componentWillUpdate:渲染前调用|props与state改变调用',arguments)},componentDidUpdate:function(){this._log('componentWillDidUpdate:render执行完，同步DOM之后调用',arguments)},shouldComponentUpdate:function(newProps,newState){this._log('shouldComponentUpdate:componentWillUpdate之前触发，返回false能禁止render调用',arguments);return true},componentDidMount:function(){this._log('componentDidMount:新节点插入之后触发',arguments)},componentWillMount:function(){this._log("componentWillMount:新节点插入之前触发",arguments)},componentWillUnmount:function(){this._log('componentWillUpdate:组件从DOM移触发',arguments)}};var myMixin_two = {proptypes:{text:React.PropTypes.string},getDefaultProps:function(){return {text:''}},getInitialState:function(){return {text:this.props.text}},_textChange:function(e){this.setState({text:e.target.value})},};var myIput = React.createClass({render:function(){return React.DOM.div(null,React.DOM.textarea({defaultValue:this.state.text,onChange:this._textChange}),React.DOM.h3(null,this.state.text.length))},mixins:[myMixin_one,myMixin_two]//用mixin替代周期函数与初始化方法});

1.7子组件：子组件从属于父组件

//定义父组件var parCom = React.createClass({propTypes:{text:React.PropTypes.string},getDefaultProps:function(){return {text:''}},_textChange:function(e){this.setState({text:e.target.value})},getInitialState:function(){return {text:this.props.text}},render:function(){var counter = null;if(this.state.text.length>0){//初始化子组件counter = React.DOM.h3(null,React.createElement(sonCom,{count:this.state.text.length}))//父组件，渲染时候，检测条件，是否渲染子组件//如果父组件的text属性值大于0，渲染子组件}return React.DOM.div(null,React.DOM.textarea({defaultValue:this.state.text,onChange:this._textChange}),counter//引用子组件)}});//定义子组件var sonCom = React.createClass({name:'Counter',propTypes:{count:React.PropTypes.number.isRequired,},render:function(){return React.DOM.span(null,this.props.count);}})//调用ReactDOM.render(React.createElement(parCom,{text:''}),document.getElementById('ex5'))

下面是一个完整的表格React应用demo过程部分代码来自：《React快速上手》

1.8 Excel组件

var Excel = React.createClass({displayName:'Excel',getInitialState:function(){return {data:this.props.initialdata}},render:function(){return React.DOM.table({className:"table"+" "+"table-bordered"},//多个类用拼接React.DOM.thead(null,React.DOM.tr(null,this.props.headers.map(function(title,idx){//map()方法，将数组的值传入回调函数// arr.map(function(currentValue，index，arr),thisValue) //参数说明 function(currentValue,index,arr) 必须，函数，数组中的每个元素都会执行这个函数函数参数 函数参数 currentValue 必须 当前元素值 index 可选 当前元素的索引值 arr 可选 当前元素属于的数组对象。return React.DOM.th({key:idx},title);}))),React.DOM.tbody(null,this.state.data.map(function(row,idx){return React.DOM.tr({key:idx},row.map(function(cell,idx){return React.DOM.td({key:idx},cell)}))})));}});var headers = ["book","author","lanage","sales"];var data = [["math","jack","en","23"],["english","alice","23","en"]];ReactDOM.render(React.createElement(Excel,{headers:headers,initialdata:data}),document.getElementById('ex6'));

效果图：

实现排序：arr.sort(回调函数)

_sort:function(e){var column = e.target.cellIndex;//当前选中的列索引var data  = this.state.data.slice();//对数组的复制data.sort(function(a,b){console.log(a[column],b);return a[column]>b[column] ? 1: -1;});console.log(e.target.cellIndex);//更新状态this.setState({data:data})

添加监听器：

React.DOM.thead({onClick:this._sort},

实现编辑：这里用了的框架，很好看啊

getInitialState:function(){return {data:this.props.initialdata,edit:null};},_edit:function(e){this.setState({edit:{row:parseInt(e.target.dataset.row,10),cell:e.target.cellIndex}});},·····React.DOM.tbody({onDoubleClick:this._edit},this.state.data.map(function(row,rowidx){return React.DOM.tr({key:rowidx},row.map(function(cell,idx){var content = cell;var edit = this.state.edit;if(edit && edit.row === rowidx && edit.cell === idx){content = React.DOM.form({onSubmit:this._save},React.DOM.input({type:"text",className:"form-control",defaultValue:content}))}return React.DOM.td({key:idx,"data-row":rowidx},content)},this))},this))

效果图：

实现保存：回车保存

_save:function(e){e.preventDefault();//阻止默认事件，防止重新加载var input = e.target.firstChild;//引用输入框值var data = this.state.data.slice();//复制一份数据修改data[this.state.edit.row][this.state.edit.cell] = input.value;//修改指定行指定cell数据this.setState({data:data,//刷新数据edit:null//去除input})},

效果图：

完整源代码：有注释可以研究一下！

React Excel (单击列标题排序，双击单元格编辑，回车确认)
//定义表格组件var Excel = React.createClass({displayName:'Excel',//内部为React标记此组件名getInitialState:function(){return {data:this.props.initialdata,//初始化数据edit:null//是否开启编辑};},//排序方法_sort:function(e){var column = e.target.cellIndex;//获取列索引var data  = this.state.data.slice();//复制数组//数组排序方法，传入，回调函数（比较两个数据，返回真假）data.sort(function(a,b){console.log(a[column],b);return a[column]>b[column] ? 1: -1;});//每次排序后，刷新状态console.log(e.target.cellIndex);this.setState({data:data})},//编辑方法_edit:function(e){this.setState({edit:{row:parseInt(e.target.dataset.row,10),//强制转整形，通过自定义的dataset-rowcell:e.target.cellIndex//获取row与cell即每个单元格的定位}});},//提交保存_save:function(e){e.preventDefault();//阻止浏览器默认事件var input = e.target.firstChild;//获取输入框值var data = this.state.data.slice();data[this.state.edit.row][this.state.edit.cell] = input.value;//修改指定单元格数据this.setState({data:data,edit:null//去除输入框})},render:function(){return React.DOM.table({className:"table"+" "+"table-bordered"},React.DOM.thead({onClick:this._sort},//添加单击监听器React.DOM.tr(null,this.props.headers.map(function(title,idx){return React.DOM.th({key:idx},title);}))),React.DOM.tbody({//添加双击监听器onDoubleClick:this._edit},this.state.data.map(function(row,rowidx){return React.DOM.tr({key:rowidx},row.map(function(cell,idx){var content = cell;var edit = this.state.edit;//获取edit数据，判断覆盖单元格并生成input的定位if(edit && edit.row === rowidx && edit.cell === idx){content = React.DOM.form({onSubmit:this._save//表单事件},React.DOM.input({type:"text",className:"form-control",style:{maxWidth:"100px"},defaultValue:content}))}return React.DOM.td({key:idx,"data-row":rowidx},content)},this))},this)));}});var headers = ["图书","作者","语言","售价"];var data = [["数学书","李","中文","23元"],["英语书","爱丽丝","英文","26元"],["PHP编程","鲍勃","英文","21元"],["React笔记","bore","中文","26元"]];ReactDOM.render(React.createElement(Excel,{headers:headers,initialdata:data}),document.getElementById('ex6'));

现在用JSX简化表格组件

1.9 JSX实现Excel组件：JSX在学习时候，引入.js来转译jsx到js，实际使用要先转译再使用！

JSX转换插件
React Excel (单击列标题排序，双击单元格编辑，回车确认)

暂时就这样啦。