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 ...
随机推荐
- Intellij IDEA + Tomcat 出现 HTTP status 404错误的解决办法
最近要做POC,接了个老项目改,使用war exploded部署到本机的Tomcat(8.5版) 通过Intellij IDEA启动Tomcat的时候发现系统的登录页面出现HTTP-status-40 ...
- Eclipse 一直Building Workspace 的解决办法
Eclipse 一直不停 building workspace完美解决总结 一.产生这个问题的原因多种 1.自动升级 2.未正确关闭 3.maven下载lib挂起 等.. 二.解决总结 (1).解决 ...
- 一个简单的MariaDB认证插件demo
代码地址如下:http://www.demodashi.com/demo/13076.html 一.前言 众所周知(其实可能很多人不知道)MariaDB支持插件认证.在MariaDB中新建用户,常见的 ...
- linux入门基础——linux网络配置
linux网络配置 以太网连接 在linux中,以太网接口被命名为:eth0.eth1等.0.1代表网卡编号 通过lspci命令能够查看网卡硬件信息(假设是usb网卡,则须要使用lsusb命令) 命令 ...
- struts提交action乱码
没下雪但冷的让人直打哆嗦的天气,冷醉了的教训!! 问题解决步骤: 1.首先确认页面编码是否准确,并且是否与struts编码配置一样,就算是gbk对GBK,最好大小写保持一样 2.尝试先转码一次吧! ...
- tomcat的安装、配置
简单介绍 Tomcat server是一个免费的开放源码的Web 应用server,属于轻量级应用server, 在中小型系统和并发訪问用户不是非常多的场合下被普遍使用,是开发和调试JSP 程序的首选 ...
- Arthas安装问题
1. 下载安装 方式一: 安装Arthas: curl -L https://alibaba.github.io/arthas/install.sh | sh 启动Arthas: ./as.sh 报t ...
- UML序列图
先准备好之前的类图,然后在最开始的地方新添加一个版块“交互设计” Add Diagram --> Sequence Diagram Add --> Actor建立一个user 然后就可以拖 ...
- Unable to use slave's temporary directory /tmp - Can't create/write to file '/tmp/SQL_LOAD-' (Errcode: 17)
这个错误时在Mysql主从配置产生的,最后找到这个Mysql的一个bug http://bugs.mysql.com/bug.php?id=62055 bug的主要原因是:打开文件的函数中指定打开模式 ...
- centos6.5下redis的安装与配置
参照官网描述(https://redis.io/download),linux下redis安装步骤如下: $ wget http://download.redis.io/releases/redis- ...