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 ...
随机推荐
- flask-Migrate模块
功能 flask-migrate是flask的一个扩展模块,主要是扩展数据库表结构的. 官方文档:http://flask-migrate.readthedocs.io/en/latest/ 安装 p ...
- Python进程、线程、协程之间的关系
一.从操作系统角度 操作系统处理任务, 调度单位是 进程 和 线程 . 1.进程: 表示一个程序的执行活动 (打开程序.读写程序数据.关闭程序) 2.线程: 执行某个程序时, 该进程调度的最小执行单位 ...
- Nginx 0.8.x + PHP 5.2.13（FastCGI）搭建胜过Apache十倍的Web服务器（第6版）(转)
转自:http://blog.s135.com/nginx_php_v6/] 前言:本文是我撰写的关于搭建“Nginx + PHP(FastCGI)”Web服务器的第6篇文章.本系列文章作为国内最早详 ...
- Atitit.单向sso 单点登录的设计与实现
Atitit.单向sso 单点登录的设计与实现 1. 单点登录sso 的三大解决方案1 2. 新方案:密码管理器方案1 3. 调用方1 4. 自动登录登录2 5. 主页跳转2 1. 单点登录sso ...
- Spring 读取配置文件（一）
注册 @Configuration 标识的类,spring 读取配置文件的时候该类会被自动装载 package cn.com.receive;import org.springframework.be ...
- python-class(5)
#!/usr/bin/env python #-*- coding:utf-8 -*- ############################ #File Name: class5.py #Auth ...
- python剑指网络篇二
在socket编程中 AF_INET 对应 IPv4 SOCK_STREAM 对应 TCP SOCK_DGRAM 对应 UDP
- 如何设置esxi的网卡与网络
很多朋友安装了vmware esxi后,不懂得服务器上的网卡该如何设置以及如何使用,我们在这里来介绍一下vmware esxi的网卡设置 工具/原料 一台服务器,配有两块千兆网卡 在服务器安装好v ...
- 受限玻尔兹曼机（RBM, Restricted Boltzmann machines）和深度信念网络（DBN, Deep Belief Networks）
受限玻尔兹曼机对于当今的非监督学习有一定的启发意义. 深度信念网络(DBN, Deep Belief Networks)于2006年由Geoffery Hinton提出.
- Spring Hello World 实例
Hello World 实例 让我们使用 Spring 框架开始实际的编程.在你开始使用 Spring 框架编写第一个例子之前,你必须确保已经正确地设置了 Spring 环境,正如在 Spring—— ...