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 awesome</h2>,
];
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(
//<HelloMessage name="John" ></HelloMessage>等价于<HelloMessage name="John" />
  <HelloMessage name="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 (
      <ol>
      {
        React.Children.map(this.props.children, function (child) {
          return <li>{child}</li>;
        })
      }
      </ol>
    );
  }
});

//给NotesList组件类中添加两个子标签，将这个组件类展示在页面body中
ReactDOM.render(
  <NotesList>
    <span>hello</span>
    <span>world</span>
  </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>;
   }
});

END