从0开始学习react（三）

这次我们来讲解第三节知识，考虑了下，先不去讲什么理论了，毕竟网上一搜一大堆，而且理论真心看不太懂啊！！！

今天我们就直接上实例喽！

大家HIGH起来！！！（想了好久，还是没舍得删这句话）

1.根据下图配置自己的文件

2.我们先用原始方法

额，忘记告诉大家做什么项目了，那就在这补上吧，咱们先做一个小Demo，既然react是FB的，那我们就做个评论框好了。

搭建一个跟这个页面一样的模型，当然你要做的更好看，就按你的来吧！

我们考虑一下，要是按照原始的方法来怎么写？

var container = document.querySelector(".container");
        var mytext =  document.querySelector("textarea");
        var btn = document.querySelector(".btn");
        var Thtml;
        btn.onclick = function(){
         Thtml = mytext.value;
           var newNode = document.createElement("p");
           newNode.innerHTML = Thtml;
           container.appendChild(newNode);
           mytext.value = '';
        };

写完后应该是这样的：

在下面的输入框输入，点击POST，则上面的div中就添加一条（至于样式就不要纠结了哈）

3.React方法

我们使用react来达到同样的效果。

var TweetBox = React.createClass({
        render: function() {
            return (
                <div className="main">
                    <div className="container"></div>
                    <div>
                        <textarea></textarea>
                        <input type="button" className="btn" value="Post"/>
　　　　　　　　　　  </div>

                </div>
            );
        }
    });
    React.render(
    <TweetBox />,
    document.body
    );

这里要注意两点：

1. 很多文档都是从内部引用的，这里专门从外部引用，在引用时一定要在<script>标签里注明类型

2.React中元素的class需要写成className

3.请规范你的代码输入（这句话有点装13了），单标记标签后面一定要拿" / "封闭，别怪我没给颜色标注啊！

同样的，我们获得了与用html代码输入一样的内容：

接下来我们来编写功能，这里大家最好先去react官网将所有api看一遍，这样看下面的内容能更快的了解。

4.React编写详解

我个人理解的就是react是将所有大的东西细分成小的组件，然后再拼接起来（六神合体雷神王，呜呜呜呜呜...）

我们来简单分析一下，这个功能大约能分成几部分。

应该是这样三部分是吧...

所以我们在编写时，也应该分为三部分，所以我们的示例代码应该变成这样：

其实这里的Listdiv就相当于

<div class="container"></div>

而Editdiv就是

<div>
    <textarea></textarea>
    <input type="button" class="btn" value="Post">
</div>

同样的他们被class名为main的div包裹。

下面我们就来编写里面的组件，不过在那之前我们先将当前初始状态处理一下：

好的，虽然有注释，但我们还是逐行翻译一下：

getInitialState,用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取，也就是我们例子中的this.state.data（todo），todo是自己命名的一个存储名，大家自己随便取啊（避开关键字）

handleChange（这个名字也是自己随便取的），这个方法是用来跟踪数据的变化，将这个方法绑定到onChange（名字随便取）里

我们开始定义子组件吧：
　　Editdiv：

这里我们看到了主要的方法handleAdd，我们就来分析一下：

preventDefault，阻止元素发生默认的行为

ref，React用来获取dom元素而添加的一个属性，给你需要获取的元素上面添加这个属性，通过ref的值来获取到这个元素，使用this.refs.xxx.getDOMNode方法

这里我们将取到的元素（textarea）的值放入newthing中

rows，获取到输入的值，这里用到了props方法（网上有很多关于props和state方法的用法，大家去看看，这个真的很重要，这里在讲解这个的话篇幅就太长了，需要的话，大家可以留言，我会专门抽出一个专题的）

在下面就是给input中添加onClick（驼峰式写法）方法，触发的函数就是我们刚编写的handleAdd

　　Listdiv：

这个组件就简单的多了，创建class名为container的div，再在里面添加一个遍历map方法，返回一个被P元素包裹的值

OK，这里我们就大功告成了，下面贴下全部代码：

var TweetBox = React.createClass({
    // 初始化数据，data的数据由state来控制
    getInitialState: function() {
        return {
            data: []
        };
    },
    // 接收一个传入的数据，并将它实时更新到组件的 state 中，以便组件根据数据重新render
    // 只要改变了 state ，react自动执行 render 计算
    handleChange: function (rows) {
        this.setState({
            data: rows
        });
    },
    render: function() {
        return (
            <div className="main">
                {
                    /*展示框*/
                }
                <Listdiv todo={this.state.data}/>
                {
                    /*输入框与提交按钮*/
                }

                <Editdiv onAdd={this.handleChange} todo={this.state.data}/>
            </div>
        );
    }
});
// 输入框与提交按钮
var Editdiv = React.createClass({
    handleAdd: function (e) {
        e.preventDefault();
        // 通过 refs 获取dom元素，然后获取输入的内容
        var inputDom = this.refs.inputnew.getDOMNode();
        var newthing = inputDom.value.trim();
        // 获取传入的TweetBox数据
        var rows = this.props.todo;
        if (newthing !== '') {
            // 更新数据，并使用 onAdd 更新到 TweetBox 组件的 state 中
            rows.push(newthing);
            this.props.onAdd(rows);
        }
        inputDom.value = '';
    },
    render: function(){
        return (
            <div>
                <textarea ref="inputnew"></textarea>
                <input type="button" className="btn" onClick={this.handleAdd} id="todo-new" value="Post"/>
            </div>
        )
    }
});
// Listdiv 组件用于展示列表
var Listdiv = React.createClass({
    render: function(){
        return (
            <div className="container">
            {
                this.props.todo.map(function (item) {
                    return (
                        <p>{item}</p>
                    );
                })
            }
            </div>
        )
    }
});
React.render(
    <TweetBox />,
    document.body
);

现在真心是越来越难，可能更新就慢了。以前光看别人写的，自己写了才发现整理一篇文章真的不容易啊！！！

结尾名言：我们都会变，样子不变，心也会变，许许多多旧友，早已变得如陌生人一般，皆因他们有不同的角色要扮演，去适应生活与环境所需，不得不变。

参考资料： React官网

　　　　　 React.js的介绍-针对了解jQuery的工程师 （很好的文章，如果你对jquery比较了解，那么从这里去了解react会让你更加容易）