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

首先先简单写一个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 、CopyScroll 等

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

 

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] 919. Complete Binary Tree Inserter 完全二叉树插入器

    A complete binary tree is a binary tree in which every level, except possibly the last, is completel ...

  2. [LeetCode] 879. Profitable Schemes 盈利方案

    There are G people in a gang, and a list of various crimes they could commit. The i-th crime generat ...

  3. MySQL-InnoDB-MVCC多版本并发控制

    一.MySQL可重复读级别下,因为MVCC引起的BUG,下图1为相应的Java代码,其中事务1的生命周期最长,循环开启的事务2.3.4...与事务1并行 ,数据的读取只会成功一次,后面的读不到新增数据 ...

  4. Python Web编程

    1.统一资源定位符(URL) URL用来在Web上定位一个文档.浏览器只是Web客户端的一种,任何一个向服务器端发送请求来获取数据的应用程序都被认为是客户端 URL格式:port_sch://net_ ...

  5. (十六)golang--匿名函数

    Go支持匿名函数,如果我们某个函数只是使用一次,可以考虑使用匿名函数,匿名函数也可以实现多次调用: 匿名函数的使用方式:(1)在定义匿名函数的时候就直接调用,这种方式匿名函数只调用一次: (2)将匿名 ...

  6. Python2.x升级python3.x【升级步骤和错误总结】

    网上帖子一大堆,按照那些教程操作,确实可以成功安装.但是安装成功之后呢,pip还是用的python2的pip. 切换到python3的pip之后,发现无法下载模块,还会有很多报错信息.以及" ...

  7. Java中json使用与问题汇总

    一.JSON 解析类库 FastJson: 阿里巴巴开发的 JSON 库,性能十分优秀. 在maven项目的pom文件中以下依赖 <dependency> <groupId>c ...

  8. ECS -------------- 更换系统

    由于是在云服务器上所以更换系统比较简单 1.首先将你运行的实例停止 点击确定 2. 将停止的系统进行更换 确定 点击批量更改 更换需要的系统 点击确定 更换系统输入手机验证码. 更换好了 3.修改远程 ...

  9. Hash冲突的解决--暴雪的Hash算法

    Hash冲突的解决--暴雪的Hash算法https://usench.iteye.com/blog/2199399https://www.bbsmax.com/A/kPzOO7a8zx/

  10. scala中的Option

    Scala中Option是用来表示一个可选类型 什么是可选? --> 主要是指 有值(Some) 和 无值(None)-->Some和None是Option的子类 val myMap:Ma ...