本章要讲述一个评价栏的制作。

首先先简单写一个ract组件来试试。

index.html

<!DOCTYPE html>

<html>

<head>

    <title>Hello React</title>

    <script src="../js/jquery.min.js"></script>

    <script src="../js/JSXTransformer.js"></script>

    <script src="../js/react-0.13.4.min.js"></script>

    <script src="../js/react-dom-0.14.0.js"></script>

</head>

<body>

<div id="content"></div>

<script src="../component/CommentBox.js" type="text/jsx"></script>

</body>

</html>

CommentBox.js

var CommentBox = React.createClass({

    render: function() {

        return (

            <div className="commentBox">

                Hello, world! I am a CommentBox.

            </div>

        );

    }

});

React.render(

    <CommentBox />,

    document.getElementById('content')

);

此处要注意首先因为

1.CommentBox.js中获取了content所已在index文件中引入CommentBox.js文件要放在content后面。

2.reactDOM.render()也可以，但是要引入相应的react-dom.js文件，其次版本号要在13以后

3.comment.js文件的type='text/jsx'如果引入了babel文件，也可以写text/babel.  babel.js和JSXTransformer.js可以互换的，对应的type也要改成jsx或者babel。

注意的知识点汇总：

React.render和ReactDOM.render的区别。

props的用法：是由父元素传进来的，在本身的组件内不能修改。getDefaultProps初始化时执行一次，后面不在执行。

state的用法：是组件的私用属性，可以在组件中修改,this.setState({});getInitialState()这个只是初始化的时候执行一次，后面就不执行了。

React将组件的生命周期大概分为三个阶段：创建时，存在期及销毁时。每个阶段都对应着特定的钩子函数做出响应，接下来详细看一下这三个阶段

创建时

一个实例初始化时调用的方法与其他各个后续实例创建时调用的方法略有不同。当我们首次初始化一个组件类的时候，会依次调用如下方法：

  • getDefaultProps
  • getInitialState
  • componentWillMount
  • render
  • componentDidMount

对于该组件类的所有后续应用，对比组件初始化过程，除了getDefaultProps方法，其他方法均会被调用：(即getDefaultPropszh这个方法只会在创建第一次实例时执行一次，后续实例的初始化结果跟第一次的一样。)

上面讲述了依次执行，即componentWillMount是在组件渲染成正真的DOM之前执行，componentDidMount是在组件成功渲染后开始执行的

我们一般会在componentDidMount方法中执行一些ajax操作，例如

componentDidMount: function() {

    $.ajax({

      url: this.props.url,

      dataType: 'json',

      success: function(data) {

        this.setState({data: data});

      }.bind(this),   这里要注意必须bind(this)将function里面的this转换成组件中的this对象。

      error: function(xhr, status, err) {

        console.error(this.props.url, status, err.toString());

      }.bind(this)

    });

  },
  • getInitialState
  • componentWillMount
  • render
  • componentDidMount

存在期

初始化之后的组件会随着应用状态的改变，逐渐受到影响，会有如下方法依次执行：

  • componentWillReceiveProps
  • shouldComponentUpdate
  • componentWillUpdate
  • render
  • componentDidUpdate

销毁时

最后，该组件使用完成后，componentWillUnmount方法将会被调用。

这里面可以将一些事件监听给去除掉。

更多详信息可以参考链接http://www.jianshu.com/p/9bf6d723cfbe
 

this.props.children

this.props 对象的属性与组件的属性一一对应，但是有一个例外，就是 this.props.children 属性。它表示组件的所有子节点（查看 demo05）

var NotesList = React.createClass({

  render: function() {

    return (

      <ol>

      {

        React.Children.map(this.props.children, function (child) {

          return <li>{child}</li>;

        })

      }

      </ol>

    );

  }

});

ReactDOM.render(

  <NotesList>

    <span>hello</span>

    <span>world</span>

  </NotesList>,

  document.body

);

　　上面代码的 NoteList 组件有两个 span 子节点，它们都可以通过 this.props.children 读取，运行结果如下。

这里需要注意， this.props.children 的值有三种可能：如果当前组件没有子节点，它就是 undefined ;如果有一个子节点，数据类型是 object ；如果有多个子节点，数据类型就是 array 。所以，处理 this.props.children 的时候要小心。

React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.map 来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 还是 object。

React.Children.map(this.props.chiildren,function(item.index){});

获取真实的DOM节点

组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。

但是，有时需要从组件获取真实 DOM 的节点，这时就要用到 ref 属性

var MyComponent = React.createClass({

  handleClick: function() {

    this.refs.myTextInput.focus();

  },

  render: function() {

    return (

      <div>

        <input type="text" ref="myTextInput" />

        <input type="button" value="Focus the text input" onClick={this.handleClick} />

      </div>

    );

  }

});

ReactDOM.render(

  <MyComponent />,

  document.getElementById('example')

);

　

上面代码中，组件 MyComponent 的子节点有一个文本输入框，用于获取用户的输入。这时就必须获取真实的 DOM 节点，虚拟 DOM 是拿不到用户输入的。为了做到这一点，文本输入框必须有一个 ref 属性，然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。

需要注意的是，由于 this.refs.[refName] 属性获取的是真实 DOM ，所以必须等到虚拟 DOM 插入文档以后，才能使用这个属性，否则会报错。上面代码中，通过为组件指定 Click 事件的回调函数，确保了只有等到真实 DOM 发生 Click 事件之后，才会读取 this.refs.[refName] 属性。

React 组件支持很多事件，除了 Click 事件以外，还有 KeyDown 、Copy、Scroll 等

回调函数：如何从子元素中传递信息到父元素中，方法是在父元素上绑定一个方法，传递到子元素中，然后子元素在特定的情况下调用它(此时可以传入一些参数作为函数的形参)，触发函数执行，这时就会回调父元素中的那个方法(此时就可以调用子元素传过来的形参了)。

　

react小项目的更多相关文章

  1. 【腾讯Bugly干货分享】React Native项目实战总结

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/577e16a7640ad7b4682c64a7 “8小时内拼工作,8小时外拼成长 ...

  2. 一个 react 小的 demo

    一.搭建开发环境: webpack构建工具. 新建一个文件夹(login),进入根目录, 1.输入命令:cnpm init,生成了一个package.json文件,这是一个标准的npm说明文件,里面蕴 ...

  3. React Native 项目整合 CodePush 全然指南

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/y4x5M0nivSrJaY3X92c/article/details/81976844 作者 | 钱 ...

  4. Expo大作战(三)--针对已经开发过react native项目开发人员有针对性的介绍了expo，expo的局限性，开发时项目选型注意点等

    简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...

  5. Immutable.js 以及在 react+redux 项目中的实践

    来自一位美团大牛的分享,相信可以帮助到你. 原文链接:https://juejin.im/post/5948985ea0bb9f006bed7472?utm_source=tuicool&ut ...

  6. 技术实践丨React Native 项目 Web 端同构

    摘要:尽管 React Native 已经进入开源的第 6 个年头,距离发布 1.0 版本依旧是遥遥无期."Learn once, write anywhere",完全不影响 Re ...

  7. 用struts2标签如何从数据库获取数据并在查询页面显示。最近做一个小项目，需要用到struts2标签从数据库查询数据，并且用迭代器iterator标签在查询页面显示，可是一开始，怎么也获取不到数据，想了许久，最后发现，是自己少定义了一个变量，也就是var变量。

    最近做一个小项目,需要用到struts2标签从数据库查询数据,并且用迭代器iterator标签在查询页面显示,可是一开始,怎么也获取不到数据,想了许久,最后发现,是自己少定义了一个变量,也就是var变 ...

  8. IOS－小项目（饿了么 网络部分 简单实现）

    在介绍小项目之前,在此说明一下此代码并非本人所写,我只是随笔的整理者. 在介绍之前先展现一下效果图. 看过效果图大家应该很熟悉了,就是饿了么的一个界面而已,值得注意的是,实现时并没有采用本地连接,而是 ...

  9. Andriod小项目——在线音乐播放器

    转载自: http://blog.csdn.net/sunkes/article/details/51189189 Andriod小项目——在线音乐播放器 Android在线音乐播放器 从大一开始就已 ...

随机推荐

  1. 第02组 Beta冲刺（1/4）

    队名:十一个憨批 组长博客 作业博客 组长黄智 过去两天完成的任务:了解整个游戏的流程 GitHub签入记录 接下来的计划:继续完成游戏 还剩下哪些任务:完成游戏 燃尽图 遇到的困难:没有美术比较好的 ...

  2. 【洛谷】P4594 [COCI2011-2012#5] BLOKOVI

    本来已经有一个专门记录洛谷题目的博客了,但这个题之毒瘤...... 为你专门写一篇总行了吧...... 传送门 先说一句,这个题每次摆放都靠到最右边不一定是最优的 因为它可以这个亚子 就是说上面那个块 ...

  3. JVM系列之六：内存溢出、内存泄漏 和 栈溢出

    1. OOM && SOF OutOfMemoryError异常: 除了程序计数器外,虚拟机内存的其他几个运行时区域都有发生OutOfMemoryError(OOM)异常的可能, 内存 ...

  4. [报名中] 腾讯技术专家为你揭秘"音视频及融合通信技术"

    | 导语 6月29日,北京东直门亚朵S酒店,云+社区邀您参加<音视频及融合通信技术>沙龙活动,深度探讨音视频及融合通信技术的发展及实践,领略前沿,共创价值. 数字多媒体技术的不断发展对音视 ...

  5. CentOS7 Hive 安装

    hive的安装模式有2种,一种是使用自带的derby数据库,另一种是使用mysql作为元数据库.derby方式一般没人用,因为它是单用户模式.这里主要讲解mysql方式. hive仅仅是一个客户端工具 ...

  6. C#：ref关键字和out关键字的区别

    1.在不使用关键字(比如ref关键字.out关键字等)修饰函数的情况下,大部分函数的参数是以值传递的方式,也就是说,“调用函数”在使用参数(比如myNumber)时,是把该参数复制多一份,然后将其传递 ...

  7. windows系统mysql-5.7官方绿色版zip包安装教程

    准备 下载页面:https://dev.mysql.com/downloads/mysql/ 点击 Download 按钮下载zip包到本地,解压(以我本地的解压路径是 D:\db\mysql-5.7 ...

  8. window下使用curl操作elasticsearch

    1.下载curlzip,https://curl.haxx.se/download.html; 2.解压,在bin文件夹中找到curl.exe,右键“以管理员身份运行”,cmd e: 换盘符:出现E: ...

  9. 输入www.baidu.com会发生什么

    1. 浏览器接收域名 2. 发送域名给DNS,请求解析出www.baidu.com的IP地址 中文名字是域名系统服务器,一般位于ISP(互联网服务提供商,比如我们熟知的联通.移动.电信等) 中.浏览器 ...

  10. Sqlserver MERGE 的基础用法

    版权声明:本文为CSDN博主「暮雪寒寒」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明.原文链接:https://blog.csdn.net/qq_2762801 ...