React入门笔记：一个小表格组件的构建过程

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

一直在印象笔记写：

1：组件入门

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

<script src="react.js"></script>

<script src="react-dom.js"></script>

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

ReactDOM.render();//渲染函数

ReactDOM.render(“what”，where);//绑定用id

React.DOM.*({JSON属性}，子节点}//属性省略null， 子节点可以嵌套,组件构造器

<div id="example"></div>

ReactDOM.render(

    React.DOM.h1(null,"你好，React"),

    document.getElementById('example')

);

等同于：<div><h1>你好</h1></div>

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

ReactDOM.render(

    React.DOM.span({style:{color:"red"}},

        React.DOM.em({style:{color:"blue"}}," 我是斜体蓝色span"),"我是正常红色span"),

    document.getElementById('ex1')

    );

等同于：

<div id="ex1">

    <span style="color:"blue">我是斜体蓝色

        <em style="color:"red">我是正常红色</em>

    </span>

</div>

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：默认属性值，只能返回非isRequired的属性值，设置接收属性值的对象：propTypes:{属性名：属性值，React.PropTypes.值类型.是否必须

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

在定义组件对象时，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执行完，同步DO