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

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

大家HIGH起来!!!(想了好久,还是没舍得删这句话)

 

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

从0开始学习react(三)

 

2.我们先用原始方法

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

从0开始学习react(三)

 

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

 

从0开始学习react(三)

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

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 = '';
};

写完后应该是这样的:

从0开始学习react(三)

在下面的输入框输入,点击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>标签里注明类型

从0开始学习react(三)

 

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

 

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

从0开始学习react(三)

 

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

从0开始学习react(三)

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

4.React编写详解

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

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

从0开始学习react(三)

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

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

从0开始学习react(三)

其实这里的Listdiv就相当于

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

 

而Editdiv就是

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

 

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

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

从0开始学习react(三)

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

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

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

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

从0开始学习react(三)

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

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

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

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

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

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

  Listdiv:

从0开始学习react(三)

这个组件就简单的多了,创建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} />
            </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会让你更加容易)

  

 

分类:

技术点:

相关文章: