摘要：初始数据落叶丶啦啦啦初始化账号用户名需要用一个标签来包裹落叶丶的小站和把组件看成是一个状态机。通过与用户的交互，实现不同状态，然后渲染，让用户界面和数据保持一致。函数中的点击事件和普通的差不多，但是要注意中的要大写，否则会报错。

学习React不是一蹴而就的事情，入门似乎也没那么简单。但我觉得这一切都是值得的。
这是我在学习React中的一些心得，希望能够帮助到大家！

React可以使用两种样式，一种是普通的css，一种是在React中定义的样式。
普通的css样式，通过className=""来引用

账号:
React中定义的样式，通过style={}来引用
//React的css样式
    var style_1={
        color:"#9900ff",
        padding:3,
    }

组件

构建组件（名字随意起，首字母要大写），我这里构建了一个叫Board的组件，然后通过getInitialState进行初始化。通过ReactDOM.render加载到html页面中。如果ReactDOM.render中有多个组件或者标签，则需要用一个div标签来包裹。

var Board = React.createClass({
        //初始数据
        getInitialState: function(){
            return ({
                comments: [{account:"123456",name:"落叶丶Fly"},{account:"111111",name:"啦啦啦"}]
            });
         
       },
//初始化
        eachComment: function(text,i){
            return (
                
                    


                    账号:
                    {text.account}
                    


                    用户名:
                    {text.name}
                
            );
        },
ReactDOM.render(
        //需要用一个div标签来包裹
        

            
落叶丶Fly的React小站
            
        
,
        document.getElementById("container")
    );
props和state

state：React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

props：state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。

函数

React中的button点击事件和普通的JavaScript差不多，但是要注意onClick中的C要大写，否则会报错。本文通过按钮点击来更改editing的布尔值，用setState函数进行更新，从而在普通模式与编辑模式中切换。

编辑
        //编辑
        edit: function(){
            this.setState({editing: true});
        },
        //保存
        save: function(){
            var val = this.refs.new_account.value;
            var val1 = this.refs.new_name.value;
            console.log("拿到的值是: " + val+val1);
            this.props.updateCommentText(val,val1,this.props.index)
            this.setState({editing: false});
        },
        //普通模式
        renderNormal:function(){
            return (
                

                    
{this.props.children}
                    编辑
                    移除
                
            );
        },
        //编辑模式
        renderForm:function(){
            let children = this.props.children
            return (
                

                    
                    

                    
                    

                    保存
                
            )
        },
        //模式更改
        render: function (){
            //console.log(this.props)
            if(this.state.editing){
                return this.renderForm();
            }else{
                return this.renderNormal();
            }
        }
全部代码