你的位置:首页 > Java教程

[Java教程]从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会让你更加容易)