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 ...
随机推荐
- PHP ob_start() 函数介绍
ob_start() 函数介绍: http://www.nowamagic.net/php/php_ObStart.php ob_start()作用: http://zhidao.baidu.com/ ...
- 用javascript实现一个2048游戏
早就想自己写一个2048游戏了,昨晚闲着没事,终于写了一个 如下图,按方向键开始玩吧. 如果觉得操作不方便,请直接打开链接玩吧: http://gujianbo.1kapp.com/2048/2048 ...
- Linux内核分析作业7：Linux内核如何装载和启动一个可执行程序
1.可执行文件的格式 在 Linux 平台下主要有以下三种可执行文件格式: 1.a.out(assembler and link editor output 汇编器和链接编辑器的输出) ...
- 利用SSH Filesystem实现远程文件系统
远程文件系统的访问有很多种不同的实现方式,一些常见的连接方式比其它特定情况下的更有用.最著名的一个例子就是微软的通用互联网文件系统(CIFS),它可以容许微软Windows"映射网 ...
- 一种让 IE6/7/8 支持 media query 响应式设计的方法
在不同的浏览器宽度下使用不同的 CSS 声明,常见的方案是使用 media query,但这个方案不支持 IE9 以下浏览器. 国外比较流行的 UI 框架 bootstrap v3 版本中使用 med ...
- 剑指Offer面试题：15.反转链表
一.题目:反转链表 题目:定义一个函数,输入一个链表的头结点,反转该链表并输出反转后链表的头结点. 链表结点定义如下,这里使用的是C#描述: public class Node { public in ...
- SSRS(rdl报表)分页显示表头和对表头的冻结处理
基础环境 最近在公司做西门子某系统的二次开发,需要用到SQLServer Reporting Services(SSRS).我们用的SQL版本是SQLServer 2008 R2:在设计报表时,表格用 ...
- 不要对外公开泛型List成员
最近在阅读Framework Design Guidelines,本着现学现用的原则,于是就用FxCop工具对代码进行规范性检查时,发现了很多问题,其中包括命名以及一些设计上的规范. 其中,Do no ...
- SSH实战 · SSH项目中怎么玩验证码
大致思路与之前servlet中玩验证码类似,生成随机数,产生干扰线,画到图片上,保存到session中. 本人习惯用的时候专门写一个验证码的action:CheckImgAction. step1: ...
- Uiautomator 2.0之BySelector类学习小记
1. BySelector与By静态类 1.1 BySelector类为指定搜索条件进行匹配UI元素, 通过UiDevice.findObject(BySelector)方式进行使用. 1.2 By类 ...