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] 674. Longest Continuous Increasing Subsequence 最长连续递增序列
Given an unsorted array of integers, find the length of longest continuous increasing subsequence. E ...
- VS2017 高级使用方法
如何离线安装,创建脱机安装 - Visual Studio | Microsoft Docs 如离线下载C++桌面开发(VS中英版本) E:\0User_File\Downloads>vs_co ...
- 部署WP程序到自己的手机
参考的地址 http://www.cnblogs.com/zigzagPath/p/3313831.html
- swagger Unable to render this definition
Unable to render this definition The provided definition does not specify a valid version field. Ple ...
- [MSSQL]找出一天数据中从第一条数据开始每累加1小时的数据
用Sql Server找出一天数据中从第一条数据开始每累加1小时的数据 -- ============================================= -- Author: Alle ...
- SpringCloud Feign 参数问题
今天遇到使用Feign调用微服务,传递参数时遇到几个问题 1.无参数 以GET方式请求 服务提供者 @RequestMapping("/hello") public String ...
- vscode java
https://devblogs.microsoft.com/visualstudio/announcing-visual-studio-code-java-installer/ public cla ...
- HTTP之URL的组成部分
HTTP——URL的组成部分 #################文章全部摘自<HTTP权威指南>########################### 主要是为记录自己学习HTTP的过程! ...
- github 白嫖记(一)
位运算 按位操作符:0或者1之间的运算 a|b 或 任意一个为1结果为1 console.log(0 | 1) //1 console.log(1 | 0) //1 console.log(1 | 1 ...
- spring的15个经典面试题
总结Spring框架的15个经典面试题. 什么是Spring框架? Spring是一种轻量级框架,旨在提高开发人员的开发效率以及系统的可维护性. 我们一般说的Spring框架就是Spring Fram ...