REACT框架

最近陆陆续续学习了一段REACT框架，现在感觉收获到了一些东西，在这里分享一下

 

它与传统js的区别就是用到了getInitialState，componentDidMount以及其他的一些函数，把你原先的代码改动一下就可以变为有REACT框架的代码了。

使用 getInitialState 生成 state ，我的理解就是生成你需要的东西，正如我代码中的数组，

组件加载: componentDidMount，用于生成DOM结构

现在还在进一步学习中，等这个工程做完就差不多了……

 

以下代码是写在js中的

 

var CustomerList=React.createClass({
    getInitialState:function(){
       
        return {
            customers:[]
        }
    },
    componentDidMount:function(){
      
        var self=this;
        $.ajax({
            url:"../JSON/Customers.json",
            dataType:"json",
            async:true,
            success:function(data){
                self.setState({
                    customers: data.man
                })
            }
        })
    },
    handleClick:function(data){
        localStorage.setItem('man',data)
        //this.props.history.pushState(null,'/order')
    },
    render: function() {
        console.log(this.state.customers)
        var customers_html= _.map(this.state.customers,function(men){ //生成Dom结构，用的是_,map
                console.log(men)
                return (
                    <li className='apper'>
                        <div className='css_button_style' onClick={this.handleClick.bind(this,men)}>{men}</div>
                    </li>
                )
        },this)
        return (
                        <div>
                            <div className='order'>
                            <li className='apper'>
                            <button className='back'>back</button>选人</li>
                            </div>
                            <div className='distan'>
                            {customers_html}
                            </div>
                       </div>
        )
    }
});
ReactDOM.render(  //获取Dom节点，显示在html中
    <CustomerList/>,
    document.getElementById("example")
);