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在线音乐播放器 从大一开始就已 ...
随机推荐
- Linux性能优化实战学习笔记：第二十四讲
一.磁盘 1.机械磁盘 2.固态磁盘 3.相同磁盘随机I/O比连续I/O慢很多 4.最小单位 5.接口 6.RAID陈列卡 7.网路存储 二.通用块层 1.概念 2.第一功能 3.第二功能 4.I/O ...
- [LeetCode] 18. 4Sum 四数之和
Given an array S of n integers, are there elements a, b, c, and d in S such that a + b + c + d = tar ...
- skip connections
deep learning初学者,最近在看一些GAN方面的论文,在生成器中通常会用到skip conections,于是就上网查了一些skip connection的博客,虽然东西都是人家的,但是出于 ...
- 解决Spring Cloud中Feign第一次请求失败的问题
在Spring Cloud中,Feign和Ribbon在整合了Hystrix后,可能会出现首次调用失败的问题 com.netflix.hystrix.exception.HystrixTimeoutE ...
- C#获取屏幕鼠标坐标点颜色
[DllImport("user32.dll")] private static extern IntPtr GetDC(IntPtr hwnd); ...
- Where are registered servers stored?
https://stackoverflow.com/questions/3064289/where-are-registered-servers-stored They are kept as a ...
- PCA：主成分分析
PCA的概念: 主要思想是将n维特征映射到k维上,这k维是全新的正交特征,这k维特征被称为主成分,在原数据的基础上重新构造出来k维.就是从原始的空间顺序的找出一组相互正交的坐标轴,新坐标轴的选择和数据 ...
- 转 Java jar (SpringBoot Jar)转为win可执行的exe程序
原文链接:http://voidm.com/2018/12/29/java-jar-transform-exe/打包Jar工程 将java项目打包成jar工程,可以是文章以SpringBoot为例po ...
- 在ubuntu下安装openjdk
OpenJDK是JDK的开放源码版本,以GPL(General Public License,通用性公开许可证)协议的形式放出.因为授权协议的原因,Sun公司实现的JDK的一部分源码因为产权的问题无法 ...
- Angulaur导入其他位置的样式
建立一个统一样式文件base-xxx.component.css 在需要导入样式的组件中,编辑.ts文件导入样式: 右侧是它的相对路径.