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 ...
随机推荐
- 流行的JavaScript库 ——jQuery
1.为了简化 JavaScript 的开发, 一些 JavsScript 库诞生了. JavaScript 库封装了很多预定义的对象和实用函数.能帮助使用者建立有高难度交互的 Web2.0 特性的富客 ...
- mysql 连接慢的问题（超过了1秒）
http://www.cnblogs.com/isenhome/p/5133547.html 症状描述 本机连接mysql速度很快 远程ping mysql主机速度正常 远程连接mysql速度需要等待 ...
- PHP好任性 —— 大小写敏感有两种规则，然而并没有什么特别原因
大小写敏感 变量.常量大小写敏感 大小写不敏感 类名.方法名.函数名.魔法变量大小写不敏感 原因 有人原引了Rasmus 在一次会议上的发言大意: "I'm definitely not a ...
- Sql Server 2012新特性 Online添加非空栏位.
我们都知道,Sql Server在一个数据量巨大的表中添加一个非空栏位是比较费心的,缺乏经验的DBA或是开发人员甚至可能鲁莽地直接添加导致阻塞相应业务,甚至可能因为资源欠缺造成实例的全局问题.当然这都 ...
- like语句百分号前置会使用到索引吗？
like语句百分号前置会使用到索引吗? 前几天看了这篇文章:谈SQL Server对like '%关键词%' 处理时的索引利用问题 看完了之后,我很想知道这篇文章是不是临时工写的?还是网站的主人写的, ...
- IE7中使用Jquery动态操作name问题
问题:IE7中无法使用Jquery动态操作页面元素的name属性. 在项目中有出现问题,某些客户的机器偶尔会有,后台取不到前台的数据值. 然开发和测试环境总是不能重现问题.坑爹之处就在于此,不能重现就 ...
- Eclipse 调试技巧
条件断点 顾名思义,是指当发生某种情况或者触发某种条件的情况下命中断点.常用的情形就是for循环中某个变量为xx值的时候命中断点类似的. 做法1:在debug视图中,BreakPoint View将所 ...
- Linux study
在centos5.5中编译LNMP环境 一.配置好ip, dns, 网关, 确保使用远程连接工具能够连接服务器 centos设置ip地址,网关, dns教程: http://www.osyumwei. ...
- iOS--知识综合应用成就时髦小功能点
iOS--知识综合应用成就时髦小功能点
- Css概要与选择器，刻度单位
目录 一.CSS3概要 1.1.特点 1.2.效果演示 1.3.帮助文档与学习 二.选择器 1.1.基础的选择器 1.2.组合选择器 1.3.属性选择器 1.4.伪类 1.5.伪元素 三.特殊性(优先 ...