React-学习总结
概念知识：
1.JSX是什么
JSX其实是JavaScript的扩展，React为了代码的可读性更方便地创建虚拟DOM等原因，加入了一些类似XML的语法的扩展。 2.编译器——jsxTransformer
JSX代码并不能直接运行，需要将它编译成正常的JavaScript表达式才能运行，jsxTransformer.js就是这一编译器的角色。
3.第二代编译器——babel
React官方博客发布了一篇文章，声明其自身用于JSX语法解析的编译器JSTransform已经过期，不再维护，React JS和React Native已经全部采用第三方Babel的JSX编译器实现。原因是两者在功能上已经完全重复，而Babel作为专门的JavaScript语法编译工具，提供了更为强大的功能。而browser.js是babel编译器的浏览器版本。 在react 0.14前，浏览器端实现对jsx的编译依赖jsxtransformer.js
在react 0.14后，这个依赖的库改为browser.js
页面script标签的type也由text/jsx改为text/babel
1. 组件名称开头必须大写
var NewList = React.createClass(){}
2.ReactDOM.render是React最基本的方法，用于将模板转化为HTML语言 并插入制定DOM节点
3.事件都使用骆驼命名法：onClick onChange等
4、this.props.children 表示组件的所有子节点
var NotesList = React.createClass({
render: function() {
return (
<ol>
{
// props获取父组件的数据
// this.props.children.map(function(child){})
// var rows = this.props.children;React.Children.map(rows,function(child){})
React.Children.map(this.props.children, function (child) { // React 提供一个工具方法 React.Children 来处理 this.props.children
return <li>{child}</li>;
})
}
</ol>
);
}
});
ReactDOM.render(
<NotesList>
<span>hello</span>
<span>world</span>
</NotesList>,
document.body
);
上面代码的 NoteList 组件有两个 span 子节点，它们都可以通过 this.props.children 读取
5.获取子元素的长度:render:function(){return(<p>count子元素长度：{React.Children.count(this.props.children)}</p>)}
6.获取DOM节点-ref属性
<input type="text" ref="txtData">
获取文本框的值
var inputDom = this.refs.txtData; // 不需要使用findDOMNode()方法
var data = inputDom.value;
7.React提倡所有的数据都是由父组件来管理，通过props的形式传递给子组件来处理 this.props
React开发的规范，组件内部的数据由state控制，外部对内部传递数据时使用 props
8.在组建中添加多个属性写法：
var Info = React.createClass({
render:function(){
var myAttr = {
'ref ': 'txtData',
'data-id': 'inputID',
'onClick': function () {
console.log("onClick");
}
}
return <input type="button" {...myAttr} value={this.props.name} /> // {...myAttr}绑定多个属性
}
})
ReactDOM.render(<Info name="I AM A BUTTON" />,document.getElementById('box'));
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>todolist</title>
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
<style>
ul{margin:;padding:;}
ul li{list-style: none;}
.ul-box{margin-top:20px;}
.ul-box li{margin-top:10px;}
button{margin-left:10px;background: #f1f1f1;border:1px solid #e2e2e2;padding:6px 10px;}
.input-txt{height: 27px;line-height: 27px;border:1px solid #e2e2e2;}
</style>
</head>
<div id="container"></div>
<!-- <script type="text/babel"></script>webstorm暂时不支持这一种 -->
<script type="text/jsx">
// 增删改Demo
// this.props.todo.map 循环
var TodoList = React.createClass({
// 初始化数据
getInitialState:function(){
return{
todoList:[]
}
},
// 更新数据
changeHandle:function(rows){
this.setState({
todoList : rows
})
}, render:function(){
return(
<div>
<NewList onAdd={this.changeHandle} todo={this.state.todoList}/>
<ShowList onDel={this.changeHandle} todo={this.state.todoList} onSave={this.changeHandle}/> </div>
)
}
}); // 新增
var NewList = React.createClass({
addHandle:function(e){
e.preventDefault();
// 从父组件获取数据 使用props
var rows = this.props.todo;
// 获取文本框的值
var inputNew = this.refs.txtNewDate;
var newData = inputNew.value.trim();
if(newData != ""){
// 追加到原来的数据中
rows.push(newData);
this.props.onAdd(rows);
}
inputNew.value = "";
},
render:function(){
return(
<form onSubmit={this.addHandle}>
<input className="input-txt" type="text" placeholder="新增内容" ref="txtNewDate" id="txtNewDate"/>
<button onClick={this.addHandle}>新增</button>
</form>
)
}
})
// 展示+修改+删除
var ShowList = React.createClass({
delHandle:function(e){
// 获取要删除的索引
var delIndex = e.target.getAttribute("data-key");
this.props.todo.splice(delIndex,);
this.props.onDel(this.props.todo);
},
editHandle:function(e){
// 将原本的值赋值到文本框
// 将按钮文字改为保存
var inputNew = document.getElementById("txtNewDate");
//console.log(e.target.innerHTML)
inputNew.value = e.target.getAttribute("data-item");
},
saveHandle:function(e){
var saveIndex = e.target.getAttribute("data-key");
var rows = this.props.todo; React.Children.map(rows,function(item,i){
if(i == saveIndex){
// 保存时存在相同id则删除原来的
rows.splice(saveIndex,);
}
})
var inputNew = document.getElementById("txtNewDate");
var saveData = inputNew.value.trim();
rows.push(saveData);
this.props.onSave(rows);// 更新render
},
render:function(){
var children = this.props.todo;
var childArray = React.Children.toArray(children); return(
<div>
<h3>toArray数组排序：{childArray.sort().join(' ')}</h3>
<p>count长度：{React.Children.count(this.props.todo)}</p>
<ul className="ul-box">
{
// 循环li
// 方法一：this.props.todo.map(function(item,i){})
React.Children.map(children,function(item,i){
var id = "itemList";
return(
<li>
<label data-id={id-i}>{item}</label>
<button data-key={i} onClick={this.delHandle}>删除</button>
<button data-key={i} data-item={item} onClick={this.editHandle}>修改</button>
<button data-key={i} onClick={this.saveHandle}>保存</button>
</li>
)
}.bind(this))
}
</ul>
</div>
) }
})
ReactDOM.render(<TodoList/>,document.getElementById("container"));
</script>
</body>
</html>
学习参考：
http://www.ruanyifeng.com/blog/2015/03/react.html
https://www.cnblogs.com/wangfupeng1988/p/5302738.html
React-学习总结的更多相关文章
- React学习笔记-1-什么是react，react环境搭建以及第一个react实例
什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...
- react学习小结(生命周期- 实例化时期 - 存在期- 销毁时期)
react学习小结 本文是我学习react的阶段性小结,如果看官你是react资深玩家,那么还请就此打住移步他处,如果你想给一些建议和指导,那么还请轻拍~ 目前团队内对react的使用非常普遍,之 ...
- React学习资料
以下是我整理的React学习资料,包括:React基础.Redux.reat-router, redux middleware, higher order components, React验证等, ...
- React学习笔记(一) 基础知识
现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我. React的基 ...
- React学习系列
React学习系列 系列学习react 翻译地址 https://scotch.io/tutorials/learning-react-getting-started-and-concepts 我是初 ...
- react学习笔记1--基础知识
什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...
- react 学习与使用记录
相关技术:webpack+react+react-router+redux+immutable 郭永峰react学习指南 1.git bash--windows命令行工具 --教程 下载地址 2. i ...
- 【JAVASCRIPT】React学习-JSX 语法
摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 JSX 语法 1. 定义 JSX 是javascript + xml 的合集,我们可以将javascript 与 ht ...
- 【JAVASCRIPT】React学习-如何构建一个组件
摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 组件化思想 组件就是 UI + UI 交互逻辑,组件有三个常规map , 分别为state 状态 . props 数据 ...
- 【JAVASCRIPT】React学习- 数据流（组件通信）
摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 一 组件通信如何实现 父子组件之间不存在继承关系 1.1 父=>子通信 父组件可以通过 this.refs.xx ...
随机推荐
- （一）EasyUI 使用——基本概念
1. EasyUI是什么 EasyUI是一种第三方组织开发的一款基于jQuery的,简单易用的,功能强大的WEB[后台前端]JavaScript现成的组件库. 2. JavaScript,AJAX, ...
- css3的Background新属性
前言 CSS3中出现了几种关于背景图片的新属性:background-origin.background-clip.background-position等.之前大致了解了下,但是background ...
- 【MyBatis学习03】原始dao开发方法及其弊端
上一篇博文总结了一下mybatis的入门,接下来就要开发dao方法了,这篇博文主要总结一下mybatis中原始dao开发的方法,最后并总结一下原始dao开发方法的弊端.mybatis中dao开发应该使 ...
- Hive 作业优化
1.Join原则将条目少的表/子查询放在 Join的左边. 原因是在 Join 操作的 Reduce 阶段,位于 Join左边的表的内容会被加载进内存,将条目少的表放在左边,可以有效减少发生内存溢出的 ...
- DNS的概念，用途，DNS查询的实现算法
1.DNS的概念,用途 DNS是由解析器以及域名服务器组成的. 域名服务器是指保存有该网络中所有主机的域名和对应IP地址,并具有将域名转换为IP地址功能的服务器. DNS ...
- js将用户上传gif动图分解成多张帧图片
js将用户上传gif动图分解成多张帧图片 写在前面 工作中遇到一个这么一个需求:这是一个多图上传的场景,如果用户上传选择多张图片,则上传后直接展示多张图片,如果上传的图片是gif动图,则需要分解这张动 ...
- valgrind的编译和使用
ubuntu 平台: valgrind 3.8.1 一. 编译 ./configure --prefix=/home/frank/test/valgrind/PC/local 报错:checking ...
- DataUml Design 介绍8-DataUML 1.2版本正式发布（支持SQLite数据库、NetUML开发框架）
DataUML 1.2版本在软件架构上有了很大的变化,目前DataUML支持Access.SQLite.MY SQL .ORACLE.MS SERVER2000.MS SERVER2005.MS SE ...
- ionic入坑记记录
0.java1.8安装各种环境的配置 1.没有安装过npm 1.1 安装nodejs自带此物. 1.2 不希望npm install -g都在c盘.设置全局路径 path中是X:\某个文件夹\你的文件 ...
- 【ASP.NET】——AdRotator控件
AdRotator控件即广告控件. 广告,是站点不可缺少的一部分.也是站点获取收益的最主要途径,但最初制作广告非常麻烦.asp.net就将该方法封装成了一个控件.为我们节省了非常多时间.这也是ASP. ...