React

js

React可以渲染HTML标签和React组件（React组件首字母需要大写，html标签首字母小写）

React 的 JSX 里约定分别使用首字母大、小写来区分本地组件的类和 HTML 标签。
JSX会把类XML的语法转换成纯粹的javascript

React并不是一个完整的MVC MVVM框架、组件化开发 ”轻“
应用场景：

复杂场景下的高性能
重用组件库，组件结合

组件依赖于从父级传入的数据，从父级传入的数据会做为子组件的属性（property），这些属性（properties）可以通过this.props访问到
在JSX中，通过大括号包住javascript表达式，可以在树结构中生成文本或者React组件
Reactive state

props是不可变的，它们从父组件传递过来
为了实现交互，为组件引入了state,this.state是组件私有的，可以通过调用this.setState()来改变它，当state更新以后，组件就会重新渲染自己
render方法依赖于this.props 和 this.state
componentDidMount是一个组件被渲染的时候被React自动调用的方法
state仅用于实现交互功能

var Hello = React.createClass({
  render: function() {
    return 
    <div style = {{color:'red',fontSize:'44px'}} className="">hello {this.props.name}
    </div>         
    //返回DOM结构，并不是真实地DOM节点，只是一个实例而已，通过render方法渲染变成DOM结构 this表示当前实例，props表示实例上的属性集合;不能使用class，因为class在es6里面已经是一个关键字，这里是js的渲染环境，所以使用className;
  }
});
ReactDOM.render(
  <Hello name="World" />,      
  document.getElementById('container')   //渲染完要插入的位置
);

props：不变的 this.props是只读的
state：值是私有的，可变的
React组件就像是函数，接收props和state作为参数，然后渲染出HTML

注意：React组件只能渲染单个根节点，如果想要返回多个节点，它们必须被包含在同一个节点里

JSX语法

由于JSX就是javascript，一些标示符像class和for不建议作为XML属性名。作为替代，React DOM使className和htmlFor来做对应的属性
JSX类似HTML，但并不完全一样

var props = { foo: 'default' };
var component = <Component {...props} foo={'override'} />;  //...是延展操作符，已经被es6数组支持
console.log(component.props.foo); // 'override' 后面的属性会覆盖掉前面的属性

子件状态管理：多数情况下，隐藏组件而不是删除组件

// 第一次渲染
<Card>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</Card>
// 第二次渲染
<Card>
  <p style={{display: 'none'}}>Paragraph 1</p>
  <p>Paragraph 2</p>
</Card>

React 知道如何冒泡和捕获事件，而且你的事件处理器接收到的 events 参数与 W3C 规范 一致，无论你使用哪种浏览器。如果需要在手机或平板等触摸设备上使用 React，需要调用 React.initializeTouchEvents(true); 启用触摸事件处理
React里只需更新组件的state，然后根据state重新渲染用户界面（不需要操作DOM）
常用的React数据变化的方法是调用setState(data,callback)，这个方法会合并data到this.state并重新渲染组件，渲染完成后就会调用callback
this.state应该仅包括能表示用户界面状态所需的最少数据，因此它不包括以下几点数据：

- 计算所得数据
- React组件：在render（）方法里使用当前的props和state来创建它
- 基于props的重复数据：尽可能的使用props来作为唯一的数据来源

复合组件

var Avatar = React.createClass({ //Avatar拥有ProfilePic和ProfileLink实例，就是能够给这两个组件设置props的那个组件
  render: function() {
    return (
      <div>
        <ProfilePic username={this.props.username} />
        <ProfileLink username={this.props.username} />
      </div>
    );
  }
});
var ProfilePic = React.createClass({
  render: function() {
    return (
      <img src={'http://graph.facebook.com/' + this.props.username + '/picture'} />
    );
  }
});
var ProfileLink = React.createClass({
  render: function() {
    return (
      <a href={'http://www.facebook.com/' + this.props.username}>
        {this.props.username}
      </a>
    );
  }
});
React.render(
  <Avatar username="pwh" />,
  document.getElementById('example')
);

数据流:

React里数据通过props从拥有者流向归属者。拥有者通过它的 props 或 state 计算出一些值，并把这些值绑定到它们拥有的组件的 props 上。因为这个过程会递归地调用，所以数据变化会自动在所有被使用的地方自动反映出来。

默认Prop值(React支持以声明的方式来定义props的默认值)

var ComponentWithDefaultProps = React.createClass({
  getDefaultProps: function() {
    return {
      value: 'default value'
    };
  }
  /* ... */
});

当父级没有传入 props 时，getDefaultProps() 可以保证 this.props.value 有默认值，注意 getDefaultProps 的结果会被缓存

单个子级

var MyComponent = React.createClass({
  propTypes: {
    children: React.PropTypes.element.isRequired
  },
  render: function() {
    return (
      <div>
        {this.props.children} // 有且仅有一个元素，否则会抛异常。
      </div>
    );
  }
});

React支持两端渲染，React允许服务器端预渲染HTML，也可以在服务器端预先存储一些数据来跳过初始化的一些数据查询。甚至一些网络爬虫能够轻松地获取到一些HTML内容。

findDOMNode()仅在挂载的组件上有效（也就是说，组件已经被放进了DOM中）。如果在一个未被挂载的组件上调用这个函数（例如在创建组件的render()函数中调用findDOMNode()），将会抛出异常。
为了获取一个到React组件的引用，你可以使用this来得到当前的React组件，或者你可以使用refs来指向一个你拥有的组件。它们像这样工作：

var MyComponent = React.createClass({
  handleClick: function() {
    // Explicitly focus the text input using the raw DOM API.
    React.findDOMNode(this.refs.myTextInput).focus();
  },
  render: function() {
    // The ref attribute adds a reference to the component to
    // this.refs when the component is mounted.
    return (
      <div>
        <input type="text" ref="myTextInput" />
        <input
          type="button"
          value="Focus the text input"
          onClick={this.handleClick}
        />
      </div>
    );
  }
});
React.render(
  <MyComponent />,
  document.getElementById('example')
);

组件的生命周期:
挂载：组件被插入到DOM中
更新：组件被重新渲染
移除：组件从DOM中移除

注意：从render()中返回的内容并不是实际渲染出来的子组件实例。从 render() 返回的仅仅是子组件层级树实例在特定时间的一个描述。

绑定一个 ref 属性到 render 返回的东西上面去，例如：

<input ref="myInput" />

2、在其它代码中，通过 this.refs 获取支撑实例（ backing instance ），就像这样：this.refs.myInput
你可以通过调用 this.refs.myInput.getDOMNode() 直接获取到组件的 DOM 节点。

propTypes对象允许验证传入到组件的props
statics允许定义静态方法，这些静态方法可以在组件类上调用

var MyComponent = React.createClass({
  statics: {
    customMethod: function(foo) {
      return foo === 'bar';
    }
  },
  render: function() {
  }
});
MyComponent.customMethod('bar');  // true

方法是静态的，可以在任何组件实例创建之前调用它们，不能获取组件的props和state

FLUX应用架构

使用单向数据流，当用户与React视图交互的时候，视图会通过中枢dispatcher产生一个action，然后保存着大量的应用数据和业务逻辑的view视图接收到冒泡的action，更新所有受影响的view

在JSX中，所有的标签都必须是闭合的，可以是自闭和、也可以是常规的闭合
JSX根节点的最大数量是1