react小项目
本章要讲述一个评价栏的制作。
首先先简单写一个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方法将会被调用。
这里面可以将一些事件监听给去除掉。
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小项目的更多相关文章
- 【腾讯Bugly干货分享】React Native项目实战总结
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/577e16a7640ad7b4682c64a7 “8小时内拼工作,8小时外拼成长 ...
- 一个 react 小的 demo
一.搭建开发环境: webpack构建工具. 新建一个文件夹(login),进入根目录, 1.输入命令:cnpm init,生成了一个package.json文件,这是一个标准的npm说明文件,里面蕴 ...
- React Native 项目整合 CodePush 全然指南
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/y4x5M0nivSrJaY3X92c/article/details/81976844 作者 | 钱 ...
- Expo大作战(三)--针对已经开发过react native项目开发人员有针对性的介绍了expo，expo的局限性，开发时项目选型注意点等
简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...
- Immutable.js 以及在 react+redux 项目中的实践
来自一位美团大牛的分享,相信可以帮助到你. 原文链接:https://juejin.im/post/5948985ea0bb9f006bed7472?utm_source=tuicool&ut ...
- 技术实践丨React Native 项目 Web 端同构
摘要:尽管 React Native 已经进入开源的第 6 个年头,距离发布 1.0 版本依旧是遥遥无期."Learn once, write anywhere",完全不影响 Re ...
- 用struts2标签如何从数据库获取数据并在查询页面显示。最近做一个小项目，需要用到struts2标签从数据库查询数据，并且用迭代器iterator标签在查询页面显示，可是一开始，怎么也获取不到数据，想了许久，最后发现，是自己少定义了一个变量，也就是var变量。
最近做一个小项目,需要用到struts2标签从数据库查询数据,并且用迭代器iterator标签在查询页面显示,可是一开始,怎么也获取不到数据,想了许久,最后发现,是自己少定义了一个变量,也就是var变 ...
- IOS－小项目（饿了么 网络部分 简单实现）
在介绍小项目之前,在此说明一下此代码并非本人所写,我只是随笔的整理者. 在介绍之前先展现一下效果图. 看过效果图大家应该很熟悉了,就是饿了么的一个界面而已,值得注意的是,实现时并没有采用本地连接,而是 ...
- Andriod小项目——在线音乐播放器
转载自: http://blog.csdn.net/sunkes/article/details/51189189 Andriod小项目——在线音乐播放器 Android在线音乐播放器 从大一开始就已 ...
随机推荐
- [LeetCode] 644. Maximum Average Subarray II 子数组的最大平均值之二
Given an array consisting of n integers, find the contiguous subarray whose length is greater than o ...
- java web开发入门十（idea创建maven SSM项目）基于intellig idea
一.搭建项目骨架 二.配置pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xm ...
- 【操作系统之十三】Netfilter与iptables
一.Netfilter Netfilter是由Rusty Russell提出的Linux 2.4内核防火墙框架,该框架既简洁又灵活,可实现安全策略应用中的许多功能,如数据包过滤.数据包处理.地址伪装. ...
- mysql的varchar和oracle的varchar2、nvarchar2
mysql的varchar长度表示字符长度,一个汉字和一个英文字母的长度都是1 实例:下面name字段定义为varchar(10),可存10个汉字和10个字母 oracle的varchar2长度表示的 ...
- 关于DataTable内部索引已损坏的问题 System.Data.RBTree
1.错误提示: 最近,Winform程序在极其偶然的情况下会遇到如下错误提示 Framework 版本: v4.0.30319 说明: 由于未经处理的异常,进程终止. 异常信息: System.Inv ...
- hdu6546 Function
Function \(\text{Alice}\) 有 \(n\) 个二次函数 \(F_i(x)=a_ix^2+b_ix+c_i(i \in [1,n])\). 现在他想在 \(\sum_{i=1}^ ...
- linux centos7下源码 tar安装mysql5.7.22或mysql5.7.20 图文详解
之前用的rpm安装的每次安装都是最新的,,,导致每次版本不统一... 现在用tar包安装5.7.22和5.7.20一样的 5.7.20之后的和之前的版本还是有点不一样的 官网地址 https:// ...
- 汉字转拼音,TinyPinyin、Pinyin4j与JPinyin哪个库更快
1. 介绍 本文对TinyPinyin.Pinyin4j与JPinyin三个汉字转拼音库的用法.测试代码及转换的结果做一个简单的总结. TinyPinyin 适用于Java和Android的快速.低内 ...
- Sitecore性化 - 您需要了解的4件事
Sitecore非常强大,是一个数字体验平台.它可以帮助您取悦并留住客户.它可以帮助您衡量和评估广告系列.它使你成为一个更好的营销人员.它可以帮助您获得结果! 它结合了易于使用的网站内容管理系统和数字 ...
- Kafka学习笔记之K8S内filebeat传输到kafka报错带解决方案
0x00 概述 filebeat非常轻量级,正常情况下占用的资源几乎都能忽略不计,但是部署后发现资源占用很大,所以怀疑是filebeat本身出了问题. 第一时间查看filebeat日志(默认路径/va ...