reactjs学习之路
正式开始react的学习
1、react中组件的首字母如果是大写就会当成自定义组件，如果是小写就会当成DOM的自带元素名。如果你自定义组件名称首字母是小写不会报错，但是无法显示。
2、自定义组件的return中最外层只能有一个节点。
3、编写的HTML中的{}中，不能有语句，可以有求值表达式。但是可以将语句写在函数中，然后在{}中调用函数。
4、函数名和标签名都使用驼峰命名。
5、使用htmlFor和className。比如 <label htmlFor="name" className="red">Name</label>
6、样式的编写：可以在jsx中var style = {color:"red",backgroundColor:"blue"} 然后在自定义标签中添加style={style} 记得使用驼峰命名法。
7、非DOM属性：
a、dangerouslySetInnerHTML：在JSX中直接插入HTML代码
b、ref：父组件引用子组件
c、key：提高渲染性能。diff算法
8、组件的各个生命周期中运行的函数：a、初始化。
b、运行中。
c、销毁。
9、属性的用法：
a、<HelloWorld name="abc"/> //给属性name赋值"abc"
b、var props = {
one:"123",
two:"456"
}
<HelloWorld {...props}/> //展开语法相当于<HelloWorld one="123" two="456"}/>
c、var a = ReactDOM.render(<HelloWorld/>,document.body);
a.setProps({name:"Tim"}); //不建议这种用法，违背了React的设计原则（最新版貌似已经去掉了这个函数？console.log出来抓着原型链找了一遍都没有找到这个函数，只找到了setState）
10、状态的用法：
var HelloWorld = React.createClass({
render:function(){
return <p>Hello,{this.props.name||"world"}</p>
}
});
var HelloUniverse = React.createClass({
handleChange:function(e){
this.setState({
name:e.target.value
});
},
getInitialState:function(){
return {
name:'',
}
},
render:function(){
return <div>
<HelloWorld {...this.state}/>
<input type="text" onChange={this.handleChange} />
</div>
}
});
var a = ReactDOM.render(<HelloUniverse/>
,document.getElementById("root"));
11、属性和状态的相似点和区别
12、事件处理函数
13、事件对象的属性
14、组件协同使用
父子间的协同使用可以使用子组件调用父组件的方法。来达到这个目的，父组件通过prop的方式传递给子组件
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Hello,world</title>
<script src="../demo01/build/react.js"></script>
<script src="../demo01/build/react-dom.js"></script>
<script src="../demo01/browser.min.js"></script>
</head>
<body>
<div id= "root"></div>
<script type="text/babel">
var GenderSelect = React.createClass({
render:function(){
return <select name="gender" onChange={this.props.handleSelect}>
<option value="1">男</option>
<option value="0">女</option>
</select>
}
});
var SignupForm = React.createClass({
getInitialState:function(){
return {
name:'',
pwd:'',
gender:'',
}
},
handleChange:function(name,e){
var newState = {}
newState[name] = e.target.value;
this.setState(newState);
},
handleSelect:function(e){
this.setState({gender:e.target.value});
},
render:function(){
console.log(this.state)
return <form>
<input type="text" onChange={this.handleChange.bind(this,'name')}/>
<input type="text" onChange={this.handleChange.bind(this,'pwd')}/>
<GenderSelect handleSelect={this.handleSelect}/>
</form>
}
});
var a = ReactDOM.render(<SignupForm />,document.getElementById("root"));
</script>
</body>
</html>
父子组件交互
兄弟组件之间可以用过子组件A传到父组件，父组件再传递到子组件B的方式来实现。
15、mixin
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Hello,world</title>
<script src="../demo01/build/react.js"></script>
<script src="../demo01/build/react-dom.js"></script>
<script src="../demo01/browser.min.js"></script>
</head>
<body>
<div id= "root"></div>
<script type="text/babel">
var SetInit = {
handleClick:function(e){
console.log(e.target.value);
}
}
var Hello = React.createClass({
//这里命名必须为mixins
mixins:[SetInit],
render:function(){
return <input type="button" onClick={this.handleClick} value="123123"/>
}
});
var a = ReactDOM.render(<Hello />,document.getElementById("root"));
</script>
</body>
</html>
mixin实例
优点和缺点：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Hello,world</title>
<script src="../demo01/build/react.js"></script>
<script src="../demo01/build/react-dom.js"></script>
<script src="../demo01/browser.min.js"></script>
</head>
<body>
<div id= "root"></div>
<script type="text/babel">
var BindingMixin = {
handleChange:function(name){
var that = this;
return function(e){
var news = {};
news[name] = e.target.value;
that.setState(news);
}
}
};
var Example = React.createClass({
//这里命名必须为mixins
mixins:[BindingMixin],
getInitialState:function(){
return {
text:''
}
},
render:function(){
return <div>
<input type="text" onChange={this.handleChange('text')} />
<p>{this.state.text}</p>
</div>
}
});
var a = ReactDOM.render(<Example />,document.getElementById("root"));
</script>
</body>
</html>
mixin
16、可控组件和不可控组件
可控组件就是value值没有写死的，比如value={this.state.value}。
不可控则反之。
尽量使用可控组件
碰到的问题：
1、在wepack.config.js配置项中，因为module中的loader是多个配置项，所以应该是loaders，但是我写的是loader，导致后面的配置项没有生效，出现了很多编译问题。。。
2、在组件的render中return的标签，结尾的标签忘记打/，比如<div></div>写成了<div><div> react就识别成了两个div标签，就会报embedded: Unterminated JSX contents.
3、render中所有的非成对标签，必须将标签闭合，比如：<br/> <input/> 否则会报错:embedded: Expected corresponding JSX closing tag for
4、很有意思的一个东西，如果我在某个函数中setState了某个属性，那么紧接着马上打印出来这个属性是不会有正确的结果的。要在componentDidUpdate函数中，也就是等组件更新完以后再打印出来才是正确的结果。
5、如果在父组件中更新了子组件的prop，请不要将这个prop放入getInitialState函数中当做属性，因为如果更新了prop的话，子组件是不会更新state中的属性（可以查看11当中的表）。
6、如果使用的是es6的语法，也就是采用继承React.Component的方法来构建组件的话，就不能使用getInitialState()函数，会报警告 Warning: getInitialState was defined on TodoApp, a plain JavaScript class. This is only supported for classes created using React.createClass. Did you mean to define a state property instead?
解决方法：设置constructor
constructor(props){
super(props);
this.state = {
example:'example',
}
}
reactjs学习之路的更多相关文章
- jQuery学习之路（1）-选择器
▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...
- Android开发学习之路-RecyclerView滑动删除和拖动排序
Android开发学习之路-RecyclerView使用初探 Android开发学习之路-RecyclerView的Item自定义动画及DefaultItemAnimator源码分析 Android开 ...
- RPC远程过程调用学习之路（一）：用最原始代码还原PRC框架
RPC: Remote Procedure Call 远程过程调用,即业务的具体实现不是在自己系统中,需要从其他系统中进行调用实现,所以在系统间进行数据交互时经常使用. rpc的实现方式有很多,可以通 ...
- webService学习之路（三）：springMVC集成CXF后调用已知的wsdl接口
webService学习之路一:讲解了通过传统方式怎么发布及调用webservice webService学习之路二:讲解了SpringMVC和CXF的集成及快速发布webservice 本篇文章将讲 ...
- [精品书单] C#/.NET 学习之路——从入门到放弃
C#/.NET 学习之路--从入门到放弃 此系列只包含 C#/CLR 学习,不包含应用框架(ASP.NET , WPF , WCF 等)及架构设计学习书籍和资料. C# 入门 <C# 本质论&g ...
- Redis——学习之路四（初识主从配置）
首先我们配置一台master服务器,两台slave服务器.master服务器配置就是默认配置 端口为6379,添加就一个密码CeshiPassword,然后启动master服务器. 两台slave服务 ...
- Redis——学习之路三（初识redis config配置）
我们先看看config 默认情况下系统是怎么配置的.在命令行中输入 config get *(如图) 默认情况下有61配置信息,每一个命令占两行,第一行为配置名称信息,第二行为配置的具体信息. ...
- Redis——学习之路二（初识redis服务器命令）
上一章我们已经知道了如果启动redis服务器,现在我们来学习一下,以及如何用客户端连接服务器.接下来我们来学习一下查看操作服务器的命令. 服务器命令: 1.info——当前redis服务器信息 s ...
- 踏上Salesforce的学习之路（一）
相信通过前面的学习,大家已经拥有了一个属于自己的Salesforce开发者账号,下面,我们将用这个账号正式踏上Salesforce的学习之路. 首先,点击网址:https://developer.sa ...
随机推荐
- 一些iOS高效开源类库
因为iOS SDK相对比较底层,所以开发者就得受累多做一些体力活.不过幸运的是,有很多第三方的类库可以用来简化很多不必要的工作.笔者整理了一下在本人学习过程中用到的一些比较有用Objective-C开 ...
- USACO翻译：USACO 2014 FEB SILVER 三题
USACO 2014 FEB SILVER 一.题目概览 中文题目名称 自动打字 路障 神秘代码 英文题目名称 auto rblock scode 可执行文件名 auto rblock scode 输 ...
- 一鼓作气 博客--第七篇 note7
面向对象相关知识简介 类(Class): 用来描述具有相同的属性和方法的对象的集合.它定义了该集合中每个对象所共有的属性和方法.对象是类的实例. 类变量:类变量在整个实例化的对象中是公用的.类变量定义 ...
- RSA密钥生成与使用
RSA密钥生成与使用 openssl生成工具链接:http://pan.baidu.com/s/1c0v3UxE 密码:uv48 1. 打开openssl密钥生成软件打开 openssl 文件夹下的 ...
- ORACLE冷备份与恢复
ORACLE备份和恢复有三种方式: (1)数据泵(expdp/impdp) (2)冷备份 (3)RMAN备份 就分类而言,(1)和(2)统有称为"冷"备份,(3)称为"热 ...
- C#与Java对比学习：类型判断、类与接口继承、代码规范与编码习惯、常量定义
类型判断符号: C#:object a; if(a is int) { } 用 is 符号判断 Java:object a; if(a instanceof Integer) { } 用 inst ...
- windows下 安装Kali Linux到 U盘的方法
作者:玄魂工作室 \ 2016年10月20日 把Kali Linux安装到U盘好处很多,可以从U盘启动使用整个电脑的硬件资源, 可以随身携带,减少对自己电脑的影响. 今天要给大家讲的是如何在windo ...
- 为什么google bazel构建工具流行不起来
作者Jack47 转载请保留作者和原文出处 之前博主写了系列文章Google软件构建工具Bazel原理及使用方法介绍.最近使用了一段时间后,觉得这个东西不是一种通用的构建工具,很难对接到情况复杂的大的 ...
- Vivado SDK 2014.2 创建新工程后，BSP版本不对的解决办法
问题描述如下: 1. 使用Vivado SDK 2014.2已经创建了工程,但是此时,hdf文件增加了外设,需要重新创建工程以更新SDK中的外设描述: 2. 使用新的hdf创建工程后,发现system ...
- SQL Azure (18) 使用External Table实现垮库查询
<Windows Azure Platform 系列文章目录> 问题 1.我们在进行SQL Server开发的时候,经常会使用垮库查询.但是在默认情况下,使用Azure SQL Datab ...