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

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

index.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Hello React</title>
  5.     <script src="../js/jquery.min.js"></script>
  6.     <script src="../js/JSXTransformer.js"></script>
  7.     <script src="../js/react-0.13.4.min.js"></script>
  8.     <script src="../js/react-dom-0.14.0.js"></script>
  9. </head>
  10. <body>
  11. <div id="content"></div>
  12. <script src="../component/CommentBox.js" type="text/jsx"></script>
  13. </body>
  14. </html>

CommentBox.js

  1. var CommentBox = React.createClass({
  2.     render: function() {
  3.         return (
  4.             <div className="commentBox">
  5.                 Hello, world! I am a CommentBox.
  6.             </div>
  7.         );
  8.     }
  9. });
  10. React.render(
  11.     <CommentBox />,
  12.     document.getElementById('content')
  13. );

此处要注意首先因为

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操作，例如

  1. componentDidMount: function() {
  2.     $.ajax({
  3.       url: this.props.url,
  4.       dataType: 'json',
  5.       success: function(data) {
  6.         this.setState({data: data});
  7.       }.bind(this),   这里要注意必须bind(this)将function里面的this转换成组件中的this对象。
  8.       error: function(xhr, status, err) {
  9.         console.error(this.props.url, status, err.toString());
  10.       }.bind(this)
  11.     });
  12.   },
  • 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）

  1. var NotesList = React.createClass({
  2.   render: function() {
  3.     return (
  4.       <ol>
  5.       {
  6.         React.Children.map(this.props.children, function (child) {
  7.           return <li>{child}</li>;
  8.         })
  9.       }
  10.       </ol>
  11.     );
  12.   }
  13. });
  14.  
  15. ReactDOM.render(
  16.   <NotesList>
  17.     <span>hello</span>
  18.     <span>world</span>
  19.   </NotesList>,
  20.   document.body
  21. );

　　上面代码的 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 属性

  1. var MyComponent = React.createClass({
  2.   handleClick: function() {
  3.     this.refs.myTextInput.focus();
  4.   },
  5.   render: function() {
  6.     return (
  7.       <div>
  8.         <input type="text" ref="myTextInput" />
  9.         <input type="button" value="Focus the text input" onClick={this.handleClick} />
  10.       </div>
  11.     );
  12.   }
  13. });
  14.  
  15. ReactDOM.render(
  16.   <MyComponent />,
  17.   document.getElementById('example')
  18. );

　

上面代码中，组件 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. [LeetCode] 172. Factorial Trailing Zeroes 求阶乘末尾零的个数

    Given an integer n, return the number of trailing zeroes in n!. Example 1: Input: 3 Output: 0 Explan ...

  2. java 多行注释

    public class Sample { public static void main(String[] args) { // java compiler ignores the comment ...

  3. [BZOJ1852] [MexicoOI06]最长不下降序列

    [BZOJ1852] [MexicoOI06]最长不下降序列 额我也不知道是不是水过去的...和网上的另一篇题解对拍过了,但是拍不出来... 经过和神仙的讨论基本可以确定是对的了 考虑如下贪心 (我将 ...

  4. odoo action

    动作的加载: 刷新视图页面执行load_views方法 /web/dataset/call_kw/model_name/load_views 在odoo/models.py的BaseModel中有一个 ...

  5. SQLserver 存储过程游标使用

    ALTER PROCEDURE [dbo].[p_DeleteStretchData] ) , ) AS BEGIN ) ) declare @stretch_cursor cursor -- 声明游 ...

  6. thinkphp的普通查询与表达式查询

    一.普通查询方式 a.字符串:$arr=$m->where("sex=0 and username='gege'")->find();//字符串需要加引号 b.数组 $ ...

  7. apache poi操作office文档----java在线预览txt、word、ppt、execel，pdf代码

    在页面上显示各种文档中的内容.在servlet中的逻辑 word: BufferedInputStream bis = null;  URL url = null;  HttpURLConnectio ...

  8. nginx产生【413 request entity too large】错误的原因与解决方法

    项目上在做上传文件(清单导入)的时候产生了这个错误: 从字面上看,说的是请求的实体太大的问题,那么可以联想到是HTTP请求中的Body大小被限制了的原因. Nginx中的[client_max_bod ...

  9. springboot+RabbitMQ 问题 RabbitListener 动态队列名称：Attribute value must be constant

    因为多机环境fanout广播模式,每台机器需要使用自己的队列接受消息 所以尝试使用以下的方案 private static final String QUEUE_NAME="foo.&quo ...

  10. 一个简单 System.Threading.Tasks.Dataflow.TransformBlock 示例

    直接贴代码了: using System; using System.Collections.Generic; using System.IO; using System.Threading.Task ...