react学习笔记1
学习笔记来自阮一峰大神的react教材，对应代码github地址点这里。
react起源
React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。
基本概念
jsx
react中一个重要的概念是JSX（JavaScript+XML），JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。因为与JavaScript不兼容，所有使用JSX的script标签都要加上type="text/babel".
jsx优点：
- JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
- 它是类型安全的，在编译过程中就能发现错误。
- 使用 JSX 编写模板更加简单快速。
基本语法规则
- 遇到html标签以<开头，就用html规则解析
- 遇到代码以{开头，就用javascript规则解析
var names = ['Alice', 'Emily', 'Kate'];
ReactDOM.render(
<div>
{
names.map(function (name) {
return <div>Hello, {name}!div>
})
}
div>,
document.getElementById('example')
);jsx语法糖优化
- 对于引用不存在的字面量对象时报错
- 对于引用某个存在对象的不存在的方法时不报错也不显示undefined，而是什么都不显示
- 对于引用某个存在数组的不存在的索引值时不报错也不显示undefined，而是什么都不显示
var arr=[],
obj={};
//empty不存在，报错
ReactDOM.render(
<div>{empty}div>,
document.getElementById('example')
);
//obj存在，obj.key不存在，当前对象内容为空
ReactDOM.render(
<div>{obj.key}div>,
document.getElementById('example')
);
//对于一个数组不指定某一项会默认按数组顺序输出所有项内容
//arr存在，arr[5]不存在，当前对象内容为空
ReactDOM.render(
<div>{arr[5]}div>,
document.getElementById('example')
);Browser.js
用于将jsx转化为js标准语法
react相关方法
ReactDOM.render()
ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。
- 第一个参数用于指定插入的模板
- 第二个参数用来指定模板插入的位置
比如以下代码的含义就是在id为example的标签中插入一条标签模板。
ReactDOM.render(
<h1>Hello, world!h1>,
document.getElementById('example')
);模板中使用数组
var arr = [
<h1>Hello world!h1>,
<h2>React is awesomeh2>,
];
ReactDOM.render(
<div>{arr}div>,
document.getElementById('example')
);React.createClass()
React.createClass 方法就用于生成一个组件类（注：组件类并不是一个真实的DOm节点）。React允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。
- 所有的组件类都必须有自己的render方法用于输出组件
- 组件类的第一个字母必须大写
- 组件类只能有一个顶层标签（出现多个标签需用一个父标签将其余标签包裹起来）
- 组件的属性可以在组件类的 this.props 对象上获取(以下代码中使用this.props.name获取了组件类的name属性)
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}h1>;
}
});
ReactDOM.render(
//"John" />,
document.getElementById('example')
); 添加组件属性时需注意：class要写成className，for要写成htmlFor，因为class与for是html的保留字
this.props
this.props对象的属性与组件的属性一一对应
this.props.children表示组建的所有子节点。当子节点不存在，其值为undefined，只有一个子节点时其值为一个对象，当子节点有多个时其值为一个数组。
以下代码为NodesList每一个子节点元素外都套一个li标签
//定义一个NotesList组件类并将这个组件类中的每一项都用li标签包裹起来
var NotesList = React.createClass({
render: function()
return (
{
React.Children.map(this.props.children, function (child)
{
return <li>{child}li>;
})
}
</ol>
);
}
});
//给NotesList组件类中添加两个子标签，将这个组件类展示在页面body中
ReactDOM.render(
hellospan>
<span>worldspan>
NotesList>,
document.body
); PropTypes与getDefaultProps
PropTypes是生成组件类时（React.createClass）设定的属性，用于验证属性是否符合要求。默认情况下组件的属性可以接受任意值。
var MyTitle = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,
},
render: function() {
return <h1> {this.props.title} h1>;
}
});
以上代码限制了：
1. Mytitle组件有一个title属性
2. title属性值必须
3. title属性的值必须是一个字符串
getDefaultProps是设定当前组件下所有属性的默认验证
var MyTitle = React.createClass({
getDefaultProps : function () {
return {
title : 'Hello World'
};
},
render: function() {
return <h1> {this.props.title} h1>;
}
});