摘要：初始數(shù)據(jù)落葉丶啦啦啦初始化賬號(hào)用戶名需要用一個(gè)標(biāo)簽來(lái)包裹落葉丶的小站和把組件看成是一個(gè)狀態(tài)機(jī)。通過(guò)與用戶的交互，實(shí)現(xiàn)不同狀態(tài)，然后渲染，讓用戶界面和數(shù)據(jù)保持一致。函數(shù)中的點(diǎn)擊事件和普通的差不多，但是要注意中的要大寫，否則會(huì)報(bào)錯(cuò)。

學(xué)習(xí)React不是一蹴而就的事情，入門似乎也沒(méi)那么簡(jiǎn)單。但我覺(jué)得這一切都是值得的。
這是我在學(xué)習(xí)React中的一些心得，希望能夠幫助到大家！

React可以使用兩種樣式，一種是普通的css，一種是在React中定義的樣式。
普通的css樣式，通過(guò)className=""來(lái)引用

賬號(hào):
React中定義的樣式，通過(guò)style={}來(lái)引用
//React的css樣式
    var style_1={
        color:"#9900ff",
        padding:3,
    }

組件

構(gòu)建組件（名字隨意起，首字母要大寫），我這里構(gòu)建了一個(gè)叫Board的組件，然后通過(guò)getInitialState進(jìn)行初始化。通過(guò)ReactDOM.render加載到html頁(yè)面中。如果ReactDOM.render中有多個(gè)組件或者標(biāo)簽，則需要用一個(gè)div標(biāo)簽來(lái)包裹。

var Board = React.createClass({
        //初始數(shù)據(jù)
        getInitialState: function(){
            return ({
                comments: [{account:"123456",name:"落葉丶Fly"},{account:"111111",name:"啦啦啦"}]
            });
         
       },
//初始化
        eachComment: function(text,i){
            return (
                
                    


                    賬號(hào):
                    {text.account}
                    


                    用戶名:
                    {text.name}
                
            );
        },
ReactDOM.render(
        //需要用一個(gè)div標(biāo)簽來(lái)包裹
        

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

state：React 把組件看成是一個(gè)狀態(tài)機(jī)（State Machines）。通過(guò)與用戶的交互，實(shí)現(xiàn)不同狀態(tài)，然后渲染 UI，讓用戶界面和數(shù)據(jù)保持一致。React 里，只需更新組件的 state，然后根據(jù)新的 state 重新渲染用戶界面（不要操作 DOM）。

props：state 和 props 主要的區(qū)別在于 props 是不可變的，而 state 可以根據(jù)與用戶交互來(lái)改變。這就是為什么有些容器組件需要定義 state 來(lái)更新和修改數(shù)據(jù)。 而子組件只能通過(guò) props 來(lái)傳遞數(shù)據(jù)。

函數(shù)

React中的button點(diǎn)擊事件和普通的JavaScript差不多，但是要注意onClick中的C要大寫，否則會(huì)報(bào)錯(cuò)。本文通過(guò)按鈕點(diǎn)擊來(lái)更改editing的布爾值，用setState函數(shù)進(jìn)行更新，從而在普通模式與編輯模式中切換。

編輯
        //編輯
        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();
            }
        }
全部代碼